[{"data":1,"prerenderedAt":1407},["ShallowReactive",2],{"navigation_docs":3,"-components-custom-overlays":279,"-components-custom-overlays-surround":1404},[4,26,112,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"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",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[32,37,42,47,52,57,62,67,72,77,82,87,92,97,102,107],{"title":33,"path":34,"stem":35,"icon":36},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":38,"path":39,"stem":40,"icon":41},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":48,"path":49,"stem":50,"icon":51},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":53,"path":54,"stem":55,"icon":56},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":58,"path":59,"stem":60,"icon":61},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":63,"path":64,"stem":65,"icon":66},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":68,"path":69,"stem":70,"icon":71},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":73,"path":74,"stem":75,"icon":76},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":78,"path":79,"stem":80,"icon":81},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":83,"path":84,"stem":85,"icon":86},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":88,"path":89,"stem":90,"icon":91},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":93,"path":94,"stem":95,"icon":96},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":98,"path":99,"stem":100,"icon":101},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":103,"path":104,"stem":105,"icon":106},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":108,"path":109,"stem":110,"icon":111},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":113,"icon":114,"path":115,"stem":116,"children":117,"page":25},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[118,123,128,133,138,143,148,153,158,163,167,172,177,182,187,192,197,201,206],{"title":119,"path":120,"stem":121,"icon":122},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":124,"path":125,"stem":126,"icon":127},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":129,"path":130,"stem":131,"icon":132},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":134,"path":135,"stem":136,"icon":137},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":139,"path":140,"stem":141,"icon":142},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":144,"path":145,"stem":146,"icon":147},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":149,"path":150,"stem":151,"icon":152},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":154,"path":155,"stem":156,"icon":157},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":159,"path":160,"stem":161,"icon":162},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":164,"path":165,"stem":166,"icon":51},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":168,"path":169,"stem":170,"icon":171},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":173,"path":174,"stem":175,"icon":176},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":178,"path":179,"stem":180,"icon":181},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":183,"path":184,"stem":185,"icon":186},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":188,"path":189,"stem":190,"icon":191},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":193,"path":194,"stem":195,"icon":196},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":198,"path":199,"stem":200,"icon":137},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":202,"path":203,"stem":204,"icon":205},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":207,"path":208,"stem":209,"icon":210},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":25},"Components","i-lucide-code","\u002Fcomponents","4.components",[217,222,227,231,236,240,245,249,254,259,264,269,274],{"title":218,"path":219,"stem":220,"icon":221},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":223,"path":224,"stem":225,"icon":226},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":228,"path":229,"stem":230,"icon":196},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":232,"path":233,"stem":234,"icon":235},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":237,"path":238,"stem":239,"icon":147},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":241,"path":242,"stem":243,"icon":244},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":246,"path":247,"stem":248,"icon":56},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":250,"path":251,"stem":252,"icon":253},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":255,"path":256,"stem":257,"icon":258},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":260,"path":261,"stem":262,"icon":263},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":265,"path":266,"stem":267,"icon":268},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":270,"path":271,"stem":272,"icon":273},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":275,"path":276,"stem":277,"icon":278},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":280,"title":275,"body":281,"description":1397,"extension":1398,"links":1399,"meta":1400,"navigation":1401,"path":276,"seo":1402,"stem":277,"__hash__":1403},"docs\u002F4.components\u002F13.custom-overlays.md",{"type":282,"value":283,"toc":1391},"minimark",[284,288,293,304,640,645,649,659,1244,1249,1257,1260,1265,1269,1279,1387],[285,286,287],"p",{},"A chart renders its default slot inside its SVG. To draw your own marks, write a small\ncomponent that reads the chart through a composable, and put it in the chart's default slot.\nThe composables only work inside a chart, so call them in the child component, not in the\ncomponent that renders the chart.",[289,290,292],"h2",{"id":291},"plot-area","Plot area",[285,294,295,299,300,303],{},[296,297,298],"code",{},"usePlotArea()"," returns the box inside the axes as ",[296,301,302],{},"{ x, y, width, height }"," in pixels.",[305,306,312],"pre",{"className":307,"code":308,"filename":309,"language":310,"meta":311,"style":311},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { usePlotArea } from 'vccs'\n\nconst plotArea = usePlotArea()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cg>\n    \u003Cline\n      :x1=\"plotArea.x\"\n      :x2=\"plotArea.x + plotArea.width\"\n      :y1=\"plotArea.y\"\n      :y2=\"plotArea.y\"\n      stroke=\"#14b8a6\"\n      stroke-dasharray=\"4 4\"\n    \u002F>\n    \u003Ctext\n      :x=\"plotArea.x + 4\"\n      :y=\"plotArea.y - 6\"\n      fill=\"#14b8a6\"\n      font-size=\"12\"\n    >\n      Plot area top\n    \u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Ftemplate>\n","PlotAreaTop.vue","vue","",[296,313,314,334,364,371,389,399,404,414,425,434,451,466,481,495,510,525,531,539,554,569,583,598,604,610,621,631],{"__ignoreMap":311},[315,316,319,323,327,331],"span",{"class":317,"line":318},"line",1,[315,320,322],{"class":321},"sMK4o","\u003C",[315,324,326],{"class":325},"swJcz","script",[315,328,330],{"class":329},"spNyl"," setup",[315,332,333],{"class":321},">\n",[315,335,337,341,344,348,351,354,357,361],{"class":317,"line":336},2,[315,338,340],{"class":339},"s7zQu","import",[315,342,343],{"class":321}," {",[315,345,347],{"class":346},"sTEyZ"," usePlotArea",[315,349,350],{"class":321}," }",[315,352,353],{"class":339}," from",[315,355,356],{"class":321}," '",[315,358,360],{"class":359},"sfazB","vccs",[315,362,363],{"class":321},"'\n",[315,365,367],{"class":317,"line":366},3,[315,368,370],{"emptyLinePlaceholder":369},true,"\n",[315,372,374,377,380,383,386],{"class":317,"line":373},4,[315,375,376],{"class":329},"const",[315,378,379],{"class":346}," plotArea ",[315,381,382],{"class":321},"=",[315,384,347],{"class":385},"s2Zo4",[315,387,388],{"class":346},"()\n",[315,390,392,395,397],{"class":317,"line":391},5,[315,393,394],{"class":321},"\u003C\u002F",[315,396,326],{"class":325},[315,398,333],{"class":321},[315,400,402],{"class":317,"line":401},6,[315,403,370],{"emptyLinePlaceholder":369},[315,405,407,409,412],{"class":317,"line":406},7,[315,408,322],{"class":321},[315,410,411],{"class":325},"template",[315,413,333],{"class":321},[315,415,417,420,423],{"class":317,"line":416},8,[315,418,419],{"class":321},"  \u003C",[315,421,422],{"class":325},"g",[315,424,333],{"class":321},[315,426,428,431],{"class":317,"line":427},9,[315,429,430],{"class":321},"    \u003C",[315,432,433],{"class":325},"line\n",[315,435,437,440,442,445,448],{"class":317,"line":436},10,[315,438,439],{"class":329},"      :x1",[315,441,382],{"class":321},[315,443,444],{"class":321},"\"",[315,446,447],{"class":359},"plotArea.x",[315,449,450],{"class":321},"\"\n",[315,452,454,457,459,461,464],{"class":317,"line":453},11,[315,455,456],{"class":329},"      :x2",[315,458,382],{"class":321},[315,460,444],{"class":321},[315,462,463],{"class":359},"plotArea.x + plotArea.width",[315,465,450],{"class":321},[315,467,469,472,474,476,479],{"class":317,"line":468},12,[315,470,471],{"class":329},"      :y1",[315,473,382],{"class":321},[315,475,444],{"class":321},[315,477,478],{"class":359},"plotArea.y",[315,480,450],{"class":321},[315,482,484,487,489,491,493],{"class":317,"line":483},13,[315,485,486],{"class":329},"      :y2",[315,488,382],{"class":321},[315,490,444],{"class":321},[315,492,478],{"class":359},[315,494,450],{"class":321},[315,496,498,501,503,505,508],{"class":317,"line":497},14,[315,499,500],{"class":329},"      stroke",[315,502,382],{"class":321},[315,504,444],{"class":321},[315,506,507],{"class":359},"#14b8a6",[315,509,450],{"class":321},[315,511,513,516,518,520,523],{"class":317,"line":512},15,[315,514,515],{"class":329},"      stroke-dasharray",[315,517,382],{"class":321},[315,519,444],{"class":321},[315,521,522],{"class":359},"4 4",[315,524,450],{"class":321},[315,526,528],{"class":317,"line":527},16,[315,529,530],{"class":321},"    \u002F>\n",[315,532,534,536],{"class":317,"line":533},17,[315,535,430],{"class":321},[315,537,538],{"class":325},"text\n",[315,540,542,545,547,549,552],{"class":317,"line":541},18,[315,543,544],{"class":329},"      :x",[315,546,382],{"class":321},[315,548,444],{"class":321},[315,550,551],{"class":359},"plotArea.x + 4",[315,553,450],{"class":321},[315,555,557,560,562,564,567],{"class":317,"line":556},19,[315,558,559],{"class":329},"      :y",[315,561,382],{"class":321},[315,563,444],{"class":321},[315,565,566],{"class":359},"plotArea.y - 6",[315,568,450],{"class":321},[315,570,572,575,577,579,581],{"class":317,"line":571},20,[315,573,574],{"class":329},"      fill",[315,576,382],{"class":321},[315,578,444],{"class":321},[315,580,507],{"class":359},[315,582,450],{"class":321},[315,584,586,589,591,593,596],{"class":317,"line":585},21,[315,587,588],{"class":329},"      font-size",[315,590,382],{"class":321},[315,592,444],{"class":321},[315,594,595],{"class":359},"12",[315,597,450],{"class":321},[315,599,601],{"class":317,"line":600},22,[315,602,603],{"class":321},"    >\n",[315,605,607],{"class":317,"line":606},23,[315,608,609],{"class":346},"      Plot area top\n",[315,611,613,616,619],{"class":317,"line":612},24,[315,614,615],{"class":321},"    \u003C\u002F",[315,617,618],{"class":325},"text",[315,620,333],{"class":321},[315,622,624,627,629],{"class":317,"line":623},25,[315,625,626],{"class":321},"  \u003C\u002F",[315,628,422],{"class":325},[315,630,333],{"class":321},[315,632,634,636,638],{"class":317,"line":633},26,[315,635,394],{"class":321},[315,637,411],{"class":325},[315,639,333],{"class":321},[641,642],"chart-demo",{"description":643,"name":292,"src":644},"A child component draws a line along the top of the plot area.","overlay-charts\u002Fplot-area-chart",[289,646,648],{"id":647},"data-values-to-pixels","Data values to pixels",[285,650,651,654,655,658],{},[296,652,653],{},"useXAxisScale()"," and ",[296,656,657],{},"useYAxisScale()"," return functions that map a data value to a pixel\nposition. Pass an axis id when the chart has more than one axis on that side.",[305,660,663],{"className":307,"code":661,"filename":662,"language":310,"meta":311,"style":311},"\u003Cscript setup>\nimport { computed } from 'vue'\nimport { useXAxisScale, useYAxisScale } from 'vccs'\n\nconst props = defineProps({\n  x: { type: String, required: true },\n  y: { type: Number, required: true },\n  label: { type: String, required: true },\n})\n\nconst xScale = useXAxisScale()\nconst yScale = useYAxisScale()\nconst point = computed(() => {\n  const cx = xScale.value?.(props.x)\n  const cy = yScale.value?.(props.y)\n  return cx == null || cy == null ? undefined : { cx, cy }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cg v-if=\"point\">\n    \u003Ccircle\n      :cx=\"point.cx\"\n      :cy=\"point.cy\"\n      r=\"6\"\n      fill=\"none\"\n      stroke=\"#14b8a6\"\n      stroke-width=\"2\"\n    \u002F>\n    \u003Ctext\n      :x=\"point.cx\"\n      :y=\"point.cy - 12\"\n      fill=\"#14b8a6\"\n      font-size=\"12\"\n      text-anchor=\"middle\"\n    >\n      {{ label }}\n    \u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Ftemplate>\n","DataMarker.vue",[296,664,665,675,694,719,723,741,773,799,824,832,836,849,862,884,919,948,990,996,1004,1008,1016,1036,1043,1057,1071,1085,1098,1111,1126,1131,1138,1151,1165,1178,1191,1206,1211,1217,1226,1235],{"__ignoreMap":311},[315,666,667,669,671,673],{"class":317,"line":318},[315,668,322],{"class":321},[315,670,326],{"class":325},[315,672,330],{"class":329},[315,674,333],{"class":321},[315,676,677,679,681,684,686,688,690,692],{"class":317,"line":336},[315,678,340],{"class":339},[315,680,343],{"class":321},[315,682,683],{"class":346}," computed",[315,685,350],{"class":321},[315,687,353],{"class":339},[315,689,356],{"class":321},[315,691,310],{"class":359},[315,693,363],{"class":321},[315,695,696,698,700,703,706,709,711,713,715,717],{"class":317,"line":366},[315,697,340],{"class":339},[315,699,343],{"class":321},[315,701,702],{"class":346}," useXAxisScale",[315,704,705],{"class":321},",",[315,707,708],{"class":346}," useYAxisScale",[315,710,350],{"class":321},[315,712,353],{"class":339},[315,714,356],{"class":321},[315,716,360],{"class":359},[315,718,363],{"class":321},[315,720,721],{"class":317,"line":373},[315,722,370],{"emptyLinePlaceholder":369},[315,724,725,727,730,732,735,738],{"class":317,"line":391},[315,726,376],{"class":329},[315,728,729],{"class":346}," props ",[315,731,382],{"class":321},[315,733,734],{"class":385}," defineProps",[315,736,737],{"class":346},"(",[315,739,740],{"class":321},"{\n",[315,742,743,746,749,751,754,756,759,761,764,766,770],{"class":317,"line":401},[315,744,745],{"class":325},"  x",[315,747,748],{"class":321},":",[315,750,343],{"class":321},[315,752,753],{"class":325}," type",[315,755,748],{"class":321},[315,757,758],{"class":346}," String",[315,760,705],{"class":321},[315,762,763],{"class":325}," required",[315,765,748],{"class":321},[315,767,769],{"class":768},"sfNiH"," true",[315,771,772],{"class":321}," },\n",[315,774,775,778,780,782,784,786,789,791,793,795,797],{"class":317,"line":406},[315,776,777],{"class":325},"  y",[315,779,748],{"class":321},[315,781,343],{"class":321},[315,783,753],{"class":325},[315,785,748],{"class":321},[315,787,788],{"class":346}," Number",[315,790,705],{"class":321},[315,792,763],{"class":325},[315,794,748],{"class":321},[315,796,769],{"class":768},[315,798,772],{"class":321},[315,800,801,804,806,808,810,812,814,816,818,820,822],{"class":317,"line":416},[315,802,803],{"class":325},"  label",[315,805,748],{"class":321},[315,807,343],{"class":321},[315,809,753],{"class":325},[315,811,748],{"class":321},[315,813,758],{"class":346},[315,815,705],{"class":321},[315,817,763],{"class":325},[315,819,748],{"class":321},[315,821,769],{"class":768},[315,823,772],{"class":321},[315,825,826,829],{"class":317,"line":427},[315,827,828],{"class":321},"}",[315,830,831],{"class":346},")\n",[315,833,834],{"class":317,"line":436},[315,835,370],{"emptyLinePlaceholder":369},[315,837,838,840,843,845,847],{"class":317,"line":453},[315,839,376],{"class":329},[315,841,842],{"class":346}," xScale ",[315,844,382],{"class":321},[315,846,702],{"class":385},[315,848,388],{"class":346},[315,850,851,853,856,858,860],{"class":317,"line":468},[315,852,376],{"class":329},[315,854,855],{"class":346}," yScale ",[315,857,382],{"class":321},[315,859,708],{"class":385},[315,861,388],{"class":346},[315,863,864,866,869,871,873,875,878,881],{"class":317,"line":483},[315,865,376],{"class":329},[315,867,868],{"class":346}," point ",[315,870,382],{"class":321},[315,872,683],{"class":385},[315,874,737],{"class":346},[315,876,877],{"class":321},"()",[315,879,880],{"class":329}," =>",[315,882,883],{"class":321}," {\n",[315,885,886,889,892,895,898,901,904,907,909,912,914,917],{"class":317,"line":497},[315,887,888],{"class":329},"  const",[315,890,891],{"class":346}," cx",[315,893,894],{"class":321}," =",[315,896,897],{"class":346}," xScale",[315,899,900],{"class":321},".",[315,902,903],{"class":385},"value",[315,905,906],{"class":321},"?.",[315,908,737],{"class":325},[315,910,911],{"class":346},"props",[315,913,900],{"class":321},[315,915,916],{"class":346},"x",[315,918,831],{"class":325},[315,920,921,923,926,928,931,933,935,937,939,941,943,946],{"class":317,"line":512},[315,922,888],{"class":329},[315,924,925],{"class":346}," cy",[315,927,894],{"class":321},[315,929,930],{"class":346}," yScale",[315,932,900],{"class":321},[315,934,903],{"class":385},[315,936,906],{"class":321},[315,938,737],{"class":325},[315,940,911],{"class":346},[315,942,900],{"class":321},[315,944,945],{"class":346},"y",[315,947,831],{"class":325},[315,949,950,953,955,958,961,964,966,968,970,973,976,979,981,983,985,987],{"class":317,"line":527},[315,951,952],{"class":339},"  return",[315,954,891],{"class":346},[315,956,957],{"class":321}," ==",[315,959,960],{"class":321}," null",[315,962,963],{"class":321}," ||",[315,965,925],{"class":346},[315,967,957],{"class":321},[315,969,960],{"class":321},[315,971,972],{"class":321}," ?",[315,974,975],{"class":321}," undefined",[315,977,978],{"class":321}," :",[315,980,343],{"class":321},[315,982,891],{"class":346},[315,984,705],{"class":321},[315,986,925],{"class":346},[315,988,989],{"class":321}," }\n",[315,991,992,994],{"class":317,"line":533},[315,993,828],{"class":321},[315,995,831],{"class":346},[315,997,998,1000,1002],{"class":317,"line":541},[315,999,394],{"class":321},[315,1001,326],{"class":325},[315,1003,333],{"class":321},[315,1005,1006],{"class":317,"line":556},[315,1007,370],{"emptyLinePlaceholder":369},[315,1009,1010,1012,1014],{"class":317,"line":571},[315,1011,322],{"class":321},[315,1013,411],{"class":325},[315,1015,333],{"class":321},[315,1017,1018,1020,1022,1025,1027,1029,1032,1034],{"class":317,"line":585},[315,1019,419],{"class":321},[315,1021,422],{"class":325},[315,1023,1024],{"class":329}," v-if",[315,1026,382],{"class":321},[315,1028,444],{"class":321},[315,1030,1031],{"class":359},"point",[315,1033,444],{"class":321},[315,1035,333],{"class":321},[315,1037,1038,1040],{"class":317,"line":600},[315,1039,430],{"class":321},[315,1041,1042],{"class":325},"circle\n",[315,1044,1045,1048,1050,1052,1055],{"class":317,"line":606},[315,1046,1047],{"class":329},"      :cx",[315,1049,382],{"class":321},[315,1051,444],{"class":321},[315,1053,1054],{"class":359},"point.cx",[315,1056,450],{"class":321},[315,1058,1059,1062,1064,1066,1069],{"class":317,"line":612},[315,1060,1061],{"class":329},"      :cy",[315,1063,382],{"class":321},[315,1065,444],{"class":321},[315,1067,1068],{"class":359},"point.cy",[315,1070,450],{"class":321},[315,1072,1073,1076,1078,1080,1083],{"class":317,"line":623},[315,1074,1075],{"class":329},"      r",[315,1077,382],{"class":321},[315,1079,444],{"class":321},[315,1081,1082],{"class":359},"6",[315,1084,450],{"class":321},[315,1086,1087,1089,1091,1093,1096],{"class":317,"line":633},[315,1088,574],{"class":329},[315,1090,382],{"class":321},[315,1092,444],{"class":321},[315,1094,1095],{"class":359},"none",[315,1097,450],{"class":321},[315,1099,1101,1103,1105,1107,1109],{"class":317,"line":1100},27,[315,1102,500],{"class":329},[315,1104,382],{"class":321},[315,1106,444],{"class":321},[315,1108,507],{"class":359},[315,1110,450],{"class":321},[315,1112,1114,1117,1119,1121,1124],{"class":317,"line":1113},28,[315,1115,1116],{"class":329},"      stroke-width",[315,1118,382],{"class":321},[315,1120,444],{"class":321},[315,1122,1123],{"class":359},"2",[315,1125,450],{"class":321},[315,1127,1129],{"class":317,"line":1128},29,[315,1130,530],{"class":321},[315,1132,1134,1136],{"class":317,"line":1133},30,[315,1135,430],{"class":321},[315,1137,538],{"class":325},[315,1139,1141,1143,1145,1147,1149],{"class":317,"line":1140},31,[315,1142,544],{"class":329},[315,1144,382],{"class":321},[315,1146,444],{"class":321},[315,1148,1054],{"class":359},[315,1150,450],{"class":321},[315,1152,1154,1156,1158,1160,1163],{"class":317,"line":1153},32,[315,1155,559],{"class":329},[315,1157,382],{"class":321},[315,1159,444],{"class":321},[315,1161,1162],{"class":359},"point.cy - 12",[315,1164,450],{"class":321},[315,1166,1168,1170,1172,1174,1176],{"class":317,"line":1167},33,[315,1169,574],{"class":329},[315,1171,382],{"class":321},[315,1173,444],{"class":321},[315,1175,507],{"class":359},[315,1177,450],{"class":321},[315,1179,1181,1183,1185,1187,1189],{"class":317,"line":1180},34,[315,1182,588],{"class":329},[315,1184,382],{"class":321},[315,1186,444],{"class":321},[315,1188,595],{"class":359},[315,1190,450],{"class":321},[315,1192,1194,1197,1199,1201,1204],{"class":317,"line":1193},35,[315,1195,1196],{"class":329},"      text-anchor",[315,1198,382],{"class":321},[315,1200,444],{"class":321},[315,1202,1203],{"class":359},"middle",[315,1205,450],{"class":321},[315,1207,1209],{"class":317,"line":1208},36,[315,1210,603],{"class":321},[315,1212,1214],{"class":317,"line":1213},37,[315,1215,1216],{"class":346},"      {{ label }}\n",[315,1218,1220,1222,1224],{"class":317,"line":1219},38,[315,1221,615],{"class":321},[315,1223,618],{"class":325},[315,1225,333],{"class":321},[315,1227,1229,1231,1233],{"class":317,"line":1228},39,[315,1230,626],{"class":321},[315,1232,422],{"class":325},[315,1234,333],{"class":321},[315,1236,1238,1240,1242],{"class":317,"line":1237},40,[315,1239,394],{"class":321},[315,1241,411],{"class":325},[315,1243,333],{"class":321},[641,1245],{"description":1246,"name":1247,"src":1248},"A child component marks one data point with the axis scales.","Data marker","overlay-charts\u002Fdata-marker-chart",[285,1250,1251,1252,1256],{},"For a line, area or dot at a data value, the built-in\n",[1253,1254,1255],"a",{"href":247},"reference elements"," are often enough.",[289,1258,270],{"id":1259},"composables",[285,1261,1262,1264],{},[1253,1263,270],{"href":271}," lists every composable, what it returns and in which\ncharts it works.",[289,1266,1268],{"id":1267},"customized-deprecated","Customized (deprecated)",[285,1270,1271,1278],{},[1272,1273,1274,1277],"strong",{},[296,1275,1276],{},"Customized"," is deprecated and is removed in 2.0."," It still works in 1.0 and warns once\nin development. Move its slot content into a child component as shown above.",[305,1280,1282],{"className":307,"code":1281,"language":310,"meta":311,"style":311},"\u003C!-- Before -->\n\u003CLineChart :data=\"data\">\n  \u003CCustomized>\n    \u003Ctemplate #default=\"{ offset }\">\n      \u003Cline :x1=\"offset.left\" :y1=\"offset.top\" … \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FCustomized>\n\u003C\u002FLineChart>\n\n\u003C!-- After: PlotAreaTop calls usePlotArea() -->\n\u003CLineChart :data=\"data\">\n  \u003CPlotAreaTop \u002F>\n\u003C\u002FLineChart>\n",[296,1283,1284,1290,1312,1317,1322,1327,1332,1337,1345,1349,1354,1374,1379],{"__ignoreMap":311},[315,1285,1286],{"class":317,"line":318},[315,1287,1289],{"class":1288},"sHwdD","\u003C!-- Before -->\n",[315,1291,1292,1294,1297,1299,1302,1304,1306,1308,1310],{"class":317,"line":336},[315,1293,322],{"class":321},[315,1295,1296],{"class":325},"LineChart",[315,1298,978],{"class":321},[315,1300,1301],{"class":329},"data",[315,1303,382],{"class":321},[315,1305,444],{"class":321},[315,1307,1301],{"class":346},[315,1309,444],{"class":321},[315,1311,333],{"class":321},[315,1313,1314],{"class":317,"line":366},[315,1315,1316],{"class":346},"  \u003CCustomized>\n",[315,1318,1319],{"class":317,"line":373},[315,1320,1321],{"class":346},"    \u003Ctemplate #default=\"{ offset }\">\n",[315,1323,1324],{"class":317,"line":391},[315,1325,1326],{"class":346},"      \u003Cline :x1=\"offset.left\" :y1=\"offset.top\" … \u002F>\n",[315,1328,1329],{"class":317,"line":401},[315,1330,1331],{"class":346},"    \u003C\u002Ftemplate>\n",[315,1333,1334],{"class":317,"line":406},[315,1335,1336],{"class":346},"  \u003C\u002FCustomized>\n",[315,1338,1339,1341,1343],{"class":317,"line":416},[315,1340,394],{"class":321},[315,1342,1296],{"class":325},[315,1344,333],{"class":321},[315,1346,1347],{"class":317,"line":427},[315,1348,370],{"emptyLinePlaceholder":369},[315,1350,1351],{"class":317,"line":436},[315,1352,1353],{"class":1288},"\u003C!-- After: PlotAreaTop calls usePlotArea() -->\n",[315,1355,1356,1358,1360,1362,1364,1366,1368,1370,1372],{"class":317,"line":453},[315,1357,322],{"class":321},[315,1359,1296],{"class":325},[315,1361,978],{"class":321},[315,1363,1301],{"class":329},[315,1365,382],{"class":321},[315,1367,444],{"class":321},[315,1369,1301],{"class":346},[315,1371,444],{"class":321},[315,1373,333],{"class":321},[315,1375,1376],{"class":317,"line":468},[315,1377,1378],{"class":346},"  \u003CPlotAreaTop \u002F>\n",[315,1380,1381,1383,1385],{"class":317,"line":483},[315,1382,394],{"class":321},[315,1384,1296],{"class":325},[315,1386,333],{"class":321},[1388,1389,1390],"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":311,"searchDepth":336,"depth":336,"links":1392},[1393,1394,1395,1396],{"id":291,"depth":336,"text":292},{"id":647,"depth":336,"text":648},{"id":1259,"depth":336,"text":270},{"id":1267,"depth":336,"text":1268},"Draw your own SVG inside a chart with the default slot and the chart composables","md",null,{},{"icon":278},{"title":275,"description":1397},"roSii9BpmjkOYJBmonqJqKPBfQ2e51CQXwUO0D53aLg",[1405,1399],{"title":270,"path":271,"stem":272,"description":1406,"icon":273,"children":-1},"Read chart size, axis scales and tooltip state from your own components",1791811117238]