[{"data":1,"prerenderedAt":1412},["ShallowReactive",2],{"navigation_docs":3,"-components-custom-overlays":284,"-components-custom-overlays-surround":1409},[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":280,"body":286,"description":1402,"extension":1403,"links":1404,"meta":1405,"navigation":1406,"path":281,"seo":1407,"stem":282,"__hash__":1408},"docs\u002F4.components\u002F13.custom-overlays.md",{"type":287,"value":288,"toc":1396},"minimark",[289,293,298,309,645,650,654,664,1249,1254,1262,1265,1270,1274,1284,1392],[290,291,292],"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.",[294,295,297],"h2",{"id":296},"plot-area","Plot area",[290,299,300,304,305,308],{},[301,302,303],"code",{},"usePlotArea()"," returns the box inside the axes as ",[301,306,307],{},"{ x, y, width, height }"," in pixels.",[310,311,317],"pre",{"className":312,"code":313,"filename":314,"language":315,"meta":316,"style":316},"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","",[301,318,319,339,369,376,394,404,409,419,430,439,456,471,486,500,515,530,536,544,559,574,588,603,609,615,626,636],{"__ignoreMap":316},[320,321,324,328,332,336],"span",{"class":322,"line":323},"line",1,[320,325,327],{"class":326},"sMK4o","\u003C",[320,329,331],{"class":330},"swJcz","script",[320,333,335],{"class":334},"spNyl"," setup",[320,337,338],{"class":326},">\n",[320,340,342,346,349,353,356,359,362,366],{"class":322,"line":341},2,[320,343,345],{"class":344},"s7zQu","import",[320,347,348],{"class":326}," {",[320,350,352],{"class":351},"sTEyZ"," usePlotArea",[320,354,355],{"class":326}," }",[320,357,358],{"class":344}," from",[320,360,361],{"class":326}," '",[320,363,365],{"class":364},"sfazB","vccs",[320,367,368],{"class":326},"'\n",[320,370,372],{"class":322,"line":371},3,[320,373,375],{"emptyLinePlaceholder":374},true,"\n",[320,377,379,382,385,388,391],{"class":322,"line":378},4,[320,380,381],{"class":334},"const",[320,383,384],{"class":351}," plotArea ",[320,386,387],{"class":326},"=",[320,389,352],{"class":390},"s2Zo4",[320,392,393],{"class":351},"()\n",[320,395,397,400,402],{"class":322,"line":396},5,[320,398,399],{"class":326},"\u003C\u002F",[320,401,331],{"class":330},[320,403,338],{"class":326},[320,405,407],{"class":322,"line":406},6,[320,408,375],{"emptyLinePlaceholder":374},[320,410,412,414,417],{"class":322,"line":411},7,[320,413,327],{"class":326},[320,415,416],{"class":330},"template",[320,418,338],{"class":326},[320,420,422,425,428],{"class":322,"line":421},8,[320,423,424],{"class":326},"  \u003C",[320,426,427],{"class":330},"g",[320,429,338],{"class":326},[320,431,433,436],{"class":322,"line":432},9,[320,434,435],{"class":326},"    \u003C",[320,437,438],{"class":330},"line\n",[320,440,442,445,447,450,453],{"class":322,"line":441},10,[320,443,444],{"class":334},"      :x1",[320,446,387],{"class":326},[320,448,449],{"class":326},"\"",[320,451,452],{"class":364},"plotArea.x",[320,454,455],{"class":326},"\"\n",[320,457,459,462,464,466,469],{"class":322,"line":458},11,[320,460,461],{"class":334},"      :x2",[320,463,387],{"class":326},[320,465,449],{"class":326},[320,467,468],{"class":364},"plotArea.x + plotArea.width",[320,470,455],{"class":326},[320,472,474,477,479,481,484],{"class":322,"line":473},12,[320,475,476],{"class":334},"      :y1",[320,478,387],{"class":326},[320,480,449],{"class":326},[320,482,483],{"class":364},"plotArea.y",[320,485,455],{"class":326},[320,487,489,492,494,496,498],{"class":322,"line":488},13,[320,490,491],{"class":334},"      :y2",[320,493,387],{"class":326},[320,495,449],{"class":326},[320,497,483],{"class":364},[320,499,455],{"class":326},[320,501,503,506,508,510,513],{"class":322,"line":502},14,[320,504,505],{"class":334},"      stroke",[320,507,387],{"class":326},[320,509,449],{"class":326},[320,511,512],{"class":364},"#14b8a6",[320,514,455],{"class":326},[320,516,518,521,523,525,528],{"class":322,"line":517},15,[320,519,520],{"class":334},"      stroke-dasharray",[320,522,387],{"class":326},[320,524,449],{"class":326},[320,526,527],{"class":364},"4 4",[320,529,455],{"class":326},[320,531,533],{"class":322,"line":532},16,[320,534,535],{"class":326},"    \u002F>\n",[320,537,539,541],{"class":322,"line":538},17,[320,540,435],{"class":326},[320,542,543],{"class":330},"text\n",[320,545,547,550,552,554,557],{"class":322,"line":546},18,[320,548,549],{"class":334},"      :x",[320,551,387],{"class":326},[320,553,449],{"class":326},[320,555,556],{"class":364},"plotArea.x + 4",[320,558,455],{"class":326},[320,560,562,565,567,569,572],{"class":322,"line":561},19,[320,563,564],{"class":334},"      :y",[320,566,387],{"class":326},[320,568,449],{"class":326},[320,570,571],{"class":364},"plotArea.y - 6",[320,573,455],{"class":326},[320,575,577,580,582,584,586],{"class":322,"line":576},20,[320,578,579],{"class":334},"      fill",[320,581,387],{"class":326},[320,583,449],{"class":326},[320,585,512],{"class":364},[320,587,455],{"class":326},[320,589,591,594,596,598,601],{"class":322,"line":590},21,[320,592,593],{"class":334},"      font-size",[320,595,387],{"class":326},[320,597,449],{"class":326},[320,599,600],{"class":364},"12",[320,602,455],{"class":326},[320,604,606],{"class":322,"line":605},22,[320,607,608],{"class":326},"    >\n",[320,610,612],{"class":322,"line":611},23,[320,613,614],{"class":351},"      Plot area top\n",[320,616,618,621,624],{"class":322,"line":617},24,[320,619,620],{"class":326},"    \u003C\u002F",[320,622,623],{"class":330},"text",[320,625,338],{"class":326},[320,627,629,632,634],{"class":322,"line":628},25,[320,630,631],{"class":326},"  \u003C\u002F",[320,633,427],{"class":330},[320,635,338],{"class":326},[320,637,639,641,643],{"class":322,"line":638},26,[320,640,399],{"class":326},[320,642,416],{"class":330},[320,644,338],{"class":326},[646,647],"chart-demo",{"description":648,"name":297,"src":649},"A child component draws a line along the top of the plot area.","overlay-charts\u002Fplot-area-chart",[294,651,653],{"id":652},"data-values-to-pixels","Data values to pixels",[290,655,656,659,660,663],{},[301,657,658],{},"useXAxisScale()"," and ",[301,661,662],{},"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.",[310,665,668],{"className":312,"code":666,"filename":667,"language":315,"meta":316,"style":316},"\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",[301,669,670,680,699,724,728,746,778,804,829,837,841,854,867,889,924,953,995,1001,1009,1013,1021,1041,1048,1062,1076,1090,1103,1116,1131,1136,1143,1156,1170,1183,1196,1211,1216,1222,1231,1240],{"__ignoreMap":316},[320,671,672,674,676,678],{"class":322,"line":323},[320,673,327],{"class":326},[320,675,331],{"class":330},[320,677,335],{"class":334},[320,679,338],{"class":326},[320,681,682,684,686,689,691,693,695,697],{"class":322,"line":341},[320,683,345],{"class":344},[320,685,348],{"class":326},[320,687,688],{"class":351}," computed",[320,690,355],{"class":326},[320,692,358],{"class":344},[320,694,361],{"class":326},[320,696,315],{"class":364},[320,698,368],{"class":326},[320,700,701,703,705,708,711,714,716,718,720,722],{"class":322,"line":371},[320,702,345],{"class":344},[320,704,348],{"class":326},[320,706,707],{"class":351}," useXAxisScale",[320,709,710],{"class":326},",",[320,712,713],{"class":351}," useYAxisScale",[320,715,355],{"class":326},[320,717,358],{"class":344},[320,719,361],{"class":326},[320,721,365],{"class":364},[320,723,368],{"class":326},[320,725,726],{"class":322,"line":378},[320,727,375],{"emptyLinePlaceholder":374},[320,729,730,732,735,737,740,743],{"class":322,"line":396},[320,731,381],{"class":334},[320,733,734],{"class":351}," props ",[320,736,387],{"class":326},[320,738,739],{"class":390}," defineProps",[320,741,742],{"class":351},"(",[320,744,745],{"class":326},"{\n",[320,747,748,751,754,756,759,761,764,766,769,771,775],{"class":322,"line":406},[320,749,750],{"class":330},"  x",[320,752,753],{"class":326},":",[320,755,348],{"class":326},[320,757,758],{"class":330}," type",[320,760,753],{"class":326},[320,762,763],{"class":351}," String",[320,765,710],{"class":326},[320,767,768],{"class":330}," required",[320,770,753],{"class":326},[320,772,774],{"class":773},"sfNiH"," true",[320,776,777],{"class":326}," },\n",[320,779,780,783,785,787,789,791,794,796,798,800,802],{"class":322,"line":411},[320,781,782],{"class":330},"  y",[320,784,753],{"class":326},[320,786,348],{"class":326},[320,788,758],{"class":330},[320,790,753],{"class":326},[320,792,793],{"class":351}," Number",[320,795,710],{"class":326},[320,797,768],{"class":330},[320,799,753],{"class":326},[320,801,774],{"class":773},[320,803,777],{"class":326},[320,805,806,809,811,813,815,817,819,821,823,825,827],{"class":322,"line":421},[320,807,808],{"class":330},"  label",[320,810,753],{"class":326},[320,812,348],{"class":326},[320,814,758],{"class":330},[320,816,753],{"class":326},[320,818,763],{"class":351},[320,820,710],{"class":326},[320,822,768],{"class":330},[320,824,753],{"class":326},[320,826,774],{"class":773},[320,828,777],{"class":326},[320,830,831,834],{"class":322,"line":432},[320,832,833],{"class":326},"}",[320,835,836],{"class":351},")\n",[320,838,839],{"class":322,"line":441},[320,840,375],{"emptyLinePlaceholder":374},[320,842,843,845,848,850,852],{"class":322,"line":458},[320,844,381],{"class":334},[320,846,847],{"class":351}," xScale ",[320,849,387],{"class":326},[320,851,707],{"class":390},[320,853,393],{"class":351},[320,855,856,858,861,863,865],{"class":322,"line":473},[320,857,381],{"class":334},[320,859,860],{"class":351}," yScale ",[320,862,387],{"class":326},[320,864,713],{"class":390},[320,866,393],{"class":351},[320,868,869,871,874,876,878,880,883,886],{"class":322,"line":488},[320,870,381],{"class":334},[320,872,873],{"class":351}," point ",[320,875,387],{"class":326},[320,877,688],{"class":390},[320,879,742],{"class":351},[320,881,882],{"class":326},"()",[320,884,885],{"class":334}," =>",[320,887,888],{"class":326}," {\n",[320,890,891,894,897,900,903,906,909,912,914,917,919,922],{"class":322,"line":502},[320,892,893],{"class":334},"  const",[320,895,896],{"class":351}," cx",[320,898,899],{"class":326}," =",[320,901,902],{"class":351}," xScale",[320,904,905],{"class":326},".",[320,907,908],{"class":390},"value",[320,910,911],{"class":326},"?.",[320,913,742],{"class":330},[320,915,916],{"class":351},"props",[320,918,905],{"class":326},[320,920,921],{"class":351},"x",[320,923,836],{"class":330},[320,925,926,928,931,933,936,938,940,942,944,946,948,951],{"class":322,"line":517},[320,927,893],{"class":334},[320,929,930],{"class":351}," cy",[320,932,899],{"class":326},[320,934,935],{"class":351}," yScale",[320,937,905],{"class":326},[320,939,908],{"class":390},[320,941,911],{"class":326},[320,943,742],{"class":330},[320,945,916],{"class":351},[320,947,905],{"class":326},[320,949,950],{"class":351},"y",[320,952,836],{"class":330},[320,954,955,958,960,963,966,969,971,973,975,978,981,984,986,988,990,992],{"class":322,"line":532},[320,956,957],{"class":344},"  return",[320,959,896],{"class":351},[320,961,962],{"class":326}," ==",[320,964,965],{"class":326}," null",[320,967,968],{"class":326}," ||",[320,970,930],{"class":351},[320,972,962],{"class":326},[320,974,965],{"class":326},[320,976,977],{"class":326}," ?",[320,979,980],{"class":326}," undefined",[320,982,983],{"class":326}," :",[320,985,348],{"class":326},[320,987,896],{"class":351},[320,989,710],{"class":326},[320,991,930],{"class":351},[320,993,994],{"class":326}," }\n",[320,996,997,999],{"class":322,"line":538},[320,998,833],{"class":326},[320,1000,836],{"class":351},[320,1002,1003,1005,1007],{"class":322,"line":546},[320,1004,399],{"class":326},[320,1006,331],{"class":330},[320,1008,338],{"class":326},[320,1010,1011],{"class":322,"line":561},[320,1012,375],{"emptyLinePlaceholder":374},[320,1014,1015,1017,1019],{"class":322,"line":576},[320,1016,327],{"class":326},[320,1018,416],{"class":330},[320,1020,338],{"class":326},[320,1022,1023,1025,1027,1030,1032,1034,1037,1039],{"class":322,"line":590},[320,1024,424],{"class":326},[320,1026,427],{"class":330},[320,1028,1029],{"class":334}," v-if",[320,1031,387],{"class":326},[320,1033,449],{"class":326},[320,1035,1036],{"class":364},"point",[320,1038,449],{"class":326},[320,1040,338],{"class":326},[320,1042,1043,1045],{"class":322,"line":605},[320,1044,435],{"class":326},[320,1046,1047],{"class":330},"circle\n",[320,1049,1050,1053,1055,1057,1060],{"class":322,"line":611},[320,1051,1052],{"class":334},"      :cx",[320,1054,387],{"class":326},[320,1056,449],{"class":326},[320,1058,1059],{"class":364},"point.cx",[320,1061,455],{"class":326},[320,1063,1064,1067,1069,1071,1074],{"class":322,"line":617},[320,1065,1066],{"class":334},"      :cy",[320,1068,387],{"class":326},[320,1070,449],{"class":326},[320,1072,1073],{"class":364},"point.cy",[320,1075,455],{"class":326},[320,1077,1078,1081,1083,1085,1088],{"class":322,"line":628},[320,1079,1080],{"class":334},"      r",[320,1082,387],{"class":326},[320,1084,449],{"class":326},[320,1086,1087],{"class":364},"6",[320,1089,455],{"class":326},[320,1091,1092,1094,1096,1098,1101],{"class":322,"line":638},[320,1093,579],{"class":334},[320,1095,387],{"class":326},[320,1097,449],{"class":326},[320,1099,1100],{"class":364},"none",[320,1102,455],{"class":326},[320,1104,1106,1108,1110,1112,1114],{"class":322,"line":1105},27,[320,1107,505],{"class":334},[320,1109,387],{"class":326},[320,1111,449],{"class":326},[320,1113,512],{"class":364},[320,1115,455],{"class":326},[320,1117,1119,1122,1124,1126,1129],{"class":322,"line":1118},28,[320,1120,1121],{"class":334},"      stroke-width",[320,1123,387],{"class":326},[320,1125,449],{"class":326},[320,1127,1128],{"class":364},"2",[320,1130,455],{"class":326},[320,1132,1134],{"class":322,"line":1133},29,[320,1135,535],{"class":326},[320,1137,1139,1141],{"class":322,"line":1138},30,[320,1140,435],{"class":326},[320,1142,543],{"class":330},[320,1144,1146,1148,1150,1152,1154],{"class":322,"line":1145},31,[320,1147,549],{"class":334},[320,1149,387],{"class":326},[320,1151,449],{"class":326},[320,1153,1059],{"class":364},[320,1155,455],{"class":326},[320,1157,1159,1161,1163,1165,1168],{"class":322,"line":1158},32,[320,1160,564],{"class":334},[320,1162,387],{"class":326},[320,1164,449],{"class":326},[320,1166,1167],{"class":364},"point.cy - 12",[320,1169,455],{"class":326},[320,1171,1173,1175,1177,1179,1181],{"class":322,"line":1172},33,[320,1174,579],{"class":334},[320,1176,387],{"class":326},[320,1178,449],{"class":326},[320,1180,512],{"class":364},[320,1182,455],{"class":326},[320,1184,1186,1188,1190,1192,1194],{"class":322,"line":1185},34,[320,1187,593],{"class":334},[320,1189,387],{"class":326},[320,1191,449],{"class":326},[320,1193,600],{"class":364},[320,1195,455],{"class":326},[320,1197,1199,1202,1204,1206,1209],{"class":322,"line":1198},35,[320,1200,1201],{"class":334},"      text-anchor",[320,1203,387],{"class":326},[320,1205,449],{"class":326},[320,1207,1208],{"class":364},"middle",[320,1210,455],{"class":326},[320,1212,1214],{"class":322,"line":1213},36,[320,1215,608],{"class":326},[320,1217,1219],{"class":322,"line":1218},37,[320,1220,1221],{"class":351},"      {{ label }}\n",[320,1223,1225,1227,1229],{"class":322,"line":1224},38,[320,1226,620],{"class":326},[320,1228,623],{"class":330},[320,1230,338],{"class":326},[320,1232,1234,1236,1238],{"class":322,"line":1233},39,[320,1235,631],{"class":326},[320,1237,427],{"class":330},[320,1239,338],{"class":326},[320,1241,1243,1245,1247],{"class":322,"line":1242},40,[320,1244,399],{"class":326},[320,1246,416],{"class":330},[320,1248,338],{"class":326},[646,1250],{"description":1251,"name":1252,"src":1253},"A child component marks one data point with the axis scales.","Data marker","overlay-charts\u002Fdata-marker-chart",[290,1255,1256,1257,1261],{},"For a line, area or dot at a data value, the built-in\n",[1258,1259,1260],"a",{"href":252},"reference elements"," are often enough.",[294,1263,275],{"id":1264},"composables",[290,1266,1267,1269],{},[1258,1268,275],{"href":276}," lists every composable, what it returns and in which\ncharts it works.",[294,1271,1273],{"id":1272},"customized-deprecated","Customized (deprecated)",[290,1275,1276,1283],{},[1277,1278,1279,1282],"strong",{},[301,1280,1281],{},"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.",[310,1285,1287],{"className":312,"code":1286,"language":315,"meta":316,"style":316},"\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",[301,1288,1289,1295,1317,1322,1327,1332,1337,1342,1350,1354,1359,1379,1384],{"__ignoreMap":316},[320,1290,1291],{"class":322,"line":323},[320,1292,1294],{"class":1293},"sHwdD","\u003C!-- Before -->\n",[320,1296,1297,1299,1302,1304,1307,1309,1311,1313,1315],{"class":322,"line":341},[320,1298,327],{"class":326},[320,1300,1301],{"class":330},"LineChart",[320,1303,983],{"class":326},[320,1305,1306],{"class":334},"data",[320,1308,387],{"class":326},[320,1310,449],{"class":326},[320,1312,1306],{"class":351},[320,1314,449],{"class":326},[320,1316,338],{"class":326},[320,1318,1319],{"class":322,"line":371},[320,1320,1321],{"class":351},"  \u003CCustomized>\n",[320,1323,1324],{"class":322,"line":378},[320,1325,1326],{"class":351},"    \u003Ctemplate #default=\"{ offset }\">\n",[320,1328,1329],{"class":322,"line":396},[320,1330,1331],{"class":351},"      \u003Cline :x1=\"offset.left\" :y1=\"offset.top\" … \u002F>\n",[320,1333,1334],{"class":322,"line":406},[320,1335,1336],{"class":351},"    \u003C\u002Ftemplate>\n",[320,1338,1339],{"class":322,"line":411},[320,1340,1341],{"class":351},"  \u003C\u002FCustomized>\n",[320,1343,1344,1346,1348],{"class":322,"line":421},[320,1345,399],{"class":326},[320,1347,1301],{"class":330},[320,1349,338],{"class":326},[320,1351,1352],{"class":322,"line":432},[320,1353,375],{"emptyLinePlaceholder":374},[320,1355,1356],{"class":322,"line":441},[320,1357,1358],{"class":1293},"\u003C!-- After: PlotAreaTop calls usePlotArea() -->\n",[320,1360,1361,1363,1365,1367,1369,1371,1373,1375,1377],{"class":322,"line":458},[320,1362,327],{"class":326},[320,1364,1301],{"class":330},[320,1366,983],{"class":326},[320,1368,1306],{"class":334},[320,1370,387],{"class":326},[320,1372,449],{"class":326},[320,1374,1306],{"class":351},[320,1376,449],{"class":326},[320,1378,338],{"class":326},[320,1380,1381],{"class":322,"line":473},[320,1382,1383],{"class":351},"  \u003CPlotAreaTop \u002F>\n",[320,1385,1386,1388,1390],{"class":322,"line":488},[320,1387,399],{"class":326},[320,1389,1301],{"class":330},[320,1391,338],{"class":326},[1393,1394,1395],"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":316,"searchDepth":341,"depth":341,"links":1397},[1398,1399,1400,1401],{"id":296,"depth":341,"text":297},{"id":652,"depth":341,"text":653},{"id":1264,"depth":341,"text":275},{"id":1272,"depth":341,"text":1273},"Draw your own SVG inside a chart with the default slot and the chart composables","md",null,{},{"icon":283},{"title":280,"description":1402},"roSii9BpmjkOYJBmonqJqKPBfQ2e51CQXwUO0D53aLg",[1410,1404],{"title":275,"path":276,"stem":277,"description":1411,"icon":278,"children":-1},"Read chart size, axis scales and tooltip state from your own components",1793527171811]