[{"data":1,"prerenderedAt":1761},["ShallowReactive",2],{"navigation_docs":3,"-guides-events-and-models":279,"-guides-events-and-models-surround":1756},[4,26,112,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Migrate from 0.6","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F3.migration","i-lucide-arrow-up-circle",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[32,37,42,47,52,57,62,67,72,77,82,87,92,97,102,107],{"title":33,"path":34,"stem":35,"icon":36},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":38,"path":39,"stem":40,"icon":41},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":48,"path":49,"stem":50,"icon":51},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":53,"path":54,"stem":55,"icon":56},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":58,"path":59,"stem":60,"icon":61},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":63,"path":64,"stem":65,"icon":66},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":68,"path":69,"stem":70,"icon":71},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":73,"path":74,"stem":75,"icon":76},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":78,"path":79,"stem":80,"icon":81},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":83,"path":84,"stem":85,"icon":86},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":88,"path":89,"stem":90,"icon":91},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":93,"path":94,"stem":95,"icon":96},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":98,"path":99,"stem":100,"icon":101},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":103,"path":104,"stem":105,"icon":106},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":108,"path":109,"stem":110,"icon":111},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":113,"icon":114,"path":115,"stem":116,"children":117,"page":25},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[118,123,128,133,138,143,148,153,158,163,167,172,177,182,187,192,197,201,206],{"title":119,"path":120,"stem":121,"icon":122},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":124,"path":125,"stem":126,"icon":127},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":129,"path":130,"stem":131,"icon":132},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":134,"path":135,"stem":136,"icon":137},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":139,"path":140,"stem":141,"icon":142},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":144,"path":145,"stem":146,"icon":147},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":149,"path":150,"stem":151,"icon":152},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":154,"path":155,"stem":156,"icon":157},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":159,"path":160,"stem":161,"icon":162},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":164,"path":165,"stem":166,"icon":51},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":168,"path":169,"stem":170,"icon":171},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":173,"path":174,"stem":175,"icon":176},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":178,"path":179,"stem":180,"icon":181},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":183,"path":184,"stem":185,"icon":186},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":188,"path":189,"stem":190,"icon":191},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":193,"path":194,"stem":195,"icon":196},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":198,"path":199,"stem":200,"icon":137},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":202,"path":203,"stem":204,"icon":205},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":207,"path":208,"stem":209,"icon":210},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":25},"Components","i-lucide-code","\u002Fcomponents","4.components",[217,222,227,231,236,240,245,249,254,259,264,269,274],{"title":218,"path":219,"stem":220,"icon":221},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":223,"path":224,"stem":225,"icon":226},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":228,"path":229,"stem":230,"icon":196},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":232,"path":233,"stem":234,"icon":235},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":237,"path":238,"stem":239,"icon":147},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":241,"path":242,"stem":243,"icon":244},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":246,"path":247,"stem":248,"icon":56},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":250,"path":251,"stem":252,"icon":253},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":255,"path":256,"stem":257,"icon":258},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":260,"path":261,"stem":262,"icon":263},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":265,"path":266,"stem":267,"icon":268},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":270,"path":271,"stem":272,"icon":273},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":275,"path":276,"stem":277,"icon":278},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":280,"title":83,"body":281,"description":1749,"extension":1750,"links":1751,"meta":1752,"navigation":1753,"path":84,"seo":1754,"stem":85,"__hash__":1755},"docs\u002F2.guides\u002F13.events-and-models.md",{"type":282,"value":283,"toc":1741},"minimark",[284,289,293,402,774,795,798,801,806,1114,1120,1124,1127,1380,1394,1397,1420,1441,1447,1450,1533,1537,1544,1728,1737],[285,286,288],"h2",{"id":287},"events","Events",[290,291,292],"p",{},"All callbacks are typed Vue events, so your editor completes their names and payloads.",[294,295,300],"pre",{"className":296,"code":297,"language":298,"meta":299,"style":299},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBarChart :data=\"data\" @click=\"(state, event) => console.log(state.activeIndex)\">\n  \u003CBar data-key=\"desktop\" @click=\"(entry, index, event) => select(entry.payload)\" \u002F>\n\u003C\u002FBarChart>\n","vue","",[301,302,303,386,392],"code",{"__ignoreMap":299},[304,305,308,312,316,319,323,326,329,332,334,337,340,342,344,347,351,354,357,360,363,366,369,373,376,378,381,383],"span",{"class":306,"line":307},"line",1,[304,309,311],{"class":310},"sMK4o","\u003C",[304,313,315],{"class":314},"swJcz","BarChart",[304,317,318],{"class":310}," :",[304,320,322],{"class":321},"spNyl","data",[304,324,325],{"class":310},"=",[304,327,328],{"class":310},"\"",[304,330,322],{"class":331},"sTEyZ",[304,333,328],{"class":310},[304,335,336],{"class":310}," @",[304,338,339],{"class":321},"click",[304,341,325],{"class":310},[304,343,328],{"class":310},[304,345,346],{"class":310},"(",[304,348,350],{"class":349},"sHdIc","state",[304,352,353],{"class":310},",",[304,355,356],{"class":349}," event",[304,358,359],{"class":310},")",[304,361,362],{"class":321}," =>",[304,364,365],{"class":331}," console",[304,367,368],{"class":310},".",[304,370,372],{"class":371},"s2Zo4","log",[304,374,375],{"class":331},"(state",[304,377,368],{"class":310},[304,379,380],{"class":331},"activeIndex)",[304,382,328],{"class":310},[304,384,385],{"class":310},">\n",[304,387,389],{"class":306,"line":388},2,[304,390,391],{"class":331},"  \u003CBar data-key=\"desktop\" @click=\"(entry, index, event) => select(entry.payload)\" \u002F>\n",[304,393,395,398,400],{"class":306,"line":394},3,[304,396,397],{"class":310},"\u003C\u002F",[304,399,315],{"class":314},[304,401,385],{"class":310},[403,404,405,420],"table",{},[406,407,408],"thead",{},[409,410,411,415,417],"tr",{},[412,413,414],"th",{},"Component",[412,416,288],{},[412,418,419],{},"Payload",[421,422,423,469,511,543,566,582,601,619,635,651,675,705,721,758],"tbody",{},[409,424,425,429,464],{},[426,427,428],"td",{},"Chart containers and standalone charts",[426,430,431,433,434,433,437,433,440,433,443,433,446,433,449,433,452,433,455,433,458,433,461],{},[301,432,339],{},", ",[301,435,436],{},"mouseenter",[301,438,439],{},"mousemove",[301,441,442],{},"mouseleave",[301,444,445],{},"mousedown",[301,447,448],{},"mouseup",[301,450,451],{},"contextmenu",[301,453,454],{},"dblclick",[301,456,457],{},"touchstart",[301,459,460],{},"touchmove",[301,462,463],{},"touchend",[426,465,466],{},[301,467,468],{},"(state: ChartPointerState, event)",[409,470,471,498,506],{},[426,472,473,474,433,477,433,480,433,483,433,486,433,489,433,492,433,495,359],{},"Series (",[301,475,476],{},"Bar",[301,478,479],{},"Line",[301,481,482],{},"Area",[301,484,485],{},"Scatter",[301,487,488],{},"Pie",[301,490,491],{},"Radar",[301,493,494],{},"RadialBar",[301,496,497],{},"Funnel",[426,499,500,433,502,433,504],{},[301,501,339],{},[301,503,436],{},[301,505,442],{},[426,507,508],{},[301,509,510],{},"(entry, index, event)",[409,512,513,532,540],{},[426,514,515,516,433,518,433,520,433,523,526,527,433,529],{},"Series, ",[301,517,168],{},[301,519,178],{},[301,521,522],{},"SunburstChart",[301,524,525],{},"JourneySankey",", cell charts, ",[301,528,198],{},[301,530,531],{},"BarList",[426,533,534,433,537],{},[301,535,536],{},"animation-start",[301,538,539],{},"animation-end",[426,541,542],{},"none",[409,544,545,556,561],{},[426,546,547,433,549,433,551,433,553,555],{},[301,548,476],{},[301,550,488],{},[301,552,218],{},[301,554,198],{},", cell charts",[426,557,558],{},[301,559,560],{},"update:activeIndex",[426,562,563],{},[301,564,565],{},"(index: number | null)",[409,567,568,572,577],{},[426,569,570],{},[301,571,241],{},[426,573,574],{},[301,575,576],{},"update:range",[426,578,579],{},[301,580,581],{},"(range: BrushStartEndIndex | null)",[409,583,584,588,596],{},[426,585,586],{},[301,587,241],{},[426,589,590,433,593],{},[301,591,592],{},"change",[301,594,595],{},"drag-end",[426,597,598],{},[301,599,600],{},"({ startIndex, endIndex })",[409,602,603,607,615],{},[426,604,605],{},[301,606,223],{},[426,608,609,433,611,433,613],{},[301,610,339],{},[301,612,436],{},[301,614,442],{},[426,616,617],{},[301,618,510],{},[409,620,621,625,630],{},[426,622,623],{},[301,624,223],{},[426,626,627],{},[301,628,629],{},"update:hidden",[426,631,632],{},[301,633,634],{},"(hidden: string[])",[409,636,637,641,646],{},[426,638,639],{},[301,640,223],{},[426,642,643],{},[301,644,645],{},"bbox-update",[426,647,648],{},[301,649,650],{},"(box: { width, height } | null)",[409,652,653,659,670],{},[426,654,655,433,657],{},[301,656,168],{},[301,658,522],{},[426,660,661,433,664,433,667],{},[301,662,663],{},"node-click",[301,665,666],{},"node-mouseenter",[301,668,669],{},"node-mouseleave",[426,671,672],{},[301,673,674],{},"(node, index, event)",[409,676,677,683,700],{},[426,678,679,433,681],{},[301,680,178],{},[301,682,525],{},[426,684,685,433,687,433,689,433,691,433,694,433,697],{},[301,686,663],{},[301,688,666],{},[301,690,669],{},[301,692,693],{},"link-click",[301,695,696],{},"link-mouseenter",[301,698,699],{},"link-mouseleave",[426,701,702],{},[301,703,704],{},"(item, index, event)",[409,706,707,711,716],{},[426,708,709],{},[301,710,525],{},[426,712,713],{},[301,714,715],{},"update:pinned",[426,717,718],{},[301,719,720],{},"(path: string[] | null)",[409,722,723,737,748],{},[426,724,725,726,433,728,433,731,433,734,359],{},"Cell charts (",[301,727,183],{},[301,729,730],{},"Heatmap",[301,732,733],{},"CohortChart",[301,735,736],{},"CalendarHeatmap",[426,738,739,433,742,433,745],{},[301,740,741],{},"cell-click",[301,743,744],{},"cell-mouseenter",[301,746,747],{},"cell-mouseleave",[426,749,750,753,754,757],{},[301,751,752],{},"(cell, index, event)","; ",[301,755,756],{},"cell"," is the chart's domain object",[409,759,760,764,769],{},[426,761,762],{},[301,763,531],{},[426,765,766],{},[301,767,768],{},"row-click",[426,770,771],{},[301,772,773],{},"(row, index, event)",[290,775,776,433,778,780,781,783,784,787,788,791,792,368],{},[301,777,663],{},[301,779,741],{}," and the JourneySankey ",[301,782,693],{}," also fire when the user presses\n",[301,785,786],{},"Enter"," on the focused item, so their ",[301,789,790],{},"event"," can be a ",[301,793,794],{},"KeyboardEvent",[285,796,797],{"id":797},"v-model",[290,799,800],{},"Bind a model when the rest of your page needs to read or set chart state. Without a model, the chart manages the state itself.",[802,803,805],"h3",{"id":804},"brush-range","Brush range",[294,807,809],{"className":296,"code":808,"language":298,"meta":299,"style":299},"\u003Cscript setup lang=\"ts\">\nimport type { BrushStartEndIndex } from 'vccs'\n\nconst range = ref\u003CBrushStartEndIndex | null>({ startIndex: 0, endIndex: 29 })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBarChart\n    :data=\"data\"\n    :height=\"300\"\n  >\n    \u003CBar data-key=\"desktop\" \u002F>\n    \u003CBrush\n      v-model:range=\"range\"\n    \u002F>\n  \u003C\u002FBarChart>\n  \u003Cp v-if=\"range\">\n    Showing rows {{ range.startIndex }}–{{ range.endIndex }}\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[301,810,811,836,866,872,931,940,945,955,964,981,998,1004,1027,1035,1054,1060,1070,1090,1096,1105],{"__ignoreMap":299},[304,812,813,815,818,821,824,826,828,832,834],{"class":306,"line":307},[304,814,311],{"class":310},[304,816,817],{"class":314},"script",[304,819,820],{"class":321}," setup",[304,822,823],{"class":321}," lang",[304,825,325],{"class":310},[304,827,328],{"class":310},[304,829,831],{"class":830},"sfazB","ts",[304,833,328],{"class":310},[304,835,385],{"class":310},[304,837,838,842,845,848,851,854,857,860,863],{"class":306,"line":388},[304,839,841],{"class":840},"s7zQu","import",[304,843,844],{"class":840}," type",[304,846,847],{"class":310}," {",[304,849,850],{"class":331}," BrushStartEndIndex",[304,852,853],{"class":310}," }",[304,855,856],{"class":840}," from",[304,858,859],{"class":310}," '",[304,861,862],{"class":830},"vccs",[304,864,865],{"class":310},"'\n",[304,867,868],{"class":306,"line":394},[304,869,871],{"emptyLinePlaceholder":870},true,"\n",[304,873,875,878,881,883,886,888,892,895,898,901,903,906,909,912,916,918,921,923,926,928],{"class":306,"line":874},4,[304,876,877],{"class":321},"const",[304,879,880],{"class":331}," range ",[304,882,325],{"class":310},[304,884,885],{"class":371}," ref",[304,887,311],{"class":310},[304,889,891],{"class":890},"sBMFI","BrushStartEndIndex",[304,893,894],{"class":310}," |",[304,896,897],{"class":890}," null",[304,899,900],{"class":310},">",[304,902,346],{"class":331},[304,904,905],{"class":310},"{",[304,907,908],{"class":314}," startIndex",[304,910,911],{"class":310},":",[304,913,915],{"class":914},"sbssI"," 0",[304,917,353],{"class":310},[304,919,920],{"class":314}," endIndex",[304,922,911],{"class":310},[304,924,925],{"class":914}," 29",[304,927,853],{"class":310},[304,929,930],{"class":331},")\n",[304,932,934,936,938],{"class":306,"line":933},5,[304,935,397],{"class":310},[304,937,817],{"class":314},[304,939,385],{"class":310},[304,941,943],{"class":306,"line":942},6,[304,944,871],{"emptyLinePlaceholder":870},[304,946,948,950,953],{"class":306,"line":947},7,[304,949,311],{"class":310},[304,951,952],{"class":314},"template",[304,954,385],{"class":310},[304,956,958,961],{"class":306,"line":957},8,[304,959,960],{"class":310},"  \u003C",[304,962,963],{"class":314},"BarChart\n",[304,965,967,970,972,974,976,978],{"class":306,"line":966},9,[304,968,969],{"class":310},"    :",[304,971,322],{"class":321},[304,973,325],{"class":310},[304,975,328],{"class":310},[304,977,322],{"class":331},[304,979,980],{"class":310},"\"\n",[304,982,984,986,989,991,993,996],{"class":306,"line":983},10,[304,985,969],{"class":310},[304,987,988],{"class":321},"height",[304,990,325],{"class":310},[304,992,328],{"class":310},[304,994,995],{"class":914},"300",[304,997,980],{"class":310},[304,999,1001],{"class":306,"line":1000},11,[304,1002,1003],{"class":310},"  >\n",[304,1005,1007,1010,1012,1015,1017,1019,1022,1024],{"class":306,"line":1006},12,[304,1008,1009],{"class":310},"    \u003C",[304,1011,476],{"class":314},[304,1013,1014],{"class":321}," data-key",[304,1016,325],{"class":310},[304,1018,328],{"class":310},[304,1020,1021],{"class":830},"desktop",[304,1023,328],{"class":310},[304,1025,1026],{"class":310}," \u002F>\n",[304,1028,1030,1032],{"class":306,"line":1029},13,[304,1031,1009],{"class":310},[304,1033,1034],{"class":314},"Brush\n",[304,1036,1038,1041,1043,1046,1048,1050,1052],{"class":306,"line":1037},14,[304,1039,1040],{"class":321},"      v-model",[304,1042,911],{"class":310},[304,1044,1045],{"class":321},"range",[304,1047,325],{"class":310},[304,1049,328],{"class":310},[304,1051,1045],{"class":331},[304,1053,980],{"class":310},[304,1055,1057],{"class":306,"line":1056},15,[304,1058,1059],{"class":310},"    \u002F>\n",[304,1061,1063,1066,1068],{"class":306,"line":1062},16,[304,1064,1065],{"class":310},"  \u003C\u002F",[304,1067,315],{"class":314},[304,1069,385],{"class":310},[304,1071,1073,1075,1077,1080,1082,1084,1086,1088],{"class":306,"line":1072},17,[304,1074,960],{"class":310},[304,1076,290],{"class":314},[304,1078,1079],{"class":321}," v-if",[304,1081,325],{"class":310},[304,1083,328],{"class":310},[304,1085,1045],{"class":830},[304,1087,328],{"class":310},[304,1089,385],{"class":310},[304,1091,1093],{"class":306,"line":1092},18,[304,1094,1095],{"class":331},"    Showing rows {{ range.startIndex }}–{{ range.endIndex }}\n",[304,1097,1099,1101,1103],{"class":306,"line":1098},19,[304,1100,1065],{"class":310},[304,1102,290],{"class":314},[304,1104,385],{"class":310},[304,1106,1108,1110,1112],{"class":306,"line":1107},20,[304,1109,397],{"class":310},[304,1111,952],{"class":314},[304,1113,385],{"class":310},[290,1115,1116,1119],{},[301,1117,1118],{},"null"," shows all rows without travellers. Brush requests a normalized range when bounds fall outside the current data. A parent can accept or reject each request.",[802,1121,1123],{"id":1122},"active-element","Active element",[290,1125,1126],{},"Highlight the same row in a table and in the chart:",[294,1128,1130],{"className":296,"code":1129,"language":298,"meta":299,"style":299},"\u003Cscript setup lang=\"ts\">\nconst active = ref\u003Cnumber | null>(null)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLineChart\n    :data=\"data\"\n    :height=\"300\"\n  >\n    \u003CLine data-key=\"desktop\" \u002F>\n    \u003CTooltip v-model:active-index=\"active\" \u002F>\n  \u003C\u002FLineChart>\n  \u003Ctr\n    v-for=\"(row, i) in data\"\n    :key=\"row.date\"\n    :class=\"{ highlight: i === active }\"\n    @mouseenter=\"active = i\"\n  >\n    ...\n  \u003C\u002Ftr>\n\u003C\u002Ftemplate>\n",[301,1131,1132,1152,1180,1188,1192,1200,1207,1221,1235,1239,1257,1282,1291,1298,1312,1326,1340,1354,1358,1363,1371],{"__ignoreMap":299},[304,1133,1134,1136,1138,1140,1142,1144,1146,1148,1150],{"class":306,"line":307},[304,1135,311],{"class":310},[304,1137,817],{"class":314},[304,1139,820],{"class":321},[304,1141,823],{"class":321},[304,1143,325],{"class":310},[304,1145,328],{"class":310},[304,1147,831],{"class":830},[304,1149,328],{"class":310},[304,1151,385],{"class":310},[304,1153,1154,1156,1159,1161,1163,1165,1168,1170,1172,1174,1176,1178],{"class":306,"line":388},[304,1155,877],{"class":321},[304,1157,1158],{"class":331}," active ",[304,1160,325],{"class":310},[304,1162,885],{"class":371},[304,1164,311],{"class":310},[304,1166,1167],{"class":890},"number",[304,1169,894],{"class":310},[304,1171,897],{"class":890},[304,1173,900],{"class":310},[304,1175,346],{"class":331},[304,1177,1118],{"class":310},[304,1179,930],{"class":331},[304,1181,1182,1184,1186],{"class":306,"line":394},[304,1183,397],{"class":310},[304,1185,817],{"class":314},[304,1187,385],{"class":310},[304,1189,1190],{"class":306,"line":874},[304,1191,871],{"emptyLinePlaceholder":870},[304,1193,1194,1196,1198],{"class":306,"line":933},[304,1195,311],{"class":310},[304,1197,952],{"class":314},[304,1199,385],{"class":310},[304,1201,1202,1204],{"class":306,"line":942},[304,1203,960],{"class":310},[304,1205,1206],{"class":314},"LineChart\n",[304,1208,1209,1211,1213,1215,1217,1219],{"class":306,"line":947},[304,1210,969],{"class":310},[304,1212,322],{"class":321},[304,1214,325],{"class":310},[304,1216,328],{"class":310},[304,1218,322],{"class":331},[304,1220,980],{"class":310},[304,1222,1223,1225,1227,1229,1231,1233],{"class":306,"line":957},[304,1224,969],{"class":310},[304,1226,988],{"class":321},[304,1228,325],{"class":310},[304,1230,328],{"class":310},[304,1232,995],{"class":914},[304,1234,980],{"class":310},[304,1236,1237],{"class":306,"line":966},[304,1238,1003],{"class":310},[304,1240,1241,1243,1245,1247,1249,1251,1253,1255],{"class":306,"line":983},[304,1242,1009],{"class":310},[304,1244,479],{"class":314},[304,1246,1014],{"class":321},[304,1248,325],{"class":310},[304,1250,328],{"class":310},[304,1252,1021],{"class":830},[304,1254,328],{"class":310},[304,1256,1026],{"class":310},[304,1258,1259,1261,1263,1266,1268,1271,1273,1275,1278,1280],{"class":306,"line":1000},[304,1260,1009],{"class":310},[304,1262,218],{"class":314},[304,1264,1265],{"class":321}," v-model",[304,1267,911],{"class":310},[304,1269,1270],{"class":321},"active-index",[304,1272,325],{"class":310},[304,1274,328],{"class":310},[304,1276,1277],{"class":331},"active",[304,1279,328],{"class":310},[304,1281,1026],{"class":310},[304,1283,1284,1286,1289],{"class":306,"line":1006},[304,1285,1065],{"class":310},[304,1287,1288],{"class":314},"LineChart",[304,1290,385],{"class":310},[304,1292,1293,1295],{"class":306,"line":1029},[304,1294,960],{"class":310},[304,1296,1297],{"class":314},"tr\n",[304,1299,1300,1303,1305,1307,1310],{"class":306,"line":1037},[304,1301,1302],{"class":321},"    v-for",[304,1304,325],{"class":310},[304,1306,328],{"class":310},[304,1308,1309],{"class":830},"(row, i) in data",[304,1311,980],{"class":310},[304,1313,1314,1317,1319,1321,1324],{"class":306,"line":1056},[304,1315,1316],{"class":321},"    :key",[304,1318,325],{"class":310},[304,1320,328],{"class":310},[304,1322,1323],{"class":830},"row.date",[304,1325,980],{"class":310},[304,1327,1328,1331,1333,1335,1338],{"class":306,"line":1062},[304,1329,1330],{"class":321},"    :class",[304,1332,325],{"class":310},[304,1334,328],{"class":310},[304,1336,1337],{"class":830},"{ highlight: i === active }",[304,1339,980],{"class":310},[304,1341,1342,1345,1347,1349,1352],{"class":306,"line":1072},[304,1343,1344],{"class":321},"    @mouseenter",[304,1346,325],{"class":310},[304,1348,328],{"class":310},[304,1350,1351],{"class":830},"active = i",[304,1353,980],{"class":310},[304,1355,1356],{"class":306,"line":1092},[304,1357,1003],{"class":310},[304,1359,1360],{"class":306,"line":1098},[304,1361,1362],{"class":331},"    ...\n",[304,1364,1365,1367,1369],{"class":306,"line":1107},[304,1366,1065],{"class":310},[304,1368,409],{"class":314},[304,1370,385],{"class":310},[304,1372,1374,1376,1378],{"class":306,"line":1373},21,[304,1375,397],{"class":310},[304,1377,952],{"class":314},[304,1379,385],{"class":310},[290,1381,1382,1384,1385,1387,1388,1390,1391,1393],{},[301,1383,1118],{}," hides the tooltip. If you omit ",[301,1386,1270],{},", the chart manages selection. If you supply it, including ",[301,1389,1118],{},", pointer, keyboard and sync events request a change through ",[301,1392,560],{},". The displayed selection changes only when you accept that request.",[290,1395,1396],{},"In axis mode, the Tooltip index addresses a chart data position. In item mode, it addresses the keyboard order: series in registration order, then each series' data order. Treemap uses leaves in row order, Sankey uses nodes by column and height, and Sunburst uses depth-first pre-order. These model indexes are numbers.",[290,1398,1399,1401,1402,1404,1405,1408,1409,433,1411,433,1413,433,1415,1401,1417,1419],{},[301,1400,476],{}," and ",[301,1403,488],{}," also support ",[301,1406,1407],{},"v-model:active-index",", using positions within their own series. ",[301,1410,198],{},[301,1412,183],{},[301,1414,730],{},[301,1416,733],{},[301,1418,736],{}," use their rendered item order. A controlled standalone root takes precedence over its Tooltip. A controlled chart-level Tooltip takes precedence over these series controls. Without a controlled Tooltip, each controlled series owns its active item and other series remain uncontrolled.",[290,1421,1422,1423,433,1426,433,1429,433,1432,433,1435,1437,1438,1440],{},"Multiple Tooltips share one selection and all receive change requests. The first registered Tooltip owns interaction settings (",[301,1424,1425],{},"shared",[301,1427,1428],{},"trigger",[301,1430,1431],{},"axis-id",[301,1433,1434],{},"default-index",[301,1436,1277],{},"); later Tooltips can set presentation options such as formatters, content, styles and cursors. Only one Tooltip in a chart may supply a controlled ",[301,1439,1270],{},". Conflicting bindings warn in development and the first controlled Tooltip wins.",[290,1442,1443,1444,1446],{},"An uncontrolled selection follows the same item through reorder and resize and clears when that item is removed or hidden. Controlled indexes address the current order. An invalid index shows no active target and requests ",[301,1445,1118],{}," once for each distinct invalid input or target order.",[290,1448,1449],{},"For example, control a Tracker from another part of the page:",[294,1451,1453],{"className":296,"code":1452,"language":298,"meta":299,"style":299},"\u003CTracker v-model:active-index=\"active\" :data=\"days\" \u002F>\n\n\u003Cbutton @click=\"active = null\">\nClear selection\n\u003C\u002Fbutton>\n",[301,1454,1455,1490,1494,1520,1525],{"__ignoreMap":299},[304,1456,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483,1486,1488],{"class":306,"line":307},[304,1458,311],{"class":310},[304,1460,183],{"class":314},[304,1462,1265],{"class":321},[304,1464,911],{"class":310},[304,1466,1270],{"class":321},[304,1468,325],{"class":310},[304,1470,328],{"class":310},[304,1472,1277],{"class":331},[304,1474,328],{"class":310},[304,1476,318],{"class":310},[304,1478,322],{"class":321},[304,1480,325],{"class":310},[304,1482,328],{"class":310},[304,1484,1485],{"class":331},"days",[304,1487,328],{"class":310},[304,1489,1026],{"class":310},[304,1491,1492],{"class":306,"line":388},[304,1493,871],{"emptyLinePlaceholder":870},[304,1495,1496,1498,1501,1503,1505,1507,1509,1512,1514,1516,1518],{"class":306,"line":394},[304,1497,311],{"class":310},[304,1499,1500],{"class":314},"button",[304,1502,336],{"class":310},[304,1504,339],{"class":321},[304,1506,325],{"class":310},[304,1508,328],{"class":310},[304,1510,1511],{"class":331},"active ",[304,1513,325],{"class":310},[304,1515,897],{"class":310},[304,1517,328],{"class":310},[304,1519,385],{"class":310},[304,1521,1522],{"class":306,"line":874},[304,1523,1524],{"class":331},"Clear selection\n",[304,1526,1527,1529,1531],{"class":306,"line":933},[304,1528,397],{"class":310},[304,1530,1500],{"class":314},[304,1532,385],{"class":310},[802,1534,1536],{"id":1535},"hidden-series","Hidden series",[290,1538,1539,1540,1543],{},"When ",[301,1541,1542],{},"hidden"," is bound, clicking a legend item shows or hides its series:",[294,1545,1547],{"className":296,"code":1546,"language":298,"meta":299,"style":299},"\u003Cscript setup lang=\"ts\">\nconst hidden = ref\u003Cstring[]>([])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAreaChart\n    :data=\"data\"\n    :height=\"300\"\n  >\n    \u003CArea data-key=\"desktop\" \u002F>\n    \u003CArea data-key=\"mobile\" \u002F>\n    \u003CLegend v-model:hidden=\"hidden\" \u002F>\n  \u003C\u002FAreaChart>\n\u003C\u002Ftemplate>\n",[301,1548,1549,1569,1593,1601,1605,1613,1620,1634,1648,1652,1670,1689,1711,1720],{"__ignoreMap":299},[304,1550,1551,1553,1555,1557,1559,1561,1563,1565,1567],{"class":306,"line":307},[304,1552,311],{"class":310},[304,1554,817],{"class":314},[304,1556,820],{"class":321},[304,1558,823],{"class":321},[304,1560,325],{"class":310},[304,1562,328],{"class":310},[304,1564,831],{"class":830},[304,1566,328],{"class":310},[304,1568,385],{"class":310},[304,1570,1571,1573,1576,1578,1580,1582,1585,1588,1590],{"class":306,"line":388},[304,1572,877],{"class":321},[304,1574,1575],{"class":331}," hidden ",[304,1577,325],{"class":310},[304,1579,885],{"class":371},[304,1581,311],{"class":310},[304,1583,1584],{"class":890},"string",[304,1586,1587],{"class":331},"[]",[304,1589,900],{"class":310},[304,1591,1592],{"class":331},"([])\n",[304,1594,1595,1597,1599],{"class":306,"line":394},[304,1596,397],{"class":310},[304,1598,817],{"class":314},[304,1600,385],{"class":310},[304,1602,1603],{"class":306,"line":874},[304,1604,871],{"emptyLinePlaceholder":870},[304,1606,1607,1609,1611],{"class":306,"line":933},[304,1608,311],{"class":310},[304,1610,952],{"class":314},[304,1612,385],{"class":310},[304,1614,1615,1617],{"class":306,"line":942},[304,1616,960],{"class":310},[304,1618,1619],{"class":314},"AreaChart\n",[304,1621,1622,1624,1626,1628,1630,1632],{"class":306,"line":947},[304,1623,969],{"class":310},[304,1625,322],{"class":321},[304,1627,325],{"class":310},[304,1629,328],{"class":310},[304,1631,322],{"class":331},[304,1633,980],{"class":310},[304,1635,1636,1638,1640,1642,1644,1646],{"class":306,"line":957},[304,1637,969],{"class":310},[304,1639,988],{"class":321},[304,1641,325],{"class":310},[304,1643,328],{"class":310},[304,1645,995],{"class":914},[304,1647,980],{"class":310},[304,1649,1650],{"class":306,"line":966},[304,1651,1003],{"class":310},[304,1653,1654,1656,1658,1660,1662,1664,1666,1668],{"class":306,"line":983},[304,1655,1009],{"class":310},[304,1657,482],{"class":314},[304,1659,1014],{"class":321},[304,1661,325],{"class":310},[304,1663,328],{"class":310},[304,1665,1021],{"class":830},[304,1667,328],{"class":310},[304,1669,1026],{"class":310},[304,1671,1672,1674,1676,1678,1680,1682,1685,1687],{"class":306,"line":1000},[304,1673,1009],{"class":310},[304,1675,482],{"class":314},[304,1677,1014],{"class":321},[304,1679,325],{"class":310},[304,1681,328],{"class":310},[304,1683,1684],{"class":830},"mobile",[304,1686,328],{"class":310},[304,1688,1026],{"class":310},[304,1690,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709],{"class":306,"line":1006},[304,1692,1009],{"class":310},[304,1694,223],{"class":314},[304,1696,1265],{"class":321},[304,1698,911],{"class":310},[304,1700,1542],{"class":321},[304,1702,325],{"class":310},[304,1704,328],{"class":310},[304,1706,1542],{"class":331},[304,1708,328],{"class":310},[304,1710,1026],{"class":310},[304,1712,1713,1715,1718],{"class":306,"line":1029},[304,1714,1065],{"class":310},[304,1716,1717],{"class":314},"AreaChart",[304,1719,385],{"class":310},[304,1721,1722,1724,1726],{"class":306,"line":1037},[304,1723,397],{"class":310},[304,1725,952],{"class":314},[304,1727,385],{"class":310},[290,1729,1730,1731,1733,1734,368],{},"Sunburst node indexes address the layout node list. Journey node and link indexes\naddress their respective layout lists. Click events can carry a ",[301,1732,794],{},"; hover\nevents carry a ",[301,1735,1736],{},"MouseEvent",[1738,1739,1740],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":299,"searchDepth":388,"depth":388,"links":1742},[1743,1744],{"id":287,"depth":388,"text":288},{"id":797,"depth":388,"text":797,"children":1745},[1746,1747,1748],{"id":804,"depth":394,"text":805},{"id":1122,"depth":394,"text":1123},{"id":1535,"depth":394,"text":1536},"Listen to chart interaction and control brush, tooltip and legend state","md",null,{},{"icon":86},{"title":83,"description":1749},"k9Il4-E0hXU1O016d5B8FFoM5rNBdbyMcyVhBHseSE8",[1757,1759],{"title":78,"path":79,"stem":80,"description":1758,"icon":81,"children":-1},"How charts move, how to tune the motion, and how to turn it off",{"title":88,"path":89,"stem":90,"description":1760,"icon":91,"children":-1},"Typed slots, events and row-typed data keys",1791811110849]