[{"data":1,"prerenderedAt":2195},["ShallowReactive",2],{"navigation_docs":3,"-guides-shadcn-vue":284,"-guides-shadcn-vue-surround":2190},[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":103,"body":286,"description":2183,"extension":2184,"links":2185,"meta":2186,"navigation":2187,"path":104,"seo":2188,"stem":105,"__hash__":2189},"docs\u002F2.guides\u002F16.shadcn-vue.md",{"type":287,"value":288,"toc":2179},"minimark",[289,308,312,884,1515,1519,2169,2176],[290,291,292,293,297,298,297,301,297,304,307],"p",{},"vccs works with the shadcn-vue chart pattern (",[294,295,296],"code",{},"ChartContainer",", ",[294,299,300],{},"ChartTooltipContent",[294,302,303],{},"ChartLegendContent",[294,305,306],{},"ChartConfig","). The container maps vccs's CSS variables to your shadcn theme once, so charts follow light and dark mode with no attribute overrides.",[309,310,296],"h2",{"id":311},"chartcontainer",[313,314,320],"pre",{"className":315,"code":316,"filename":317,"language":318,"meta":319,"style":319},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport type { ChartConfig } from '.\u002Ftypes'\nimport { cn } from '@\u002Flib\u002Futils'\nimport ChartStyle from '.\u002FChartStyle.vue'\n\nconst props = defineProps\u003C{\n  id?: string\n  class?: HTMLAttributes['class']\n  config: ChartConfig\n}>()\n\nconst uniqueId = useId()\nconst chartId = computed(() => `chart-${props.id || uniqueId.replace(\u002F:\u002Fg, '')}`)\n\nprovide('chart-config', computed(() => props.config))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- vccs reads its default colors from --v-charts-* variables; map them to the theme once. -->\n  \u003Cdiv\n    data-slot=\"chart\"\n    :data-chart=\"chartId\"\n    :class=\"cn(\n      'flex aspect-video justify-center text-xs',\n      '[--v-charts-grid:var(--border)] [--v-charts-axis:var(--border)] [--v-charts-text:var(--muted-foreground)]',\n      '[--v-charts-cursor:var(--border)] [--v-charts-muted:var(--muted)] [--v-charts-background:var(--background)]',\n      '[--v-charts-inactive:var(--muted-foreground)] [--v-charts-focus:var(--ring)]',\n      '[&_.v-charts-surface]:outline-hidden [&_.v-charts-layer]:outline-hidden [&_.v-charts-sector]:outline-hidden',\n      props.class,\n    )\"\n  >\n    \u003CChartStyle\n      :id=\"chartId\"\n      :config=\"config\"\n    \u002F>\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","components\u002Fui\u002Fchart\u002FChartContainer.vue","vue","",[294,321,322,357,388,411,432,450,457,475,488,512,524,533,538,553,632,637,670,680,685,695,702,711,727,742,755,761,767,773,779,785,791,799,805,814,831,847,853,864,875],{"__ignoreMap":319},[323,324,327,331,335,339,342,345,348,352,354],"span",{"class":325,"line":326},"line",1,[323,328,330],{"class":329},"sMK4o","\u003C",[323,332,334],{"class":333},"swJcz","script",[323,336,338],{"class":337},"spNyl"," setup",[323,340,341],{"class":337}," lang",[323,343,344],{"class":329},"=",[323,346,347],{"class":329},"\"",[323,349,351],{"class":350},"sfazB","ts",[323,353,347],{"class":329},[323,355,356],{"class":329},">\n",[323,358,360,364,367,370,374,377,380,383,385],{"class":325,"line":359},2,[323,361,363],{"class":362},"s7zQu","import",[323,365,366],{"class":362}," type",[323,368,369],{"class":329}," {",[323,371,373],{"class":372},"sTEyZ"," HTMLAttributes",[323,375,376],{"class":329}," }",[323,378,379],{"class":362}," from",[323,381,382],{"class":329}," '",[323,384,318],{"class":350},[323,386,387],{"class":329},"'\n",[323,389,391,393,395,397,400,402,404,406,409],{"class":325,"line":390},3,[323,392,363],{"class":362},[323,394,366],{"class":362},[323,396,369],{"class":329},[323,398,399],{"class":372}," ChartConfig",[323,401,376],{"class":329},[323,403,379],{"class":362},[323,405,382],{"class":329},[323,407,408],{"class":350},".\u002Ftypes",[323,410,387],{"class":329},[323,412,414,416,418,421,423,425,427,430],{"class":325,"line":413},4,[323,415,363],{"class":362},[323,417,369],{"class":329},[323,419,420],{"class":372}," cn",[323,422,376],{"class":329},[323,424,379],{"class":362},[323,426,382],{"class":329},[323,428,429],{"class":350},"@\u002Flib\u002Futils",[323,431,387],{"class":329},[323,433,435,437,440,443,445,448],{"class":325,"line":434},5,[323,436,363],{"class":362},[323,438,439],{"class":372}," ChartStyle ",[323,441,442],{"class":362},"from",[323,444,382],{"class":329},[323,446,447],{"class":350},".\u002FChartStyle.vue",[323,449,387],{"class":329},[323,451,453],{"class":325,"line":452},6,[323,454,456],{"emptyLinePlaceholder":455},true,"\n",[323,458,460,463,466,468,472],{"class":325,"line":459},7,[323,461,462],{"class":337},"const",[323,464,465],{"class":372}," props ",[323,467,344],{"class":329},[323,469,471],{"class":470},"s2Zo4"," defineProps",[323,473,474],{"class":329},"\u003C{\n",[323,476,478,481,484],{"class":325,"line":477},8,[323,479,480],{"class":333},"  id",[323,482,483],{"class":329},"?:",[323,485,487],{"class":486},"sBMFI"," string\n",[323,489,491,494,496,498,501,504,507,509],{"class":325,"line":490},9,[323,492,493],{"class":333},"  class",[323,495,483],{"class":329},[323,497,373],{"class":486},[323,499,500],{"class":372},"[",[323,502,503],{"class":329},"'",[323,505,506],{"class":350},"class",[323,508,503],{"class":329},[323,510,511],{"class":372},"]\n",[323,513,515,518,521],{"class":325,"line":514},10,[323,516,517],{"class":333},"  config",[323,519,520],{"class":329},":",[323,522,523],{"class":486}," ChartConfig\n",[323,525,527,530],{"class":325,"line":526},11,[323,528,529],{"class":329},"}>",[323,531,532],{"class":372},"()\n",[323,534,536],{"class":325,"line":535},12,[323,537,456],{"emptyLinePlaceholder":455},[323,539,541,543,546,548,551],{"class":325,"line":540},13,[323,542,462],{"class":337},[323,544,545],{"class":372}," uniqueId ",[323,547,344],{"class":329},[323,549,550],{"class":470}," useId",[323,552,532],{"class":372},[323,554,556,558,561,563,566,569,572,575,578,581,584,587,590,593,596,599,601,604,606,609,611,613,617,620,623,626,629],{"class":325,"line":555},14,[323,557,462],{"class":337},[323,559,560],{"class":372}," chartId ",[323,562,344],{"class":329},[323,564,565],{"class":470}," computed",[323,567,568],{"class":372},"(",[323,570,571],{"class":329},"()",[323,573,574],{"class":337}," =>",[323,576,577],{"class":329}," `",[323,579,580],{"class":350},"chart-",[323,582,583],{"class":329},"${",[323,585,586],{"class":372},"props",[323,588,589],{"class":329},".",[323,591,592],{"class":372},"id ",[323,594,595],{"class":329},"||",[323,597,598],{"class":372}," uniqueId",[323,600,589],{"class":329},[323,602,603],{"class":470},"replace",[323,605,568],{"class":372},[323,607,608],{"class":329},"\u002F",[323,610,520],{"class":350},[323,612,608],{"class":329},[323,614,616],{"class":615},"sbssI","g",[323,618,619],{"class":329},",",[323,621,622],{"class":329}," ''",[323,624,625],{"class":372},")",[323,627,628],{"class":329},"}`",[323,630,631],{"class":372},")\n",[323,633,635],{"class":325,"line":634},15,[323,636,456],{"emptyLinePlaceholder":455},[323,638,640,643,645,647,650,652,654,656,658,660,662,665,667],{"class":325,"line":639},16,[323,641,642],{"class":470},"provide",[323,644,568],{"class":372},[323,646,503],{"class":329},[323,648,649],{"class":350},"chart-config",[323,651,503],{"class":329},[323,653,619],{"class":329},[323,655,565],{"class":470},[323,657,568],{"class":372},[323,659,571],{"class":329},[323,661,574],{"class":337},[323,663,664],{"class":372}," props",[323,666,589],{"class":329},[323,668,669],{"class":372},"config))\n",[323,671,673,676,678],{"class":325,"line":672},17,[323,674,675],{"class":329},"\u003C\u002F",[323,677,334],{"class":333},[323,679,356],{"class":329},[323,681,683],{"class":325,"line":682},18,[323,684,456],{"emptyLinePlaceholder":455},[323,686,688,690,693],{"class":325,"line":687},19,[323,689,330],{"class":329},[323,691,692],{"class":333},"template",[323,694,356],{"class":329},[323,696,698],{"class":325,"line":697},20,[323,699,701],{"class":700},"sHwdD","  \u003C!-- vccs reads its default colors from --v-charts-* variables; map them to the theme once. -->\n",[323,703,705,708],{"class":325,"line":704},21,[323,706,707],{"class":329},"  \u003C",[323,709,710],{"class":333},"div\n",[323,712,714,717,719,721,724],{"class":325,"line":713},22,[323,715,716],{"class":337},"    data-slot",[323,718,344],{"class":329},[323,720,347],{"class":329},[323,722,723],{"class":350},"chart",[323,725,726],{"class":329},"\"\n",[323,728,730,733,735,737,740],{"class":325,"line":729},23,[323,731,732],{"class":337},"    :data-chart",[323,734,344],{"class":329},[323,736,347],{"class":329},[323,738,739],{"class":350},"chartId",[323,741,726],{"class":329},[323,743,745,748,750,752],{"class":325,"line":744},24,[323,746,747],{"class":337},"    :class",[323,749,344],{"class":329},[323,751,347],{"class":329},[323,753,754],{"class":350},"cn(\n",[323,756,758],{"class":325,"line":757},25,[323,759,760],{"class":350},"      'flex aspect-video justify-center text-xs',\n",[323,762,764],{"class":325,"line":763},26,[323,765,766],{"class":350},"      '[--v-charts-grid:var(--border)] [--v-charts-axis:var(--border)] [--v-charts-text:var(--muted-foreground)]',\n",[323,768,770],{"class":325,"line":769},27,[323,771,772],{"class":350},"      '[--v-charts-cursor:var(--border)] [--v-charts-muted:var(--muted)] [--v-charts-background:var(--background)]',\n",[323,774,776],{"class":325,"line":775},28,[323,777,778],{"class":350},"      '[--v-charts-inactive:var(--muted-foreground)] [--v-charts-focus:var(--ring)]',\n",[323,780,782],{"class":325,"line":781},29,[323,783,784],{"class":350},"      '[&_.v-charts-surface]:outline-hidden [&_.v-charts-layer]:outline-hidden [&_.v-charts-sector]:outline-hidden',\n",[323,786,788],{"class":325,"line":787},30,[323,789,790],{"class":350},"      props.class,\n",[323,792,794,797],{"class":325,"line":793},31,[323,795,796],{"class":350},"    )",[323,798,726],{"class":329},[323,800,802],{"class":325,"line":801},32,[323,803,804],{"class":329},"  >\n",[323,806,808,811],{"class":325,"line":807},33,[323,809,810],{"class":329},"    \u003C",[323,812,813],{"class":333},"ChartStyle\n",[323,815,817,820,823,825,827,829],{"class":325,"line":816},34,[323,818,819],{"class":329},"      :",[323,821,822],{"class":337},"id",[323,824,344],{"class":329},[323,826,347],{"class":329},[323,828,739],{"class":372},[323,830,726],{"class":329},[323,832,834,836,839,841,843,845],{"class":325,"line":833},35,[323,835,819],{"class":329},[323,837,838],{"class":337},"config",[323,840,344],{"class":329},[323,842,347],{"class":329},[323,844,838],{"class":372},[323,846,726],{"class":329},[323,848,850],{"class":325,"line":849},36,[323,851,852],{"class":329},"    \u002F>\n",[323,854,856,858,861],{"class":325,"line":855},37,[323,857,810],{"class":329},[323,859,860],{"class":333},"slot",[323,862,863],{"class":329}," \u002F>\n",[323,865,867,870,873],{"class":325,"line":866},38,[323,868,869],{"class":329},"  \u003C\u002F",[323,871,872],{"class":333},"div",[323,874,356],{"class":329},[323,876,878,880,882],{"class":325,"line":877},39,[323,879,675],{"class":329},[323,881,692],{"class":333},[323,883,356],{"class":329},[313,885,888],{"className":315,"code":886,"filename":887,"language":318,"meta":319,"style":319},"\u003Cscript setup lang=\"ts\">\nimport type { ChartConfig } from '.\u002Ftypes'\n\nconst props = defineProps\u003C{\n  id: string\n  config: ChartConfig\n}>()\n\n\u002F\u002F Same contract as shadcn: `color` for both themes, or `theme: { light, dark }`.\nconst THEMES = { light: '', dark: '.dark' } as const\n\u002F\u002F A literal \u003Cstyle> in a template is stripped by the SFC compiler.\nconst styleTag = 'style'\n\nconst css = computed(() => {\n  const entries = Object.entries(props.config).filter(([, item]) => item.theme || item.color)\n  if (!entries.length)\n    return ''\n  return Object.entries(THEMES).map(([theme, prefix]) => {\n    const vars = entries\n      .map(([key, item]) => {\n        const color = item.theme?.[theme as keyof typeof THEMES] ?? item.color\n        return color ? `  --color-${key}: ${color};` : null\n      })\n      .filter(Boolean)\n      .join('\\n')\n    return `${prefix} [data-chart=${props.id}] {\\n${vars}\\n}`\n  }).join('\\n')\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ccomponent\n    :is=\"styleTag\"\n    v-if=\"css\"\n  >\n    {{ css }}\n  \u003C\u002Fcomponent>\n\u003C\u002Ftemplate>\n","components\u002Fui\u002Fchart\u002FChartStyle.vue",[294,889,890,910,930,934,946,954,962,968,972,977,1017,1022,1038,1042,1062,1129,1149,1157,1198,1211,1235,1282,1325,1332,1345,1363,1407,1428,1434,1442,1446,1454,1461,1475,1489,1493,1498,1507],{"__ignoreMap":319},[323,891,892,894,896,898,900,902,904,906,908],{"class":325,"line":326},[323,893,330],{"class":329},[323,895,334],{"class":333},[323,897,338],{"class":337},[323,899,341],{"class":337},[323,901,344],{"class":329},[323,903,347],{"class":329},[323,905,351],{"class":350},[323,907,347],{"class":329},[323,909,356],{"class":329},[323,911,912,914,916,918,920,922,924,926,928],{"class":325,"line":359},[323,913,363],{"class":362},[323,915,366],{"class":362},[323,917,369],{"class":329},[323,919,399],{"class":372},[323,921,376],{"class":329},[323,923,379],{"class":362},[323,925,382],{"class":329},[323,927,408],{"class":350},[323,929,387],{"class":329},[323,931,932],{"class":325,"line":390},[323,933,456],{"emptyLinePlaceholder":455},[323,935,936,938,940,942,944],{"class":325,"line":413},[323,937,462],{"class":337},[323,939,465],{"class":372},[323,941,344],{"class":329},[323,943,471],{"class":470},[323,945,474],{"class":329},[323,947,948,950,952],{"class":325,"line":434},[323,949,480],{"class":333},[323,951,520],{"class":329},[323,953,487],{"class":486},[323,955,956,958,960],{"class":325,"line":452},[323,957,517],{"class":333},[323,959,520],{"class":329},[323,961,523],{"class":486},[323,963,964,966],{"class":325,"line":459},[323,965,529],{"class":329},[323,967,532],{"class":372},[323,969,970],{"class":325,"line":477},[323,971,456],{"emptyLinePlaceholder":455},[323,973,974],{"class":325,"line":490},[323,975,976],{"class":700},"\u002F\u002F Same contract as shadcn: `color` for both themes, or `theme: { light, dark }`.\n",[323,978,979,981,984,986,988,991,993,995,997,1000,1002,1004,1007,1009,1011,1014],{"class":325,"line":514},[323,980,462],{"class":337},[323,982,983],{"class":372}," THEMES ",[323,985,344],{"class":329},[323,987,369],{"class":329},[323,989,990],{"class":333}," light",[323,992,520],{"class":329},[323,994,622],{"class":329},[323,996,619],{"class":329},[323,998,999],{"class":333}," dark",[323,1001,520],{"class":329},[323,1003,382],{"class":329},[323,1005,1006],{"class":350},".dark",[323,1008,503],{"class":329},[323,1010,376],{"class":329},[323,1012,1013],{"class":362}," as",[323,1015,1016],{"class":337}," const\n",[323,1018,1019],{"class":325,"line":526},[323,1020,1021],{"class":700},"\u002F\u002F A literal \u003Cstyle> in a template is stripped by the SFC compiler.\n",[323,1023,1024,1026,1029,1031,1033,1036],{"class":325,"line":535},[323,1025,462],{"class":337},[323,1027,1028],{"class":372}," styleTag ",[323,1030,344],{"class":329},[323,1032,382],{"class":329},[323,1034,1035],{"class":350},"style",[323,1037,387],{"class":329},[323,1039,1040],{"class":325,"line":540},[323,1041,456],{"emptyLinePlaceholder":455},[323,1043,1044,1046,1049,1051,1053,1055,1057,1059],{"class":325,"line":555},[323,1045,462],{"class":337},[323,1047,1048],{"class":372}," css ",[323,1050,344],{"class":329},[323,1052,565],{"class":470},[323,1054,568],{"class":372},[323,1056,571],{"class":329},[323,1058,574],{"class":337},[323,1060,1061],{"class":329}," {\n",[323,1063,1064,1067,1070,1073,1076,1078,1081,1083,1085,1087,1089,1091,1093,1096,1098,1101,1105,1108,1110,1112,1114,1117,1120,1122,1124,1127],{"class":325,"line":634},[323,1065,1066],{"class":337},"  const",[323,1068,1069],{"class":372}," entries",[323,1071,1072],{"class":329}," =",[323,1074,1075],{"class":372}," Object",[323,1077,589],{"class":329},[323,1079,1080],{"class":470},"entries",[323,1082,568],{"class":333},[323,1084,586],{"class":372},[323,1086,589],{"class":329},[323,1088,838],{"class":372},[323,1090,625],{"class":333},[323,1092,589],{"class":329},[323,1094,1095],{"class":470},"filter",[323,1097,568],{"class":333},[323,1099,1100],{"class":329},"([,",[323,1102,1104],{"class":1103},"sHdIc"," item",[323,1106,1107],{"class":329},"])",[323,1109,574],{"class":337},[323,1111,1104],{"class":372},[323,1113,589],{"class":329},[323,1115,1116],{"class":372},"theme",[323,1118,1119],{"class":329}," ||",[323,1121,1104],{"class":372},[323,1123,589],{"class":329},[323,1125,1126],{"class":372},"color",[323,1128,631],{"class":333},[323,1130,1131,1134,1137,1140,1142,1144,1147],{"class":325,"line":639},[323,1132,1133],{"class":362},"  if",[323,1135,1136],{"class":333}," (",[323,1138,1139],{"class":329},"!",[323,1141,1080],{"class":372},[323,1143,589],{"class":329},[323,1145,1146],{"class":372},"length",[323,1148,631],{"class":333},[323,1150,1151,1154],{"class":325,"line":672},[323,1152,1153],{"class":362},"    return",[323,1155,1156],{"class":329}," ''\n",[323,1158,1159,1162,1164,1166,1168,1170,1173,1175,1177,1180,1182,1185,1187,1189,1192,1194,1196],{"class":325,"line":682},[323,1160,1161],{"class":362},"  return",[323,1163,1075],{"class":372},[323,1165,589],{"class":329},[323,1167,1080],{"class":470},[323,1169,568],{"class":333},[323,1171,1172],{"class":372},"THEMES",[323,1174,625],{"class":333},[323,1176,589],{"class":329},[323,1178,1179],{"class":470},"map",[323,1181,568],{"class":333},[323,1183,1184],{"class":329},"([",[323,1186,1116],{"class":1103},[323,1188,619],{"class":329},[323,1190,1191],{"class":1103}," prefix",[323,1193,1107],{"class":329},[323,1195,574],{"class":337},[323,1197,1061],{"class":329},[323,1199,1200,1203,1206,1208],{"class":325,"line":687},[323,1201,1202],{"class":337},"    const",[323,1204,1205],{"class":372}," vars",[323,1207,1072],{"class":329},[323,1209,1210],{"class":372}," entries\n",[323,1212,1213,1216,1218,1220,1222,1225,1227,1229,1231,1233],{"class":325,"line":697},[323,1214,1215],{"class":329},"      .",[323,1217,1179],{"class":470},[323,1219,568],{"class":333},[323,1221,1184],{"class":329},[323,1223,1224],{"class":1103},"key",[323,1226,619],{"class":329},[323,1228,1104],{"class":1103},[323,1230,1107],{"class":329},[323,1232,574],{"class":337},[323,1234,1061],{"class":329},[323,1236,1237,1240,1243,1245,1247,1249,1251,1254,1256,1258,1260,1263,1266,1269,1272,1275,1277,1279],{"class":325,"line":704},[323,1238,1239],{"class":337},"        const",[323,1241,1242],{"class":372}," color",[323,1244,1072],{"class":329},[323,1246,1104],{"class":372},[323,1248,589],{"class":329},[323,1250,1116],{"class":372},[323,1252,1253],{"class":329},"?.",[323,1255,500],{"class":333},[323,1257,1116],{"class":372},[323,1259,1013],{"class":362},[323,1261,1262],{"class":329}," keyof",[323,1264,1265],{"class":329}," typeof",[323,1267,1268],{"class":372}," THEMES",[323,1270,1271],{"class":333},"] ",[323,1273,1274],{"class":329},"??",[323,1276,1104],{"class":372},[323,1278,589],{"class":329},[323,1280,1281],{"class":372},"color\n",[323,1283,1284,1287,1289,1292,1294,1297,1299,1301,1304,1307,1309,1311,1313,1316,1319,1322],{"class":325,"line":713},[323,1285,1286],{"class":362},"        return",[323,1288,1242],{"class":372},[323,1290,1291],{"class":329}," ?",[323,1293,577],{"class":329},[323,1295,1296],{"class":350},"  --color-",[323,1298,583],{"class":329},[323,1300,1224],{"class":372},[323,1302,1303],{"class":329},"}",[323,1305,1306],{"class":350},": ",[323,1308,583],{"class":329},[323,1310,1126],{"class":372},[323,1312,1303],{"class":329},[323,1314,1315],{"class":350},";",[323,1317,1318],{"class":329},"`",[323,1320,1321],{"class":329}," :",[323,1323,1324],{"class":329}," null\n",[323,1326,1327,1330],{"class":325,"line":729},[323,1328,1329],{"class":329},"      }",[323,1331,631],{"class":333},[323,1333,1334,1336,1338,1340,1343],{"class":325,"line":744},[323,1335,1215],{"class":329},[323,1337,1095],{"class":470},[323,1339,568],{"class":333},[323,1341,1342],{"class":372},"Boolean",[323,1344,631],{"class":333},[323,1346,1347,1349,1352,1354,1356,1359,1361],{"class":325,"line":757},[323,1348,1215],{"class":329},[323,1350,1351],{"class":470},"join",[323,1353,568],{"class":333},[323,1355,503],{"class":329},[323,1357,1358],{"class":372},"\\n",[323,1360,503],{"class":329},[323,1362,631],{"class":333},[323,1364,1365,1367,1370,1373,1375,1378,1380,1382,1384,1386,1388,1391,1393,1395,1398,1400,1402,1404],{"class":325,"line":763},[323,1366,1153],{"class":362},[323,1368,1369],{"class":329}," `${",[323,1371,1372],{"class":372},"prefix",[323,1374,1303],{"class":329},[323,1376,1377],{"class":350}," [data-chart=",[323,1379,583],{"class":329},[323,1381,586],{"class":372},[323,1383,589],{"class":329},[323,1385,822],{"class":372},[323,1387,1303],{"class":329},[323,1389,1390],{"class":350},"] {",[323,1392,1358],{"class":372},[323,1394,583],{"class":329},[323,1396,1397],{"class":372},"vars",[323,1399,1303],{"class":329},[323,1401,1358],{"class":372},[323,1403,1303],{"class":350},[323,1405,1406],{"class":329},"`\n",[323,1408,1409,1412,1414,1416,1418,1420,1422,1424,1426],{"class":325,"line":769},[323,1410,1411],{"class":329},"  }",[323,1413,625],{"class":333},[323,1415,589],{"class":329},[323,1417,1351],{"class":470},[323,1419,568],{"class":333},[323,1421,503],{"class":329},[323,1423,1358],{"class":372},[323,1425,503],{"class":329},[323,1427,631],{"class":333},[323,1429,1430,1432],{"class":325,"line":775},[323,1431,1303],{"class":329},[323,1433,631],{"class":372},[323,1435,1436,1438,1440],{"class":325,"line":781},[323,1437,675],{"class":329},[323,1439,334],{"class":333},[323,1441,356],{"class":329},[323,1443,1444],{"class":325,"line":787},[323,1445,456],{"emptyLinePlaceholder":455},[323,1447,1448,1450,1452],{"class":325,"line":793},[323,1449,330],{"class":329},[323,1451,692],{"class":333},[323,1453,356],{"class":329},[323,1455,1456,1458],{"class":325,"line":801},[323,1457,707],{"class":329},[323,1459,1460],{"class":333},"component\n",[323,1462,1463,1466,1468,1470,1473],{"class":325,"line":807},[323,1464,1465],{"class":337},"    :is",[323,1467,344],{"class":329},[323,1469,347],{"class":329},[323,1471,1472],{"class":350},"styleTag",[323,1474,726],{"class":329},[323,1476,1477,1480,1482,1484,1487],{"class":325,"line":816},[323,1478,1479],{"class":337},"    v-if",[323,1481,344],{"class":329},[323,1483,347],{"class":329},[323,1485,1486],{"class":350},"css",[323,1488,726],{"class":329},[323,1490,1491],{"class":325,"line":833},[323,1492,804],{"class":329},[323,1494,1495],{"class":325,"line":849},[323,1496,1497],{"class":372},"    {{ css }}\n",[323,1499,1500,1502,1505],{"class":325,"line":855},[323,1501,869],{"class":329},[323,1503,1504],{"class":333},"component",[323,1506,356],{"class":329},[323,1508,1509,1511,1513],{"class":325,"line":866},[323,1510,675],{"class":329},[323,1512,692],{"class":333},[323,1514,356],{"class":329},[309,1516,1518],{"id":1517},"use-it","Use it",[313,1520,1522],{"className":315,"code":1521,"language":318,"meta":319,"style":319},"\u003Cscript setup lang=\"ts\">\nimport { Area, AreaChart, CartesianGrid, Tooltip, XAxis } from 'vccs'\nimport { type ChartConfig, ChartContainer, ChartTooltipContent } from '@\u002Fcomponents\u002Fui\u002Fchart'\n\nconst chartConfig = {\n  desktop: { label: 'Desktop', color: 'var(--chart-1)' },\n  mobile: { label: 'Mobile', color: 'var(--chart-2)' },\n} satisfies ChartConfig\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CChartContainer\n    :config=\"chartConfig\"\n    class=\"aspect-auto h-[250px] w-full\"\n  >\n    \u003CAreaChart :data=\"data\">\n      \u003CCartesianGrid :vertical=\"false\" \u002F>\n      \u003CXAxis\n        data-key=\"date\"\n        :tick-line=\"false\"\n        :axis-line=\"false\"\n      \u002F>\n      \u003CTooltip :cursor=\"false\">\n        \u003Ctemplate #content=\"{ active, payload, label }\">\n          \u003CChartTooltipContent\n            :active=\"active\"\n            :payload=\"payload\"\n            :label=\"label\"\n          \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FTooltip>\n      \u003CArea\n        data-key=\"mobile\"\n        fill=\"var(--color-mobile)\"\n        stroke=\"var(--color-mobile)\"\n        stack-id=\"a\"\n      \u002F>\n      \u003CArea\n        data-key=\"desktop\"\n        fill=\"var(--color-desktop)\"\n        stroke=\"var(--color-desktop)\"\n        stack-id=\"a\"\n      \u002F>\n    \u003C\u002FAreaChart>\n  \u003C\u002FChartContainer>\n\u003C\u002Ftemplate>\n",[294,1523,1524,1544,1584,1615,1619,1630,1667,1702,1711,1719,1723,1731,1738,1754,1768,1772,1794,1818,1825,1839,1855,1870,1875,1896,1935,1943,1959,1974,1989,1994,2003,2012,2019,2032,2046,2059,2073,2077,2083,2096,2110,2123,2136,2141,2151,2160],{"__ignoreMap":319},[323,1525,1526,1528,1530,1532,1534,1536,1538,1540,1542],{"class":325,"line":326},[323,1527,330],{"class":329},[323,1529,334],{"class":333},[323,1531,338],{"class":337},[323,1533,341],{"class":337},[323,1535,344],{"class":329},[323,1537,347],{"class":329},[323,1539,351],{"class":350},[323,1541,347],{"class":329},[323,1543,356],{"class":329},[323,1545,1546,1548,1550,1553,1555,1558,1560,1563,1565,1568,1570,1573,1575,1577,1579,1582],{"class":325,"line":359},[323,1547,363],{"class":362},[323,1549,369],{"class":329},[323,1551,1552],{"class":372}," Area",[323,1554,619],{"class":329},[323,1556,1557],{"class":372}," AreaChart",[323,1559,619],{"class":329},[323,1561,1562],{"class":372}," CartesianGrid",[323,1564,619],{"class":329},[323,1566,1567],{"class":372}," Tooltip",[323,1569,619],{"class":329},[323,1571,1572],{"class":372}," XAxis",[323,1574,376],{"class":329},[323,1576,379],{"class":362},[323,1578,382],{"class":329},[323,1580,1581],{"class":350},"vccs",[323,1583,387],{"class":329},[323,1585,1586,1588,1590,1592,1594,1596,1599,1601,1604,1606,1608,1610,1613],{"class":325,"line":390},[323,1587,363],{"class":362},[323,1589,369],{"class":329},[323,1591,366],{"class":362},[323,1593,399],{"class":372},[323,1595,619],{"class":329},[323,1597,1598],{"class":372}," ChartContainer",[323,1600,619],{"class":329},[323,1602,1603],{"class":372}," ChartTooltipContent",[323,1605,376],{"class":329},[323,1607,379],{"class":362},[323,1609,382],{"class":329},[323,1611,1612],{"class":350},"@\u002Fcomponents\u002Fui\u002Fchart",[323,1614,387],{"class":329},[323,1616,1617],{"class":325,"line":413},[323,1618,456],{"emptyLinePlaceholder":455},[323,1620,1621,1623,1626,1628],{"class":325,"line":434},[323,1622,462],{"class":337},[323,1624,1625],{"class":372}," chartConfig ",[323,1627,344],{"class":329},[323,1629,1061],{"class":329},[323,1631,1632,1635,1637,1639,1642,1644,1646,1649,1651,1653,1655,1657,1659,1662,1664],{"class":325,"line":452},[323,1633,1634],{"class":333},"  desktop",[323,1636,520],{"class":329},[323,1638,369],{"class":329},[323,1640,1641],{"class":333}," label",[323,1643,520],{"class":329},[323,1645,382],{"class":329},[323,1647,1648],{"class":350},"Desktop",[323,1650,503],{"class":329},[323,1652,619],{"class":329},[323,1654,1242],{"class":333},[323,1656,520],{"class":329},[323,1658,382],{"class":329},[323,1660,1661],{"class":350},"var(--chart-1)",[323,1663,503],{"class":329},[323,1665,1666],{"class":329}," },\n",[323,1668,1669,1672,1674,1676,1678,1680,1682,1685,1687,1689,1691,1693,1695,1698,1700],{"class":325,"line":459},[323,1670,1671],{"class":333},"  mobile",[323,1673,520],{"class":329},[323,1675,369],{"class":329},[323,1677,1641],{"class":333},[323,1679,520],{"class":329},[323,1681,382],{"class":329},[323,1683,1684],{"class":350},"Mobile",[323,1686,503],{"class":329},[323,1688,619],{"class":329},[323,1690,1242],{"class":333},[323,1692,520],{"class":329},[323,1694,382],{"class":329},[323,1696,1697],{"class":350},"var(--chart-2)",[323,1699,503],{"class":329},[323,1701,1666],{"class":329},[323,1703,1704,1706,1709],{"class":325,"line":477},[323,1705,1303],{"class":329},[323,1707,1708],{"class":362}," satisfies",[323,1710,523],{"class":486},[323,1712,1713,1715,1717],{"class":325,"line":490},[323,1714,675],{"class":329},[323,1716,334],{"class":333},[323,1718,356],{"class":329},[323,1720,1721],{"class":325,"line":514},[323,1722,456],{"emptyLinePlaceholder":455},[323,1724,1725,1727,1729],{"class":325,"line":526},[323,1726,330],{"class":329},[323,1728,692],{"class":333},[323,1730,356],{"class":329},[323,1732,1733,1735],{"class":325,"line":535},[323,1734,707],{"class":329},[323,1736,1737],{"class":333},"ChartContainer\n",[323,1739,1740,1743,1745,1747,1749,1752],{"class":325,"line":540},[323,1741,1742],{"class":329},"    :",[323,1744,838],{"class":337},[323,1746,344],{"class":329},[323,1748,347],{"class":329},[323,1750,1751],{"class":372},"chartConfig",[323,1753,726],{"class":329},[323,1755,1756,1759,1761,1763,1766],{"class":325,"line":555},[323,1757,1758],{"class":337},"    class",[323,1760,344],{"class":329},[323,1762,347],{"class":329},[323,1764,1765],{"class":350},"aspect-auto h-[250px] w-full",[323,1767,726],{"class":329},[323,1769,1770],{"class":325,"line":634},[323,1771,804],{"class":329},[323,1773,1774,1776,1779,1781,1784,1786,1788,1790,1792],{"class":325,"line":639},[323,1775,810],{"class":329},[323,1777,1778],{"class":333},"AreaChart",[323,1780,1321],{"class":329},[323,1782,1783],{"class":337},"data",[323,1785,344],{"class":329},[323,1787,347],{"class":329},[323,1789,1783],{"class":372},[323,1791,347],{"class":329},[323,1793,356],{"class":329},[323,1795,1796,1799,1801,1803,1806,1808,1810,1814,1816],{"class":325,"line":672},[323,1797,1798],{"class":329},"      \u003C",[323,1800,233],{"class":333},[323,1802,1321],{"class":329},[323,1804,1805],{"class":337},"vertical",[323,1807,344],{"class":329},[323,1809,347],{"class":329},[323,1811,1813],{"class":1812},"sfNiH","false",[323,1815,347],{"class":329},[323,1817,863],{"class":329},[323,1819,1820,1822],{"class":325,"line":682},[323,1821,1798],{"class":329},[323,1823,1824],{"class":333},"XAxis\n",[323,1826,1827,1830,1832,1834,1837],{"class":325,"line":687},[323,1828,1829],{"class":337},"        data-key",[323,1831,344],{"class":329},[323,1833,347],{"class":329},[323,1835,1836],{"class":350},"date",[323,1838,726],{"class":329},[323,1840,1841,1844,1847,1849,1851,1853],{"class":325,"line":697},[323,1842,1843],{"class":329},"        :",[323,1845,1846],{"class":337},"tick-line",[323,1848,344],{"class":329},[323,1850,347],{"class":329},[323,1852,1813],{"class":1812},[323,1854,726],{"class":329},[323,1856,1857,1859,1862,1864,1866,1868],{"class":325,"line":704},[323,1858,1843],{"class":329},[323,1860,1861],{"class":337},"axis-line",[323,1863,344],{"class":329},[323,1865,347],{"class":329},[323,1867,1813],{"class":1812},[323,1869,726],{"class":329},[323,1871,1872],{"class":325,"line":713},[323,1873,1874],{"class":329},"      \u002F>\n",[323,1876,1877,1879,1881,1883,1886,1888,1890,1892,1894],{"class":325,"line":729},[323,1878,1798],{"class":329},[323,1880,223],{"class":333},[323,1882,1321],{"class":329},[323,1884,1885],{"class":337},"cursor",[323,1887,344],{"class":329},[323,1889,347],{"class":329},[323,1891,1813],{"class":1812},[323,1893,347],{"class":329},[323,1895,356],{"class":329},[323,1897,1898,1901,1903,1906,1909,1911,1913,1916,1919,1921,1924,1926,1929,1931,1933],{"class":325,"line":744},[323,1899,1900],{"class":329},"        \u003C",[323,1902,692],{"class":333},[323,1904,1905],{"class":329}," #",[323,1907,1908],{"class":337},"content",[323,1910,344],{"class":329},[323,1912,347],{"class":329},[323,1914,1915],{"class":329},"{",[323,1917,1918],{"class":372}," active",[323,1920,619],{"class":329},[323,1922,1923],{"class":372}," payload",[323,1925,619],{"class":329},[323,1927,1928],{"class":372}," label ",[323,1930,1303],{"class":329},[323,1932,347],{"class":329},[323,1934,356],{"class":329},[323,1936,1937,1940],{"class":325,"line":757},[323,1938,1939],{"class":329},"          \u003C",[323,1941,1942],{"class":333},"ChartTooltipContent\n",[323,1944,1945,1948,1951,1953,1955,1957],{"class":325,"line":763},[323,1946,1947],{"class":329},"            :",[323,1949,1950],{"class":337},"active",[323,1952,344],{"class":329},[323,1954,347],{"class":329},[323,1956,1950],{"class":372},[323,1958,726],{"class":329},[323,1960,1961,1963,1966,1968,1970,1972],{"class":325,"line":769},[323,1962,1947],{"class":329},[323,1964,1965],{"class":337},"payload",[323,1967,344],{"class":329},[323,1969,347],{"class":329},[323,1971,1965],{"class":372},[323,1973,726],{"class":329},[323,1975,1976,1978,1981,1983,1985,1987],{"class":325,"line":775},[323,1977,1947],{"class":329},[323,1979,1980],{"class":337},"label",[323,1982,344],{"class":329},[323,1984,347],{"class":329},[323,1986,1980],{"class":372},[323,1988,726],{"class":329},[323,1990,1991],{"class":325,"line":781},[323,1992,1993],{"class":329},"          \u002F>\n",[323,1995,1996,1999,2001],{"class":325,"line":787},[323,1997,1998],{"class":329},"        \u003C\u002F",[323,2000,692],{"class":333},[323,2002,356],{"class":329},[323,2004,2005,2008,2010],{"class":325,"line":793},[323,2006,2007],{"class":329},"      \u003C\u002F",[323,2009,223],{"class":333},[323,2011,356],{"class":329},[323,2013,2014,2016],{"class":325,"line":801},[323,2015,1798],{"class":329},[323,2017,2018],{"class":333},"Area\n",[323,2020,2021,2023,2025,2027,2030],{"class":325,"line":807},[323,2022,1829],{"class":337},[323,2024,344],{"class":329},[323,2026,347],{"class":329},[323,2028,2029],{"class":350},"mobile",[323,2031,726],{"class":329},[323,2033,2034,2037,2039,2041,2044],{"class":325,"line":816},[323,2035,2036],{"class":337},"        fill",[323,2038,344],{"class":329},[323,2040,347],{"class":329},[323,2042,2043],{"class":350},"var(--color-mobile)",[323,2045,726],{"class":329},[323,2047,2048,2051,2053,2055,2057],{"class":325,"line":833},[323,2049,2050],{"class":337},"        stroke",[323,2052,344],{"class":329},[323,2054,347],{"class":329},[323,2056,2043],{"class":350},[323,2058,726],{"class":329},[323,2060,2061,2064,2066,2068,2071],{"class":325,"line":849},[323,2062,2063],{"class":337},"        stack-id",[323,2065,344],{"class":329},[323,2067,347],{"class":329},[323,2069,2070],{"class":350},"a",[323,2072,726],{"class":329},[323,2074,2075],{"class":325,"line":855},[323,2076,1874],{"class":329},[323,2078,2079,2081],{"class":325,"line":866},[323,2080,1798],{"class":329},[323,2082,2018],{"class":333},[323,2084,2085,2087,2089,2091,2094],{"class":325,"line":877},[323,2086,1829],{"class":337},[323,2088,344],{"class":329},[323,2090,347],{"class":329},[323,2092,2093],{"class":350},"desktop",[323,2095,726],{"class":329},[323,2097,2099,2101,2103,2105,2108],{"class":325,"line":2098},40,[323,2100,2036],{"class":337},[323,2102,344],{"class":329},[323,2104,347],{"class":329},[323,2106,2107],{"class":350},"var(--color-desktop)",[323,2109,726],{"class":329},[323,2111,2113,2115,2117,2119,2121],{"class":325,"line":2112},41,[323,2114,2050],{"class":337},[323,2116,344],{"class":329},[323,2118,347],{"class":329},[323,2120,2107],{"class":350},[323,2122,726],{"class":329},[323,2124,2126,2128,2130,2132,2134],{"class":325,"line":2125},42,[323,2127,2063],{"class":337},[323,2129,344],{"class":329},[323,2131,347],{"class":329},[323,2133,2070],{"class":350},[323,2135,726],{"class":329},[323,2137,2139],{"class":325,"line":2138},43,[323,2140,1874],{"class":329},[323,2142,2144,2147,2149],{"class":325,"line":2143},44,[323,2145,2146],{"class":329},"    \u003C\u002F",[323,2148,1778],{"class":333},[323,2150,356],{"class":329},[323,2152,2154,2156,2158],{"class":325,"line":2153},45,[323,2155,869],{"class":329},[323,2157,296],{"class":333},[323,2159,356],{"class":329},[323,2161,2163,2165,2167],{"class":325,"line":2162},46,[323,2164,675],{"class":329},[323,2166,692],{"class":333},[323,2168,356],{"class":329},[290,2170,2171,2172,2175],{},"The chart fills the container; no ",[294,2173,2174],{},"ResponsiveContainer"," is needed. The container's default 16:9 box matches the size charts render at on the server.",[1035,2177,2178],{},"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 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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":319,"searchDepth":359,"depth":359,"links":2180},[2181,2182],{"id":311,"depth":359,"text":296},{"id":1517,"depth":359,"text":1518},"Use vccs with shadcn-vue's chart components","md",null,{},{"icon":106},{"title":103,"description":2183},"VHoAcPqOfI_dPFLexwy9lw9lmcn2IkSrRD6ulznD-qc",[2191,2193],{"title":98,"path":99,"stem":100,"description":2192,"icon":101,"children":-1},"Style every chart through CSS variables",{"title":108,"path":109,"stem":110,"description":2194,"icon":111,"children":-1},"Donut with a center value, gauge and conversion funnel from the existing charts",1793527167458]