[{"data":1,"prerenderedAt":1711},["ShallowReactive",2],{"navigation_docs":3,"-components-tooltip":284,"-components-tooltip-surround":1706},[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":223,"body":286,"description":1699,"extension":1700,"links":1701,"meta":1702,"navigation":1703,"path":224,"seo":1704,"stem":225,"__hash__":1705},"docs\u002F4.components\u002F01.tooltip.md",{"type":287,"value":288,"toc":1687},"minimark",[289,298,303,309,403,407,414,481,485,492,498,525,529,536,541,567,571,588,627,639,643,646,663,677,702,706,732,736,1239,1243,1261,1420,1442,1446,1505,1675,1684],[290,291,292,293,297],"p",{},"The ",[294,295,296],"code",{},"\u003CTooltip>"," component displays data values when users hover over chart elements.",[299,300,302],"h2",{"id":301},"add-a-tooltip","Add a tooltip",[290,304,305,306,308],{},"Place ",[294,307,296],{}," inside any chart container:",[310,311,316],"pre",{"className":312,"code":313,"language":314,"meta":315,"style":315},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBarChart :width=\"500\" :height=\"300\" :data=\"data\">\n  \u003CBar data-key=\"value\" fill=\"#8884d8\" \u002F>\n  \u003CTooltip \u002F>\n\u003C\u002FBarChart>\n","vue","",[294,317,318,381,387,393],{"__ignoreMap":315},[319,320,323,327,331,334,338,341,344,348,350,352,355,357,359,362,364,366,369,371,373,376,378],"span",{"class":321,"line":322},"line",1,[319,324,326],{"class":325},"sMK4o","\u003C",[319,328,330],{"class":329},"swJcz","BarChart",[319,332,333],{"class":325}," :",[319,335,337],{"class":336},"spNyl","width",[319,339,340],{"class":325},"=",[319,342,343],{"class":325},"\"",[319,345,347],{"class":346},"sbssI","500",[319,349,343],{"class":325},[319,351,333],{"class":325},[319,353,354],{"class":336},"height",[319,356,340],{"class":325},[319,358,343],{"class":325},[319,360,361],{"class":346},"300",[319,363,343],{"class":325},[319,365,333],{"class":325},[319,367,368],{"class":336},"data",[319,370,340],{"class":325},[319,372,343],{"class":325},[319,374,368],{"class":375},"sTEyZ",[319,377,343],{"class":325},[319,379,380],{"class":325},">\n",[319,382,384],{"class":321,"line":383},2,[319,385,386],{"class":375},"  \u003CBar data-key=\"value\" fill=\"#8884d8\" \u002F>\n",[319,388,390],{"class":321,"line":389},3,[319,391,392],{"class":375},"  \u003CTooltip \u002F>\n",[319,394,396,399,401],{"class":321,"line":395},4,[319,397,398],{"class":325},"\u003C\u002F",[319,400,330],{"class":329},[319,402,380],{"class":325},[299,404,406],{"id":405},"customize-tooltip-content","Customize tooltip content",[290,408,409,410,413],{},"Use the ",[294,411,412],{},"#content"," slot for full control:",[310,415,417],{"className":312,"code":416,"language":314,"meta":315,"style":315},"\u003CTooltip>\n  \u003Ctemplate #content=\"{ active, payload, label }\">\n    \u003Cdiv v-if=\"active && payload?.length\" class=\"bg-background border rounded p-2 shadow\">\n      \u003Cp class=\"font-medium\">{{ label }}\u003C\u002Fp>\n      \u003Cp v-for=\"entry in payload\" :key=\"entry.dataKey\" :style=\"{ color: entry.color }\">\n        {{ entry.name }}: {{ entry.value }}\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002FTooltip>\n",[294,418,419,427,432,437,442,448,454,460,466,472],{"__ignoreMap":315},[319,420,421,423,425],{"class":321,"line":322},[319,422,326],{"class":325},[319,424,223],{"class":329},[319,426,380],{"class":325},[319,428,429],{"class":321,"line":383},[319,430,431],{"class":375},"  \u003Ctemplate #content=\"{ active, payload, label }\">\n",[319,433,434],{"class":321,"line":389},[319,435,436],{"class":375},"    \u003Cdiv v-if=\"active && payload?.length\" class=\"bg-background border rounded p-2 shadow\">\n",[319,438,439],{"class":321,"line":395},[319,440,441],{"class":375},"      \u003Cp class=\"font-medium\">{{ label }}\u003C\u002Fp>\n",[319,443,445],{"class":321,"line":444},5,[319,446,447],{"class":375},"      \u003Cp v-for=\"entry in payload\" :key=\"entry.dataKey\" :style=\"{ color: entry.color }\">\n",[319,449,451],{"class":321,"line":450},6,[319,452,453],{"class":375},"        {{ entry.name }}: {{ entry.value }}\n",[319,455,457],{"class":321,"line":456},7,[319,458,459],{"class":375},"      \u003C\u002Fp>\n",[319,461,463],{"class":321,"line":462},8,[319,464,465],{"class":375},"    \u003C\u002Fdiv>\n",[319,467,469],{"class":321,"line":468},9,[319,470,471],{"class":375},"  \u003C\u002Ftemplate>\n",[319,473,475,477,479],{"class":321,"line":474},10,[319,476,398],{"class":325},[319,478,223],{"class":329},[319,480,380],{"class":325},[299,482,484],{"id":483},"pre-select-a-tooltip-index","Pre-select a tooltip index",[290,486,487,488,491],{},"Use ",[294,489,490],{},"default-index"," to show the tooltip at a data index on the first render. Users can still\nhover to move it.",[493,494],"chart-demo",{"description":495,"name":496,"src":497},"Bar chart with the tooltip at index 2 on the first render.","Default Index","guide-charts\u002Fdefault-index-chart",[310,499,501],{"className":312,"code":500,"language":314,"meta":315,"style":315},"\u003CTooltip :default-index=\"2\" \u002F>\n",[294,502,503],{"__ignoreMap":315},[319,504,505,507,509,511,513,515,517,520,522],{"class":321,"line":322},[319,506,326],{"class":325},[319,508,223],{"class":329},[319,510,333],{"class":325},[319,512,490],{"class":336},[319,514,340],{"class":325},[319,516,343],{"class":325},[319,518,519],{"class":346},"2",[319,521,343],{"class":325},[319,523,524],{"class":325}," \u002F>\n",[299,526,528],{"id":527},"activate-on-click","Activate on click",[290,530,531,532,535],{},"With ",[294,533,534],{},"trigger=\"click\"",", the tooltip appears when the user clicks, and stays until the user\nclicks elsewhere.",[493,537],{"description":538,"name":539,"src":540},"Bar chart where the tooltip opens on click.","Click Tooltip","guide-charts\u002Fclick-tooltip-chart",[310,542,544],{"className":312,"code":543,"language":314,"meta":315,"style":315},"\u003CTooltip trigger=\"click\" \u002F>\n",[294,545,546],{"__ignoreMap":315},[319,547,548,550,552,555,557,559,563,565],{"class":321,"line":322},[319,549,326],{"class":325},[319,551,223],{"class":329},[319,553,554],{"class":336}," trigger",[319,556,340],{"class":325},[319,558,343],{"class":325},[319,560,562],{"class":561},"sfazB","click",[319,564,343],{"class":325},[319,566,524],{"class":325},[299,568,570],{"id":569},"keep-the-tooltip-open","Keep the tooltip open",[290,572,573,576,577,580,581,584,585,587],{},[294,574,575],{},"active"," overrides the chart: ",[294,578,579],{},"true"," keeps the tooltip visible, ",[294,582,583],{},"false"," hides it. Combine it\nwith ",[294,586,490],{}," to pin the tooltip to one point:",[310,589,591],{"className":312,"code":590,"language":314,"meta":315,"style":315},"\u003CTooltip :active=\"true\" :default-index=\"3\" \u002F>\n",[294,592,593],{"__ignoreMap":315},[319,594,595,597,599,601,603,605,607,610,612,614,616,618,620,623,625],{"class":321,"line":322},[319,596,326],{"class":325},[319,598,223],{"class":329},[319,600,333],{"class":325},[319,602,575],{"class":336},[319,604,340],{"class":325},[319,606,343],{"class":325},[319,608,579],{"class":609},"sfNiH",[319,611,343],{"class":325},[319,613,333],{"class":325},[319,615,490],{"class":336},[319,617,340],{"class":325},[319,619,343],{"class":325},[319,621,622],{"class":346},"3",[319,624,343],{"class":325},[319,626,524],{"class":325},[290,628,629,630,633,634,638],{},"To control the active point from outside the chart, bind ",[294,631,632],{},"v-model:active-index",". See\n",[635,636,88],"a",{"href":637},"\u002Fguides\u002Fevents-and-models#active-element",".",[299,640,642],{"id":641},"shared-and-item-tooltips","Shared and item tooltips",[290,644,645],{},"Each chart type activates the tooltip in one of two ways:",[647,648,649,657],"ul",{},[650,651,652,656],"li",{},[653,654,655],"strong",{},"Axis:"," the tooltip follows the category axis and shows every series at that index.\nThis is the default for AreaChart, BarChart, LineChart, ComposedChart, RadarChart and\nRadialBarChart.",[650,658,659,662],{},[653,660,661],{},"Item:"," the tooltip opens on the hovered item and shows only that item. This is the\ndefault for ScatterChart, PieChart, FunnelChart and the standalone charts.",[290,664,665,668,669,672,673,676],{},[294,666,667],{},"shared"," switches between the two where the chart supports both: ",[294,670,671],{},":shared=\"false\""," gives item\ntooltips in a BarChart, LineChart or RadialBarChart, and ",[294,674,675],{},":shared=\"true\""," gives axis tooltips\nin a ScatterChart. AreaChart, ComposedChart and RadarChart always use axis tooltips; PieChart\nand FunnelChart always use item tooltips.",[310,678,680],{"className":312,"code":679,"language":314,"meta":315,"style":315},"\u003CTooltip :shared=\"false\" \u002F>\n",[294,681,682],{"__ignoreMap":315},[319,683,684,686,688,690,692,694,696,698,700],{"class":321,"line":322},[319,685,326],{"class":325},[319,687,223],{"class":329},[319,689,333],{"class":325},[319,691,667],{"class":336},[319,693,340],{"class":325},[319,695,343],{"class":325},[319,697,583],{"class":609},[319,699,343],{"class":325},[319,701,524],{"class":325},[299,703,705],{"id":704},"disable-the-cursor","Disable the cursor",[310,707,709],{"className":312,"code":708,"language":314,"meta":315,"style":315},"\u003CTooltip :cursor=\"false\" \u002F>\n",[294,710,711],{"__ignoreMap":315},[319,712,713,715,717,719,722,724,726,728,730],{"class":321,"line":322},[319,714,326],{"class":325},[319,716,223],{"class":329},[319,718,333],{"class":325},[319,720,721],{"class":336},"cursor",[319,723,340],{"class":325},[319,725,343],{"class":325},[319,727,583],{"class":609},[319,729,343],{"class":325},[319,731,524],{"class":325},[299,733,735],{"id":734},"tooltip-props","Tooltip props",[737,738,739,758],"table",{},[740,741,742],"thead",{},[743,744,745,749,752,755],"tr",{},[746,747,748],"th",{},"Prop",[746,750,751],{},"Type",[746,753,754],{},"Default",[746,756,757],{},"Description",[759,760,761,790,812,828,848,871,889,908,926,947,964,981,1001,1019,1039,1056,1074,1091,1108,1128,1148,1166,1184,1201,1221],"tbody",{},[743,762,763,768,773,778],{},[764,765,766],"td",{},[294,767,575],{},[764,769,770],{},[294,771,772],{},"boolean",[764,774,775],{},[294,776,777],{},"undefined",[764,779,780,781,783,784,786,787,789],{},"Force active state. ",[294,782,579],{}," keeps tooltip visible, ",[294,785,583],{}," hides it, ",[294,788,777],{}," lets the chart control visibility.",[743,791,792,797,802,805],{},[764,793,794],{},[294,795,796],{},"active-index",[764,798,799],{},[294,800,801],{},"number | null",[764,803,804],{},"—",[764,806,807,808,811],{},"Current model index; ",[294,809,810],{},"null"," selects no target",[743,813,814,818,823,825],{},[764,815,816],{},[294,817,490],{},[764,819,820],{},[294,821,822],{},"number",[764,824,804],{},[764,826,827],{},"Pre-selected data index shown on initial render",[743,829,830,835,840,845],{},[764,831,832],{},[294,833,834],{},"trigger",[764,836,837],{},[294,838,839],{},"'hover' | 'click'",[764,841,842],{},[294,843,844],{},"'hover'",[764,846,847],{},"Activation trigger",[743,849,850,854,858,862],{},[764,851,852],{},[294,853,667],{},[764,855,856],{},[294,857,772],{},[764,859,860],{},[294,861,777],{},[764,863,864,865,867,868,870],{},"Show all series at hovered index. When ",[294,866,777],{},", defaults to ",[294,869,579],{}," for axis-type charts.",[743,872,873,877,882,886],{},[764,874,875],{},[294,876,721],{},[764,878,879],{},[294,880,881],{},"boolean | object",[764,883,884],{},[294,885,579],{},[764,887,888],{},"Show\u002Fcustomize cursor. Pass an object to set SVG attrs on the cursor element.",[743,890,891,896,900,905],{},[764,892,893],{},[294,894,895],{},"offset",[764,897,898],{},[294,899,822],{},[764,901,902],{},[294,903,904],{},"10",[764,906,907],{},"Pixel offset from cursor",[743,909,910,915,919,923],{},[764,911,912],{},[294,913,914],{},"include-hidden",[764,916,917],{},[294,918,772],{},[764,920,921],{},[294,922,583],{},[764,924,925],{},"Show hidden series data",[743,927,928,933,937,941],{},[764,929,930],{},[294,931,932],{},"filter-null",[764,934,935],{},[294,936,772],{},[764,938,939],{},[294,940,579],{},[764,942,943,944,946],{},"Filter out entries with ",[294,945,810],{}," values",[743,948,949,954,959,961],{},[764,950,951],{},[294,952,953],{},"formatter",[764,955,956],{},[294,957,958],{},"(value, name, entry, index, payload) => VNodeChild | [value, name]",[764,960,804],{},[764,962,963],{},"Format each row of the default content. Return a pair to change the name too. It wins over a chart's own formatter",[743,965,966,971,976,978],{},[764,967,968],{},[294,969,970],{},"label-formatter",[764,972,973],{},[294,974,975],{},"(label, payload) => VNodeChild",[764,977,804],{},[764,979,980],{},"Format the label in the default content",[743,982,983,988,993,998],{},[764,984,985],{},[294,986,987],{},"transition",[764,989,990],{},[294,991,992],{},"ChartTransition",[764,994,995],{},[635,996,997],{"href":84},"motion tokens",[764,999,1000],{},"Timing and easing for tooltip motion",[743,1002,1003,1008,1012,1016],{},[764,1004,1005],{},[294,1006,1007],{},"is-animation-active",[764,1009,1010],{},[294,1011,772],{},[764,1013,1014],{},[294,1015,579],{},[764,1017,1018],{},"Animate tooltip position changes",[743,1020,1021,1026,1031,1036],{},[764,1022,1023],{},[294,1024,1025],{},"allow-escape-view-box",[764,1027,1028],{},[294,1029,1030],{},"{ x: boolean, y: boolean }",[764,1032,1033],{},[294,1034,1035],{},"{ x: false, y: false }",[764,1037,1038],{},"Allow tooltip to overflow the chart area",[743,1040,1041,1046,1051,1053],{},[764,1042,1043],{},[294,1044,1045],{},"position",[764,1047,1048],{},[294,1049,1050],{},"{ x?: number, y?: number }",[764,1052,804],{},[764,1054,1055],{},"Pin tooltip to a fixed position",[743,1057,1058,1063,1067,1071],{},[764,1059,1060],{},[294,1061,1062],{},"reverse-direction",[764,1064,1065],{},[294,1066,1030],{},[764,1068,1069],{},[294,1070,1035],{},[764,1072,1073],{},"Flip tooltip placement direction",[743,1075,1076,1081,1086,1088],{},[764,1077,1078],{},[294,1079,1080],{},"to",[764,1082,1083],{},[294,1084,1085],{},"string | HTMLElement",[764,1087,804],{},[764,1089,1090],{},"Teleport tooltip to a CSS selector or DOM element",[743,1092,1093,1098,1103,1105],{},[764,1094,1095],{},[294,1096,1097],{},"payload-uniq-by",[764,1099,1100],{},[294,1101,1102],{},"boolean | Function",[764,1104,804],{},[764,1106,1107],{},"Deduplicate payload entries",[743,1109,1110,1115,1120,1125],{},[764,1111,1112],{},[294,1113,1114],{},"axis-id",[764,1116,1117],{},[294,1118,1119],{},"string | number",[764,1121,1122],{},[294,1123,1124],{},"0",[764,1126,1127],{},"Target axis ID for tooltip interaction",[743,1129,1130,1135,1140,1145],{},[764,1131,1132],{},[294,1133,1134],{},"content-style",[764,1136,1137],{},[294,1138,1139],{},"object",[764,1141,1142],{},[294,1143,1144],{},"{}",[764,1146,1147],{},"Inline styles for tooltip content wrapper",[743,1149,1150,1155,1159,1163],{},[764,1151,1152],{},[294,1153,1154],{},"label-style",[764,1156,1157],{},[294,1158,1139],{},[764,1160,1161],{},[294,1162,1144],{},[764,1164,1165],{},"Inline styles for the label",[743,1167,1168,1173,1177,1181],{},[764,1169,1170],{},[294,1171,1172],{},"item-style",[764,1174,1175],{},[294,1176,1139],{},[764,1178,1179],{},[294,1180,1144],{},[764,1182,1183],{},"Inline styles for each payload item",[743,1185,1186,1191,1196,1198],{},[764,1187,1188],{},[294,1189,1190],{},"item-sorter",[764,1192,1193],{},[294,1194,1195],{},"'name' | 'value' | 'dataKey' | Function",[764,1197,804],{},[764,1199,1200],{},"Sort payload items. Without it, items keep the series order",[743,1202,1203,1208,1213,1218],{},[764,1204,1205],{},[294,1206,1207],{},"separator",[764,1209,1210],{},[294,1211,1212],{},"string",[764,1214,1215],{},[294,1216,1217],{},"' : '",[764,1219,1220],{},"Separator between name and value in default content",[743,1222,1223,1228,1232,1236],{},[764,1224,1225],{},[294,1226,1227],{},"style",[764,1229,1230],{},[294,1231,1139],{},[764,1233,1234],{},[294,1235,1144],{},[764,1237,1238],{},"Inline styles for the tooltip bounding box",[299,1240,1242],{"id":1241},"payload","Payload",[290,1244,292,1245,1247,1248,1250,1251,1253,1254,1256,1257,1260],{},[294,1246,412],{}," slot, the ",[294,1249,953],{}," and ",[294,1252,970],{}," receive ",[294,1255,1241],{},": one\n",[294,1258,1259],{},"TooltipPayloadEntry"," per row, in series order.",[737,1262,1263,1274],{},[740,1264,1265],{},[743,1266,1267,1270,1272],{},[746,1268,1269],{},"Field",[746,1271,751],{},[746,1273,757],{},[759,1275,1276,1293,1309,1324,1338,1351,1372,1387,1404],{},[743,1277,1278,1283,1287],{},[764,1279,1280],{},[294,1281,1282],{},"name",[764,1284,1285],{},[294,1286,1119],{},[764,1288,1289,1290,1292],{},"Series ",[294,1291,1282],{},", or the data key. On a Scatter or Funnel row, the row's own label, such as the axis name",[743,1294,1295,1300,1304],{},[764,1296,1297],{},[294,1298,1299],{},"seriesName",[764,1301,1302],{},[294,1303,1119],{},[764,1305,1289,1306,1308],{},[294,1307,1282],{}," on Scatter and Funnel rows, if the series has one",[743,1310,1311,1316,1321],{},[764,1312,1313],{},[294,1314,1315],{},"value",[764,1317,1318],{},[294,1319,1320],{},"number | string | Array",[764,1322,1323],{},"Raw value of the row; an array for ranged data",[743,1325,1326,1330,1335],{},[764,1327,1328],{},[294,1329,1241],{},[764,1331,1332],{},[294,1333,1334],{},"unknown",[764,1336,1337],{},"The data row (or node, link or cell) behind the entry",[743,1339,1340,1345,1348],{},[764,1341,1342],{},[294,1343,1344],{},"dataKey",[764,1346,1347],{},"row path or accessor",[764,1349,1350],{},"The series data key",[743,1352,1353,1365,1369],{},[764,1354,1355,1358,1359,1358,1362],{},[294,1356,1357],{},"color",", ",[294,1360,1361],{},"fill",[294,1363,1364],{},"stroke",[764,1366,1367],{},[294,1368,1212],{},[764,1370,1371],{},"Colors of the series or entry, for swatches",[743,1373,1374,1379,1383],{},[764,1375,1376],{},[294,1377,1378],{},"unit",[764,1380,1381],{},[294,1382,1119],{},[764,1384,1289,1385],{},[294,1386,1378],{},[743,1388,1389,1394,1398],{},[764,1390,1391],{},[294,1392,1393],{},"chartType",[764,1395,1396],{},[294,1397,1212],{},[764,1399,1400,1401],{},"Series type, for example ",[294,1402,1403],{},"'line'",[743,1405,1406,1411,1415],{},[764,1407,1408],{},[294,1409,1410],{},"hide",[764,1412,1413],{},[294,1414,772],{},[764,1416,1417,1418],{},"Whether the series is hidden; hidden rows show only with ",[294,1419,914],{},[290,1421,1422,1423,1425,1426,1428,1429,1431,1432,1250,1434,1437,1438,1441],{},"All charts use this shape, including the standalone charts: ",[294,1424,1241],{}," is the domain object\n(your Treemap or Sankey node, a Heatmap cell, a Tracker row, …) and ",[294,1427,1315],{}," is the raw number.\nThe default content shows readable text; a ",[294,1430,953],{}," receives the raw value. Import\n",[294,1433,1259],{},[294,1435,1436],{},"TooltipPayload"," from ",[294,1439,1440],{},"vccs"," to type your own content.",[299,1443,1445],{"id":1444},"tooltip-slots","Tooltip slots",[737,1447,1448,1460],{},[740,1449,1450],{},[743,1451,1452,1455,1458],{},[746,1453,1454],{},"Slot",[746,1456,1457],{},"Props",[746,1459,757],{},[759,1461,1462,1476],{},[743,1463,1464,1468,1473],{},[764,1465,1466],{},[294,1467,412],{},[764,1469,1470],{},[294,1471,1472],{},"{ active, payload, label, coordinate, accessibilityLayer }",[764,1474,1475],{},"Full tooltip content",[743,1477,1478,1483,1486],{},[764,1479,1480],{},[294,1481,1482],{},"#cursor",[764,1484,1485],{},"Shape-specific SVG props",[764,1487,1488,1489,1492,1493,1496,1497,1500,1501,1504],{},"Custom cursor element. Receives ",[294,1490,1491],{},"Cross"," props for ScatterChart, ",[294,1494,1495],{},"Rectangle"," props for BarChart, ",[294,1498,1499],{},"Sector"," props for radial charts, ",[294,1502,1503],{},"Curve"," props for others.",[310,1506,1508],{"className":312,"code":1507,"language":314,"meta":315,"style":315},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Tooltip } from 'vccs'\n\nconst activePoint = ref\u003Cnumber | null>(null)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTooltip v-model:active-index=\"activePoint\" \u002F>\n\u003C\u002Ftemplate>\n",[294,1509,1510,1534,1560,1579,1585,1620,1628,1632,1641,1667],{"__ignoreMap":315},[319,1511,1512,1514,1517,1520,1523,1525,1527,1530,1532],{"class":321,"line":322},[319,1513,326],{"class":325},[319,1515,1516],{"class":329},"script",[319,1518,1519],{"class":336}," setup",[319,1521,1522],{"class":336}," lang",[319,1524,340],{"class":325},[319,1526,343],{"class":325},[319,1528,1529],{"class":561},"ts",[319,1531,343],{"class":325},[319,1533,380],{"class":325},[319,1535,1536,1540,1543,1546,1549,1552,1555,1557],{"class":321,"line":383},[319,1537,1539],{"class":1538},"s7zQu","import",[319,1541,1542],{"class":325}," {",[319,1544,1545],{"class":375}," ref",[319,1547,1548],{"class":325}," }",[319,1550,1551],{"class":1538}," from",[319,1553,1554],{"class":325}," '",[319,1556,314],{"class":561},[319,1558,1559],{"class":325},"'\n",[319,1561,1562,1564,1566,1569,1571,1573,1575,1577],{"class":321,"line":389},[319,1563,1539],{"class":1538},[319,1565,1542],{"class":325},[319,1567,1568],{"class":375}," Tooltip",[319,1570,1548],{"class":325},[319,1572,1551],{"class":1538},[319,1574,1554],{"class":325},[319,1576,1440],{"class":561},[319,1578,1559],{"class":325},[319,1580,1581],{"class":321,"line":395},[319,1582,1584],{"emptyLinePlaceholder":1583},true,"\n",[319,1586,1587,1590,1593,1595,1598,1600,1603,1606,1609,1612,1615,1617],{"class":321,"line":444},[319,1588,1589],{"class":336},"const",[319,1591,1592],{"class":375}," activePoint ",[319,1594,340],{"class":325},[319,1596,1545],{"class":1597},"s2Zo4",[319,1599,326],{"class":325},[319,1601,822],{"class":1602},"sBMFI",[319,1604,1605],{"class":325}," |",[319,1607,1608],{"class":1602}," null",[319,1610,1611],{"class":325},">",[319,1613,1614],{"class":375},"(",[319,1616,810],{"class":325},[319,1618,1619],{"class":375},")\n",[319,1621,1622,1624,1626],{"class":321,"line":450},[319,1623,398],{"class":325},[319,1625,1516],{"class":329},[319,1627,380],{"class":325},[319,1629,1630],{"class":321,"line":456},[319,1631,1584],{"emptyLinePlaceholder":1583},[319,1633,1634,1636,1639],{"class":321,"line":462},[319,1635,326],{"class":325},[319,1637,1638],{"class":329},"template",[319,1640,380],{"class":325},[319,1642,1643,1646,1648,1651,1654,1656,1658,1660,1663,1665],{"class":321,"line":468},[319,1644,1645],{"class":325},"  \u003C",[319,1647,223],{"class":329},[319,1649,1650],{"class":336}," v-model",[319,1652,1653],{"class":325},":",[319,1655,796],{"class":336},[319,1657,340],{"class":325},[319,1659,343],{"class":325},[319,1661,1662],{"class":375},"activePoint",[319,1664,343],{"class":325},[319,1666,524],{"class":325},[319,1668,1669,1671,1673],{"class":321,"line":474},[319,1670,398],{"class":325},[319,1672,1638],{"class":329},[319,1674,380],{"class":325},[290,1676,1677,1678,1680,1681,1683],{},"Multiple Tooltip components share selection. The first owns interaction settings; each can customize its presentation. Only one may bind ",[294,1679,796],{},"; conflicting bindings warn in development and the first controls selection. See ",[635,1682,88],{"href":89}," for index order and control precedence.",[1227,1685,1686],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":315,"searchDepth":383,"depth":383,"links":1688},[1689,1690,1691,1692,1693,1694,1695,1696,1697,1698],{"id":301,"depth":383,"text":302},{"id":405,"depth":383,"text":406},{"id":483,"depth":383,"text":484},{"id":527,"depth":383,"text":528},{"id":569,"depth":383,"text":570},{"id":641,"depth":383,"text":642},{"id":704,"depth":383,"text":705},{"id":734,"depth":383,"text":735},{"id":1241,"depth":383,"text":1242},{"id":1444,"depth":383,"text":1445},"Configure tooltips for displaying data on hover","md",null,{},{"icon":226},{"title":223,"description":1699},"_mwcYVzIOIeZQY6s8IekqQj3FKHfyJhBX0SRadcKwLg",[1707,1709],{"title":212,"path":213,"stem":214,"description":1708,"icon":215,"children":-1},"User journeys as columns of steps, with path highlighting and drop-off",{"title":228,"path":229,"stem":230,"description":1710,"icon":231,"children":-1},"Add legends to identify chart series",1793527170017]