[{"data":1,"prerenderedAt":1045},["ShallowReactive",2],{"navigation_docs":3,"-components-reference-elements":172,"-components-reference-elements-surround":1040},[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":159,"body":174,"description":1033,"extension":1034,"links":1035,"meta":1036,"navigation":1037,"path":160,"seo":1038,"stem":161,"__hash__":1039},"docs/4.components/5.reference-elements.md",{"type":175,"value":176,"toc":1018},"minimark",[177,193,198,201,207,211,218,223,227,230,235,240,292,296,299,304,308,315,375,426,430,613,617,647,651,795,799,1014],[178,179,180,184,185,188,189,192],"p",{},[181,182,183],"code",{},"\u003CReferenceDot>",", ",[181,186,187],{},"\u003CReferenceLine>",", and ",[181,190,191],{},"\u003CReferenceArea>"," add visual annotations to cartesian charts — highlighting thresholds, targets, or regions of interest.",[194,195,197],"h2",{"id":196},"referencedot","ReferenceDot",[178,199,200],{},"Mark a specific data point:",[202,203],"chart-demo",{"description":204,"name":205,"src":206},"A labeled reference dot highlighting the peak value.","Reference Dot","reference-charts/reference-dot-chart",[194,208,210],{"id":209},"custom-shape-slot","Custom shape slot",[178,212,213,214,217],{},"Use the ",[181,215,216],{},"#shape"," slot to render a custom shape instead of the default dot:",[202,219],{"description":220,"name":221,"src":222},"A reference dot with a custom double-circle shape.","Custom Shape","reference-charts/custom-shape-reference-dot-chart",[194,224,226],{"id":225},"referenceline","ReferenceLine",[178,228,229],{},"Draw a horizontal or vertical reference line:",[202,231],{"description":232,"name":233,"src":234},"A dashed horizontal reference line showing the average.","Reference Line","reference-charts/reference-line-chart",[236,237,239],"h3",{"id":238},"vertical-line","Vertical line",[241,242,247],"pre",{"className":243,"code":244,"language":245,"meta":246,"style":246},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CReferenceLine x=\"Mar\" stroke=\"#14b8a6\" />\n","vue","",[181,248,249],{"__ignoreMap":246},[250,251,254,258,261,265,268,271,275,277,280,282,284,287,289],"span",{"class":252,"line":253},"line",1,[250,255,257],{"class":256},"sMK4o","\u003C",[250,259,226],{"class":260},"swJcz",[250,262,264],{"class":263},"spNyl"," x",[250,266,267],{"class":256},"=",[250,269,270],{"class":256},"\"",[250,272,274],{"class":273},"sfazB","Mar",[250,276,270],{"class":256},[250,278,279],{"class":263}," stroke",[250,281,267],{"class":256},[250,283,270],{"class":256},[250,285,286],{"class":273},"#14b8a6",[250,288,270],{"class":256},[250,290,291],{"class":256}," />\n",[194,293,295],{"id":294},"referencearea","ReferenceArea",[178,297,298],{},"Highlight a region between two coordinates:",[202,300],{"description":301,"name":302,"src":303},"A shaded region marking a target zone.","Reference Area","reference-charts/reference-area-chart",[194,305,307],{"id":306},"overflow-behavior","Overflow behavior",[178,309,310,311,314],{},"Control what happens when a reference element falls outside the chart domain using ",[181,312,313],{},"if-overflow",":",[316,317,318,331],"table",{},[319,320,321],"thead",{},[322,323,324,328],"tr",{},[325,326,327],"th",{},"Value",[325,329,330],{},"Behavior",[332,333,334,345,355,365],"tbody",{},[322,335,336,342],{},[337,338,339],"td",{},[181,340,341],{},"'discard'",[337,343,344],{},"Hide when outside domain (default)",[322,346,347,352],{},[337,348,349],{},[181,350,351],{},"'hidden'",[337,353,354],{},"Render but clip to chart area",[322,356,357,362],{},[337,358,359],{},[181,360,361],{},"'visible'",[337,363,364],{},"Render even outside chart area",[322,366,367,372],{},[337,368,369],{},[181,370,371],{},"'extendDomain'",[337,373,374],{},"Extend axis domain to include the element",[241,376,378],{"className":243,"code":377,"language":245,"meta":246,"style":246},"\u003CReferenceDot x=\"Mar\" :y=\"9999\" if-overflow=\"extendDomain\" />\n",[181,379,380],{"__ignoreMap":246},[250,381,382,384,386,388,390,392,394,396,399,402,404,406,410,412,415,417,419,422,424],{"class":252,"line":253},[250,383,257],{"class":256},[250,385,197],{"class":260},[250,387,264],{"class":263},[250,389,267],{"class":256},[250,391,270],{"class":256},[250,393,274],{"class":273},[250,395,270],{"class":256},[250,397,398],{"class":256}," :",[250,400,401],{"class":263},"y",[250,403,267],{"class":256},[250,405,270],{"class":256},[250,407,409],{"class":408},"sbssI","9999",[250,411,270],{"class":256},[250,413,414],{"class":263}," if-overflow",[250,416,267],{"class":256},[250,418,270],{"class":256},[250,420,421],{"class":273},"extendDomain",[250,423,270],{"class":256},[250,425,291],{"class":256},[194,427,429],{"id":428},"referencedot-props","ReferenceDot props",[316,431,432,448],{},[319,433,434],{},[322,435,436,439,442,445],{},[325,437,438],{},"Prop",[325,440,441],{},"Type",[325,443,444],{},"Default",[325,446,447],{},"Description",[332,449,450,468,483,503,523,542,559,576,595],{},[322,451,452,457,462,465],{},[337,453,454],{},[181,455,456],{},"x",[337,458,459],{},[181,460,461],{},"number | string",[337,463,464],{},"—",[337,466,467],{},"X-axis coordinate",[322,469,470,474,478,480],{},[337,471,472],{},[181,473,401],{},[337,475,476],{},[181,477,461],{},[337,479,464],{},[337,481,482],{},"Y-axis coordinate",[322,484,485,490,495,500],{},[337,486,487],{},[181,488,489],{},"r",[337,491,492],{},[181,493,494],{},"number",[337,496,497],{},[181,498,499],{},"10",[337,501,502],{},"Dot radius",[322,504,505,510,515,520],{},[337,506,507],{},[181,508,509],{},"fill",[337,511,512],{},[181,513,514],{},"string",[337,516,517],{},[181,518,519],{},"'#fff'",[337,521,522],{},"Dot fill color",[322,524,525,530,534,539],{},[337,526,527],{},[181,528,529],{},"stroke",[337,531,532],{},[181,533,514],{},[337,535,536],{},[181,537,538],{},"'#ccc'",[337,540,541],{},"Dot stroke color",[322,543,544,549,554,556],{},[337,545,546],{},[181,547,548],{},"label",[337,550,551],{},[181,552,553],{},"string | number | object",[337,555,464],{},[337,557,558],{},"Label text or Label props",[322,560,561,566,570,574],{},[337,562,563],{},[181,564,565],{},"ifOverflow",[337,567,568],{},[181,569,514],{},[337,571,572],{},[181,573,341],{},[337,575,307],{},[322,577,578,583,587,592],{},[337,579,580],{},[181,581,582],{},"xAxisId",[337,584,585],{},[181,586,461],{},[337,588,589],{},[181,590,591],{},"0",[337,593,594],{},"Target X axis ID",[322,596,597,602,606,610],{},[337,598,599],{},[181,600,601],{},"yAxisId",[337,603,604],{},[181,605,461],{},[337,607,608],{},[181,609,591],{},[337,611,612],{},"Target Y axis ID",[194,614,616],{"id":615},"referencedot-slots","ReferenceDot slots",[316,618,619,631],{},[319,620,621],{},[322,622,623,626,629],{},[325,624,625],{},"Slot",[325,627,628],{},"Props",[325,630,447],{},[332,632,633],{},[322,634,635,639,644],{},[337,636,637],{},[181,638,216],{},[337,640,641],{},[181,642,643],{},"{ cx, cy, r, fill, stroke, clipPath }",[337,645,646],{},"Custom shape rendering",[194,648,650],{"id":649},"referenceline-props","ReferenceLine props",[316,652,653,665],{},[319,654,655],{},[322,656,657,659,661,663],{},[325,658,438],{},[325,660,441],{},[325,662,444],{},[325,664,447],{},[332,666,667,682,697,714,733,747,763,779],{},[322,668,669,673,677,679],{},[337,670,671],{},[181,672,456],{},[337,674,675],{},[181,676,461],{},[337,678,464],{},[337,680,681],{},"X value for vertical line",[322,683,684,688,692,694],{},[337,685,686],{},[181,687,401],{},[337,689,690],{},[181,691,461],{},[337,693,464],{},[337,695,696],{},"Y value for horizontal line",[322,698,699,703,707,711],{},[337,700,701],{},[181,702,529],{},[337,704,705],{},[181,706,514],{},[337,708,709],{},[181,710,538],{},[337,712,713],{},"Line stroke color",[322,715,716,721,725,730],{},[337,717,718],{},[181,719,720],{},"strokeWidth",[337,722,723],{},[181,724,461],{},[337,726,727],{},[181,728,729],{},"1",[337,731,732],{},"Line stroke width",[322,734,735,739,743,745],{},[337,736,737],{},[181,738,548],{},[337,740,741],{},[181,742,553],{},[337,744,464],{},[337,746,558],{},[322,748,749,753,757,761],{},[337,750,751],{},[181,752,565],{},[337,754,755],{},[181,756,514],{},[337,758,759],{},[181,760,341],{},[337,762,307],{},[322,764,765,769,773,777],{},[337,766,767],{},[181,768,582],{},[337,770,771],{},[181,772,461],{},[337,774,775],{},[181,776,591],{},[337,778,594],{},[322,780,781,785,789,793],{},[337,782,783],{},[181,784,601],{},[337,786,787],{},[181,788,461],{},[337,790,791],{},[181,792,591],{},[337,794,612],{},[194,796,798],{"id":797},"referencearea-props","ReferenceArea props",[316,800,801,813],{},[319,802,803],{},[322,804,805,807,809,811],{},[325,806,438],{},[325,808,441],{},[325,810,444],{},[325,812,447],{},[332,814,815,831,847,863,879,896,915,933,952,966,982,998],{},[322,816,817,822,826,828],{},[337,818,819],{},[181,820,821],{},"x1",[337,823,824],{},[181,825,461],{},[337,827,464],{},[337,829,830],{},"Start X coordinate",[322,832,833,838,842,844],{},[337,834,835],{},[181,836,837],{},"x2",[337,839,840],{},[181,841,461],{},[337,843,464],{},[337,845,846],{},"End X coordinate",[322,848,849,854,858,860],{},[337,850,851],{},[181,852,853],{},"y1",[337,855,856],{},[181,857,461],{},[337,859,464],{},[337,861,862],{},"Start Y coordinate",[322,864,865,870,874,876],{},[337,866,867],{},[181,868,869],{},"y2",[337,871,872],{},[181,873,461],{},[337,875,464],{},[337,877,878],{},"End Y coordinate",[322,880,881,885,889,893],{},[337,882,883],{},[181,884,509],{},[337,886,887],{},[181,888,514],{},[337,890,891],{},[181,892,538],{},[337,894,895],{},"Area fill color",[322,897,898,903,907,912],{},[337,899,900],{},[181,901,902],{},"fillOpacity",[337,904,905],{},[181,906,494],{},[337,908,909],{},[181,910,911],{},"0.5",[337,913,914],{},"Fill opacity",[322,916,917,921,925,930],{},[337,918,919],{},[181,920,529],{},[337,922,923],{},[181,924,514],{},[337,926,927],{},[181,928,929],{},"'none'",[337,931,932],{},"Border stroke color",[322,934,935,940,945,949],{},[337,936,937],{},[181,938,939],{},"radius",[337,941,942],{},[181,943,944],{},"number | number[]",[337,946,947],{},[181,948,591],{},[337,950,951],{},"Corner radius",[322,953,954,958,962,964],{},[337,955,956],{},[181,957,548],{},[337,959,960],{},[181,961,553],{},[337,963,464],{},[337,965,558],{},[322,967,968,972,976,980],{},[337,969,970],{},[181,971,565],{},[337,973,974],{},[181,975,514],{},[337,977,978],{},[181,979,341],{},[337,981,307],{},[322,983,984,988,992,996],{},[337,985,986],{},[181,987,582],{},[337,989,990],{},[181,991,461],{},[337,993,994],{},[181,995,591],{},[337,997,594],{},[322,999,1000,1004,1008,1012],{},[337,1001,1002],{},[181,1003,601],{},[337,1005,1006],{},[181,1007,461],{},[337,1009,1010],{},[181,1011,591],{},[337,1013,612],{},[1015,1016,1017],"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":246,"searchDepth":1019,"depth":1019,"links":1020},2,[1021,1022,1023,1027,1028,1029,1030,1031,1032],{"id":196,"depth":1019,"text":197},{"id":209,"depth":1019,"text":210},{"id":225,"depth":1019,"text":226,"children":1024},[1025],{"id":238,"depth":1026,"text":239},3,{"id":294,"depth":1019,"text":295},{"id":306,"depth":1019,"text":307},{"id":428,"depth":1019,"text":429},{"id":615,"depth":1019,"text":616},{"id":649,"depth":1019,"text":650},{"id":797,"depth":1019,"text":798},"Annotate charts with reference dots, lines, and areas","md",null,{},{"icon":61},{"title":159,"description":1033},"G-cPj4Wv1BQTf0ex59LfmZ0yCIx8dOcLcyBxldB2OSM",[1041,1043],{"title":154,"path":155,"stem":156,"description":1042,"icon":157,"children":-1},"Configure X and Y axes for cartesian charts",{"title":163,"path":164,"stem":165,"description":1044,"icon":166,"children":-1},"Render SVG text with auto-wrapping, rotation, and scaling",1775472914569]