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