[{"data":1,"prerenderedAt":1012},["ShallowReactive",2],{"navigation_docs":3,"-components-tooltip":177,"-components-tooltip-surround":1007},[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":144,"body":179,"description":1000,"extension":1001,"links":1002,"meta":1003,"navigation":1004,"path":145,"seo":1005,"stem":146,"__hash__":1006},"docs/4.components/1.tooltip.md",{"type":180,"value":181,"toc":991},"minimark",[182,191,196,202,296,300,307,374,378,385,412,416,442,446,474,478,925,929,988],[183,184,185,186,190],"p",{},"The ",[187,188,189],"code",{},"\u003CTooltip>"," component displays data values when users hover over chart elements.",[192,193,195],"h2",{"id":194},"add-a-tooltip","Add a tooltip",[183,197,198,199,201],{},"Place ",[187,200,189],{}," inside any chart container:",[203,204,209],"pre",{"className":205,"code":206,"language":207,"meta":208,"style":208},"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\" />\n  \u003CTooltip />\n\u003C/BarChart>\n","vue","",[187,210,211,274,280,286],{"__ignoreMap":208},[212,213,216,220,224,227,231,234,237,241,243,245,248,250,252,255,257,259,262,264,266,269,271],"span",{"class":214,"line":215},"line",1,[212,217,219],{"class":218},"sMK4o","\u003C",[212,221,223],{"class":222},"swJcz","BarChart",[212,225,226],{"class":218}," :",[212,228,230],{"class":229},"spNyl","width",[212,232,233],{"class":218},"=",[212,235,236],{"class":218},"\"",[212,238,240],{"class":239},"sbssI","500",[212,242,236],{"class":218},[212,244,226],{"class":218},[212,246,247],{"class":229},"height",[212,249,233],{"class":218},[212,251,236],{"class":218},[212,253,254],{"class":239},"300",[212,256,236],{"class":218},[212,258,226],{"class":218},[212,260,261],{"class":229},"data",[212,263,233],{"class":218},[212,265,236],{"class":218},[212,267,261],{"class":268},"sTEyZ",[212,270,236],{"class":218},[212,272,273],{"class":218},">\n",[212,275,277],{"class":214,"line":276},2,[212,278,279],{"class":268},"  \u003CBar data-key=\"value\" fill=\"#8884d8\" />\n",[212,281,283],{"class":214,"line":282},3,[212,284,285],{"class":268},"  \u003CTooltip />\n",[212,287,289,292,294],{"class":214,"line":288},4,[212,290,291],{"class":218},"\u003C/",[212,293,223],{"class":222},[212,295,273],{"class":218},[192,297,299],{"id":298},"customize-tooltip-content","Customize tooltip content",[183,301,302,303,306],{},"Use the ",[187,304,305],{},"#content"," slot for full control:",[203,308,310],{"className":205,"code":309,"language":207,"meta":208,"style":208},"\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/p>\n      \u003Cp v-for=\"entry in payload\" :key=\"entry.dataKey\" :style=\"{ color: entry.color }\">\n        {{ entry.name }}: {{ entry.value }}\n      \u003C/p>\n    \u003C/div>\n  \u003C/template>\n\u003C/Tooltip>\n",[187,311,312,320,325,330,335,341,347,353,359,365],{"__ignoreMap":208},[212,313,314,316,318],{"class":214,"line":215},[212,315,219],{"class":218},[212,317,144],{"class":222},[212,319,273],{"class":218},[212,321,322],{"class":214,"line":276},[212,323,324],{"class":268},"  \u003Ctemplate #content=\"{ active, payload, label }\">\n",[212,326,327],{"class":214,"line":282},[212,328,329],{"class":268},"    \u003Cdiv v-if=\"active && payload?.length\" class=\"bg-background border rounded p-2 shadow\">\n",[212,331,332],{"class":214,"line":288},[212,333,334],{"class":268},"      \u003Cp class=\"font-medium\">{{ label }}\u003C/p>\n",[212,336,338],{"class":214,"line":337},5,[212,339,340],{"class":268},"      \u003Cp v-for=\"entry in payload\" :key=\"entry.dataKey\" :style=\"{ color: entry.color }\">\n",[212,342,344],{"class":214,"line":343},6,[212,345,346],{"class":268},"        {{ entry.name }}: {{ entry.value }}\n",[212,348,350],{"class":214,"line":349},7,[212,351,352],{"class":268},"      \u003C/p>\n",[212,354,356],{"class":214,"line":355},8,[212,357,358],{"class":268},"    \u003C/div>\n",[212,360,362],{"class":214,"line":361},9,[212,363,364],{"class":268},"  \u003C/template>\n",[212,366,368,370,372],{"class":214,"line":367},10,[212,369,291],{"class":218},[212,371,144],{"class":222},[212,373,273],{"class":218},[192,375,377],{"id":376},"pre-select-a-tooltip-index","Pre-select a tooltip index",[183,379,380,381,384],{},"Use ",[187,382,383],{},"default-index"," to show a tooltip on initial render:",[203,386,388],{"className":205,"code":387,"language":207,"meta":208,"style":208},"\u003CTooltip :default-index=\"1\" />\n",[187,389,390],{"__ignoreMap":208},[212,391,392,394,396,398,400,402,404,407,409],{"class":214,"line":215},[212,393,219],{"class":218},[212,395,144],{"class":222},[212,397,226],{"class":218},[212,399,383],{"class":229},[212,401,233],{"class":218},[212,403,236],{"class":218},[212,405,406],{"class":239},"1",[212,408,236],{"class":218},[212,410,411],{"class":218}," />\n",[192,413,415],{"id":414},"activate-on-click","Activate on click",[203,417,419],{"className":205,"code":418,"language":207,"meta":208,"style":208},"\u003CTooltip trigger=\"click\" />\n",[187,420,421],{"__ignoreMap":208},[212,422,423,425,427,430,432,434,438,440],{"class":214,"line":215},[212,424,219],{"class":218},[212,426,144],{"class":222},[212,428,429],{"class":229}," trigger",[212,431,233],{"class":218},[212,433,236],{"class":218},[212,435,437],{"class":436},"sfazB","click",[212,439,236],{"class":218},[212,441,411],{"class":218},[192,443,445],{"id":444},"disable-the-cursor","Disable the cursor",[203,447,449],{"className":205,"code":448,"language":207,"meta":208,"style":208},"\u003CTooltip :cursor=\"false\" />\n",[187,450,451],{"__ignoreMap":208},[212,452,453,455,457,459,462,464,466,470,472],{"class":214,"line":215},[212,454,219],{"class":218},[212,456,144],{"class":222},[212,458,226],{"class":218},[212,460,461],{"class":229},"cursor",[212,463,233],{"class":218},[212,465,236],{"class":218},[212,467,469],{"class":468},"sfNiH","false",[212,471,236],{"class":218},[212,473,411],{"class":218},[192,475,477],{"id":476},"tooltip-props","Tooltip props",[479,480,481,500],"table",{},[482,483,484],"thead",{},[485,486,487,491,494,497],"tr",{},[488,489,490],"th",{},"Prop",[488,492,493],{},"Type",[488,495,496],{},"Default",[488,498,499],{},"Description",[501,502,503,534,552,572,596,614,634,652,674,692,712,729,747,764,781,801,821,839,857,888,907],"tbody",{},[485,504,505,511,516,521],{},[506,507,508],"td",{},[187,509,510],{},"active",[506,512,513],{},[187,514,515],{},"boolean",[506,517,518],{},[187,519,520],{},"undefined",[506,522,523,524,527,528,530,531,533],{},"Force active state. ",[187,525,526],{},"true"," keeps tooltip visible, ",[187,529,469],{}," hides it, ",[187,532,520],{}," lets the chart control visibility.",[485,535,536,541,546,549],{},[506,537,538],{},[187,539,540],{},"defaultIndex",[506,542,543],{},[187,544,545],{},"number | string | null",[506,547,548],{},"—",[506,550,551],{},"Pre-selected data index shown on initial render",[485,553,554,559,564,569],{},[506,555,556],{},[187,557,558],{},"trigger",[506,560,561],{},[187,562,563],{},"'hover' | 'click'",[506,565,566],{},[187,567,568],{},"'hover'",[506,570,571],{},"Activation trigger",[485,573,574,579,583,587],{},[506,575,576],{},[187,577,578],{},"shared",[506,580,581],{},[187,582,515],{},[506,584,585],{},[187,586,520],{},[506,588,589,590,592,593,595],{},"Show all series at hovered index. When ",[187,591,520],{},", defaults to ",[187,594,526],{}," for axis-type charts.",[485,597,598,602,607,611],{},[506,599,600],{},[187,601,461],{},[506,603,604],{},[187,605,606],{},"boolean | object",[506,608,609],{},[187,610,526],{},[506,612,613],{},"Show/customize cursor. Pass an object to set SVG attrs on the cursor element.",[485,615,616,621,626,631],{},[506,617,618],{},[187,619,620],{},"offset",[506,622,623],{},[187,624,625],{},"number",[506,627,628],{},[187,629,630],{},"10",[506,632,633],{},"Pixel offset from cursor",[485,635,636,641,645,649],{},[506,637,638],{},[187,639,640],{},"includeHidden",[506,642,643],{},[187,644,515],{},[506,646,647],{},[187,648,469],{},[506,650,651],{},"Show hidden series data",[485,653,654,659,663,667],{},[506,655,656],{},[187,657,658],{},"filterNull",[506,660,661],{},[187,662,515],{},[506,664,665],{},[187,666,526],{},[506,668,669,670,673],{},"Filter out entries with ",[187,671,672],{},"null"," values",[485,675,676,681,685,689],{},[506,677,678],{},[187,679,680],{},"isAnimationActive",[506,682,683],{},[187,684,515],{},[506,686,687],{},[187,688,526],{},[506,690,691],{},"Animate tooltip position changes",[485,693,694,699,704,709],{},[506,695,696],{},[187,697,698],{},"allowEscapeViewBox",[506,700,701],{},[187,702,703],{},"{ x: boolean, y: boolean }",[506,705,706],{},[187,707,708],{},"{ x: false, y: false }",[506,710,711],{},"Allow tooltip to overflow the chart area",[485,713,714,719,724,726],{},[506,715,716],{},[187,717,718],{},"position",[506,720,721],{},[187,722,723],{},"{ x?: number, y?: number }",[506,725,548],{},[506,727,728],{},"Pin tooltip to a fixed position",[485,730,731,736,740,744],{},[506,732,733],{},[187,734,735],{},"reverseDirection",[506,737,738],{},[187,739,703],{},[506,741,742],{},[187,743,708],{},[506,745,746],{},"Flip tooltip placement direction",[485,748,749,754,759,761],{},[506,750,751],{},[187,752,753],{},"portal",[506,755,756],{},[187,757,758],{},"HTMLElement",[506,760,548],{},[506,762,763],{},"Teleport tooltip to a custom DOM element",[485,765,766,771,776,778],{},[506,767,768],{},[187,769,770],{},"payloadUniqBy",[506,772,773],{},[187,774,775],{},"boolean | Function",[506,777,548],{},[506,779,780],{},"Deduplicate payload entries",[485,782,783,788,793,798],{},[506,784,785],{},[187,786,787],{},"axisId",[506,789,790],{},[187,791,792],{},"string | number",[506,794,795],{},[187,796,797],{},"0",[506,799,800],{},"Target axis ID for tooltip interaction",[485,802,803,808,813,818],{},[506,804,805],{},[187,806,807],{},"contentStyle",[506,809,810],{},[187,811,812],{},"object",[506,814,815],{},[187,816,817],{},"{}",[506,819,820],{},"Inline styles for tooltip content wrapper",[485,822,823,828,832,836],{},[506,824,825],{},[187,826,827],{},"labelStyle",[506,829,830],{},[187,831,812],{},[506,833,834],{},[187,835,817],{},[506,837,838],{},"Inline styles for the label",[485,840,841,846,850,854],{},[506,842,843],{},[187,844,845],{},"itemStyle",[506,847,848],{},[187,849,812],{},[506,851,852],{},[187,853,817],{},[506,855,856],{},"Inline styles for each payload item",[485,858,859,864,869,874],{},[506,860,861],{},[187,862,863],{},"itemSorter",[506,865,866],{},[187,867,868],{},"string",[506,870,871],{},[187,872,873],{},"'name'",[506,875,876,877,879,880,883,884,887],{},"Sort payload items. Accepts ",[187,878,873],{},", ",[187,881,882],{},"'value'",", or ",[187,885,886],{},"'dataKey'",".",[485,889,890,895,899,904],{},[506,891,892],{},[187,893,894],{},"separator",[506,896,897],{},[187,898,868],{},[506,900,901],{},[187,902,903],{},"' : '",[506,905,906],{},"Separator between name and value in default content",[485,908,909,914,918,922],{},[506,910,911],{},[187,912,913],{},"style",[506,915,916],{},[187,917,812],{},[506,919,920],{},[187,921,817],{},[506,923,924],{},"Inline styles for the tooltip bounding box",[192,926,928],{"id":927},"tooltip-slots","Tooltip slots",[479,930,931,943],{},[482,932,933],{},[485,934,935,938,941],{},[488,936,937],{},"Slot",[488,939,940],{},"Props",[488,942,499],{},[501,944,945,959],{},[485,946,947,951,956],{},[506,948,949],{},[187,950,305],{},[506,952,953],{},[187,954,955],{},"{ active, payload, label, coordinate, accessibilityLayer }",[506,957,958],{},"Full tooltip content",[485,960,961,966,969],{},[506,962,963],{},[187,964,965],{},"#cursor",[506,967,968],{},"Shape-specific SVG props",[506,970,971,972,975,976,979,980,983,984,987],{},"Custom cursor element. Receives ",[187,973,974],{},"Cross"," props for ScatterChart, ",[187,977,978],{},"Rectangle"," props for BarChart, ",[187,981,982],{},"Sector"," props for radial charts, ",[187,985,986],{},"Curve"," props for others.",[913,989,990],{},"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}",{"title":208,"searchDepth":276,"depth":276,"links":992},[993,994,995,996,997,998,999],{"id":194,"depth":276,"text":195},{"id":298,"depth":276,"text":299},{"id":376,"depth":276,"text":377},{"id":414,"depth":276,"text":415},{"id":444,"depth":276,"text":445},{"id":476,"depth":276,"text":477},{"id":927,"depth":276,"text":928},"Configure tooltips for displaying data on hover","md",null,{},{"icon":147},{"title":144,"description":1000},"1vEkYAgFDzS32U-PQY15x4jtOa7fKDUfO8mP6WzclWc",[1008,1010],{"title":134,"path":135,"stem":136,"description":1009,"icon":56,"children":-1},"Combine Area, Bar, and Line series in a single chart",{"title":149,"path":150,"stem":151,"description":1011,"icon":152,"children":-1},"Add legends to identify chart series",1775929455935]