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