[{"data":1,"prerenderedAt":451},["ShallowReactive",2],{"navigation_docs":3,"-guides-active-state":177,"-guides-active-state-surround":446},[4,21,77,137],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","/getting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guides","i-lucide-book-open","/guides","2.guides",[27,32,37,42,47,52,57,62,67,72],{"title":28,"path":29,"stem":30,"icon":31},"Customize","/guides/customize","2.guides/01.customize","i-lucide-paintbrush",{"title":33,"path":34,"stem":35,"icon":36},"Active Index","/guides/active-state","2.guides/02.active-state","i-lucide-mouse-pointer",{"title":38,"path":39,"stem":40,"icon":41},"Domain and Ticks","/guides/domain-and-ticks","2.guides/03.domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Axis Ticks","/guides/axis-ticks","2.guides/04.axis-ticks","i-lucide-hash",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","/guides/chart-size","2.guides/05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Index and Layers","/guides/z-order-and-layers","2.guides/06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","/guides/coordinate-systems","2.guides/07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","/guides/performance","2.guides/08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","/guides/rounded-bar-corners","2.guides/09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","/guides/bar-alignment","2.guides/10.bar-alignment","i-lucide-align-center",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":20},"Charts","i-lucide-bar-chart-3","/charts","3.charts",[83,88,93,98,103,108,113,118,123,128,133],{"title":84,"path":85,"stem":86,"icon":87},"Area Chart","/charts/area-chart","3.charts/1.area-chart","i-lucide-area-chart",{"title":89,"path":90,"stem":91,"icon":92},"Treemap","/charts/treemap","3.charts/10.treemap","i-lucide-layout-grid",{"title":94,"path":95,"stem":96,"icon":97},"Sankey","/charts/sankey","3.charts/11.sankey","i-lucide-git-fork",{"title":99,"path":100,"stem":101,"icon":102},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":104,"path":105,"stem":106,"icon":107},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":109,"path":110,"stem":111,"icon":112},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":114,"path":115,"stem":116,"icon":117},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":119,"path":120,"stem":121,"icon":122},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":124,"path":125,"stem":126,"icon":127},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":129,"path":130,"stem":131,"icon":132},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":134,"path":135,"stem":136,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":20},"Components","i-lucide-code","/components","4.components",[143,148,153,158,163,167,172],{"title":144,"path":145,"stem":146,"icon":147},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":149,"path":150,"stem":151,"icon":152},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":154,"path":155,"stem":156,"icon":157},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":159,"path":160,"stem":161,"icon":162},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":164,"path":165,"stem":166,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":168,"path":169,"stem":170,"icon":171},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":173,"path":174,"stem":175,"icon":176},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":178,"title":33,"body":179,"description":439,"extension":440,"links":441,"meta":442,"navigation":443,"path":34,"seo":444,"stem":35,"__hash__":445},"docs/2.guides/02.active-state.md",{"type":180,"value":181,"toc":432},"minimark",[182,191,196,202,208,215,219,226,231,234,238,247,303,307,323,390,394,401,428],[183,184,185,186,190],"p",{},"The active index determines which data point the tooltip highlights. vccs manages this internally — you control it through the ",[187,188,189],"code",{},"\u003CTooltip>"," component's props.",[192,193,195],"h2",{"id":194},"default-index","Default index",[183,197,198,199,201],{},"Show a tooltip on initial render by setting ",[187,200,194],{},":",[203,204],"chart-demo",{"description":205,"name":206,"src":207},"Bar chart with tooltip pre-selected at index 2 on initial render.","Default Index","guide-charts/default-index-chart",[183,209,210,211,214],{},"The tooltip will appear at index ",[187,212,213],{},"2"," when the chart first renders. Users can still hover to change the active index.",[192,216,218],{"id":217},"click-based-activation","Click-based activation",[183,220,221,222,225],{},"Use ",[187,223,224],{},"trigger=\"click\""," so the tooltip only appears when the user clicks:",[203,227],{"description":228,"name":229,"src":230},"Bar chart where tooltip activates on click. Click any bar to see.","Click Tooltip","guide-charts/click-tooltip-chart",[183,232,233],{},"The tooltip stays visible until the user clicks elsewhere.",[192,235,237],{"id":236},"controlled-tooltip","Controlled tooltip",[183,239,240,241,244,245,201],{},"Force the tooltip to always show by combining ",[187,242,243],{},"active"," with ",[187,246,194],{},[248,249,254],"pre",{"className":250,"code":251,"language":252,"meta":253,"style":253},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CTooltip :active=\"true\" :default-index=\"3\" />\n","vue","",[187,255,256],{"__ignoreMap":253},[257,258,261,265,268,271,274,277,280,284,286,288,290,292,294,298,300],"span",{"class":259,"line":260},"line",1,[257,262,264],{"class":263},"sMK4o","\u003C",[257,266,144],{"class":267},"swJcz",[257,269,270],{"class":263}," :",[257,272,243],{"class":273},"spNyl",[257,275,276],{"class":263},"=",[257,278,279],{"class":263},"\"",[257,281,283],{"class":282},"sfNiH","true",[257,285,279],{"class":263},[257,287,270],{"class":263},[257,289,194],{"class":273},[257,291,276],{"class":263},[257,293,279],{"class":263},[257,295,297],{"class":296},"sbssI","3",[257,299,279],{"class":263},[257,301,302],{"class":263}," />\n",[192,304,306],{"id":305},"shared-vs-item-tooltips","Shared vs item tooltips",[183,308,309,310,314,315,318,319,322],{},"By default, tooltips show data from ",[311,312,313],"strong",{},"all series"," at the hovered index (",[187,316,317],{},"shared"," mode). Set ",[187,320,321],{},":shared=\"false\""," to only show data from the nearest series:",[248,324,326],{"className":250,"code":325,"language":252,"meta":253,"style":253},"\u003C!-- Show all series at index (default) -->\n\u003CTooltip :shared=\"true\" />\n\n\u003C!-- Show only the hovered series -->\n\u003CTooltip :shared=\"false\" />\n",[187,327,328,334,355,362,368],{"__ignoreMap":253},[257,329,330],{"class":259,"line":260},[257,331,333],{"class":332},"sHwdD","\u003C!-- Show all series at index (default) -->\n",[257,335,337,339,341,343,345,347,349,351,353],{"class":259,"line":336},2,[257,338,264],{"class":263},[257,340,144],{"class":267},[257,342,270],{"class":263},[257,344,317],{"class":273},[257,346,276],{"class":263},[257,348,279],{"class":263},[257,350,283],{"class":282},[257,352,279],{"class":263},[257,354,302],{"class":263},[257,356,358],{"class":259,"line":357},3,[257,359,361],{"emptyLinePlaceholder":360},true,"\n",[257,363,365],{"class":259,"line":364},4,[257,366,367],{"class":332},"\u003C!-- Show only the hovered series -->\n",[257,369,371,373,375,377,379,381,383,386,388],{"class":259,"line":370},5,[257,372,264],{"class":263},[257,374,144],{"class":267},[257,376,270],{"class":263},[257,378,317],{"class":273},[257,380,276],{"class":263},[257,382,279],{"class":263},[257,384,385],{"class":282},"false",[257,387,279],{"class":263},[257,389,302],{"class":263},[192,391,393],{"id":392},"tooltip-event-types","Tooltip event types",[183,395,396,397,400],{},"Charts have a ",[187,398,399],{},"tooltip-event-type"," that determines how the tooltip activates:",[402,403,404,411],"ul",{},[405,406,407,410],"li",{},[187,408,409],{},"'axis'"," (default for most charts): Activates when hovering anywhere along the axis, showing all items at that index",[405,412,413,416,417,420,421,420,424,427],{},[187,414,415],{},"'item'"," (default for ",[187,418,419],{},"ScatterChart",", ",[187,422,423],{},"PieChart",[187,425,426],{},"FunnelChart","): Activates when hovering directly over an item",[429,430,431],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":253,"searchDepth":336,"depth":336,"links":433},[434,435,436,437,438],{"id":194,"depth":336,"text":195},{"id":217,"depth":336,"text":218},{"id":236,"depth":336,"text":237},{"id":305,"depth":336,"text":306},{"id":392,"depth":336,"text":393},"Control which data point is highlighted in the tooltip","md",null,{},{"icon":36},{"title":33,"description":439},"pfK0-En3C3oaGXiKu5qX6f5-UT1sCJPz3t97iTMuYws",[447,449],{"title":28,"path":29,"stem":30,"description":448,"icon":31,"children":-1},"Learn how to customize chart appearance using slots, Cell, and SVG attributes",{"title":38,"path":39,"stem":40,"description":450,"icon":41,"children":-1},"Configure axis range, data domain, and tick formatting",1775929453605]