[{"data":1,"prerenderedAt":1426},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-installation":279,"-getting-started-installation-surround":1421},[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":16,"body":281,"description":1414,"extension":1415,"links":1416,"meta":1417,"navigation":1418,"path":17,"seo":1419,"stem":18,"__hash__":1420},"docs\u002F1.getting-started\u002F2.installation.md",{"type":282,"value":283,"toc":1405},"minimark",[284,289,344,348,354,434,441,446,456,554,560,564,570,587,755,759,762,1335,1345,1349,1401],[285,286,288],"h2",{"id":287},"requirements","Requirements",[290,291,292,300,316,319,329],"ul",{},[293,294,295,296],"li",{},"Vue ",[297,298,299],"code",{},"^3.5",[293,301,302,311,312,315],{},[303,304,308],"a",{"href":305,"rel":306},"https:\u002F\u002Fmotion.dev\u002Fdocs\u002Fvue",[307],"nofollow",[297,309,310],{},"motion-v"," ",[297,313,314],{},"^2.4",", a required peer dependency that drives all animation",[293,317,318],{},"An ESM build setup (Vite, Nuxt, or another bundler). vccs ships ES modules only.",[293,320,321,322,325,326],{},"For the Nuxt module (",[297,323,324],{},"vccs\u002Fnuxt","): Nuxt ",[297,327,328],{},"^4",[293,330,331,332,335,336,343],{},"For the resolver (",[297,333,334],{},"vccs\u002Fresolver","): ",[303,337,340],{"href":338,"rel":339},"https:\u002F\u002Fgithub.com\u002Funplugin\u002Funplugin-vue-components",[307],[297,341,342],{},"unplugin-vue-components"," in your own dev dependencies",[285,345,347],{"id":346},"install","Install",[349,350,351,353],"p",{},[297,352,310],{}," is a peer dependency. Install it with vccs, because some package managers (for\nexample yarn 1) do not install peer dependencies.",[355,356,357,385,402,418],"code-group",{},[358,359,365],"pre",{"className":360,"code":361,"filename":362,"language":363,"meta":364,"style":364},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add vccs motion-v\n","pnpm","bash","",[297,366,367],{"__ignoreMap":364},[368,369,372,375,379,382],"span",{"class":370,"line":371},"line",1,[368,373,362],{"class":374},"sBMFI",[368,376,378],{"class":377},"sfazB"," add",[368,380,381],{"class":377}," vccs",[368,383,384],{"class":377}," motion-v\n",[358,386,389],{"className":360,"code":387,"filename":388,"language":363,"meta":364,"style":364},"npm install vccs motion-v\n","npm",[297,390,391],{"__ignoreMap":364},[368,392,393,395,398,400],{"class":370,"line":371},[368,394,388],{"class":374},[368,396,397],{"class":377}," install",[368,399,381],{"class":377},[368,401,384],{"class":377},[358,403,406],{"className":360,"code":404,"filename":405,"language":363,"meta":364,"style":364},"yarn add vccs motion-v\n","yarn",[297,407,408],{"__ignoreMap":364},[368,409,410,412,414,416],{"class":370,"line":371},[368,411,405],{"class":374},[368,413,378],{"class":377},[368,415,381],{"class":377},[368,417,384],{"class":377},[358,419,422],{"className":360,"code":420,"filename":421,"language":363,"meta":364,"style":364},"bun add vccs motion-v\n","bun",[297,423,424],{"__ignoreMap":364},[368,425,426,428,430,432],{"class":370,"line":371},[368,427,421],{"class":374},[368,429,378],{"class":377},[368,431,381],{"class":377},[368,433,384],{"class":377},[349,435,436,437,440],{},"You can now import components from ",[297,438,439],{},"vccs",". To use them without imports, add the Nuxt module\nor the Vite resolver.",[442,443,445],"h3",{"id":444},"nuxt","Nuxt",[349,447,448,449,452,453,455],{},"The module needs Nuxt 4 or later; on Nuxt 3 it stops the build with an error. It registers every component and composable. Import types and\n",[297,450,451],{},"defineChartComponents"," from ",[297,454,439],{},".",[358,457,462],{"className":458,"code":459,"filename":460,"language":461,"meta":364,"style":364},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['vccs\u002Fnuxt'],\n  \u002F\u002F Optional: register \u003CVBarChart>, \u003CVLine>, … to avoid name clashes with other UI libraries.\n  vccs: { prefix: 'V' },\n})\n","nuxt.config.ts","ts",[297,463,464,485,511,518,545],{"__ignoreMap":364},[368,465,466,470,473,477,481],{"class":370,"line":371},[368,467,469],{"class":468},"s7zQu","export",[368,471,472],{"class":468}," default",[368,474,476],{"class":475},"s2Zo4"," defineNuxtConfig",[368,478,480],{"class":479},"sTEyZ","(",[368,482,484],{"class":483},"sMK4o","{\n",[368,486,488,492,495,498,501,503,505,508],{"class":370,"line":487},2,[368,489,491],{"class":490},"swJcz","  modules",[368,493,494],{"class":483},":",[368,496,497],{"class":479}," [",[368,499,500],{"class":483},"'",[368,502,324],{"class":377},[368,504,500],{"class":483},[368,506,507],{"class":479},"]",[368,509,510],{"class":483},",\n",[368,512,514],{"class":370,"line":513},3,[368,515,517],{"class":516},"sHwdD","  \u002F\u002F Optional: register \u003CVBarChart>, \u003CVLine>, … to avoid name clashes with other UI libraries.\n",[368,519,521,524,526,529,532,534,537,540,542],{"class":370,"line":520},4,[368,522,523],{"class":490},"  vccs",[368,525,494],{"class":483},[368,527,528],{"class":483}," {",[368,530,531],{"class":490}," prefix",[368,533,494],{"class":483},[368,535,536],{"class":483}," '",[368,538,539],{"class":377},"V",[368,541,500],{"class":483},[368,543,544],{"class":483}," },\n",[368,546,548,551],{"class":370,"line":547},5,[368,549,550],{"class":483},"}",[368,552,553],{"class":479},")\n",[349,555,556,557,559],{},"See ",[303,558,73],{"href":74}," for server rendering.",[442,561,563],{"id":562},"vite","Vite",[349,565,566,567,569],{},"Install ",[297,568,342],{}," and add the resolver. It imports each component when a\ntemplate uses it.",[358,571,573],{"className":360,"code":572,"language":363,"meta":364,"style":364},"pnpm add -D unplugin-vue-components\n",[297,574,575],{"__ignoreMap":364},[368,576,577,579,581,584],{"class":370,"line":371},[368,578,362],{"class":374},[368,580,378],{"class":377},[368,582,583],{"class":377}," -D",[368,585,586],{"class":377}," unplugin-vue-components\n",[358,588,591],{"className":458,"code":589,"filename":590,"language":461,"meta":364,"style":364},"import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport Components from 'unplugin-vue-components\u002Fvite'\nimport { VccsResolver } from 'vccs\u002Fresolver'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    Components({ resolvers: [VccsResolver()] }),\n  ],\n})\n","vite.config.ts",[297,592,593,616,633,649,668,674,687,698,709,740,748],{"__ignoreMap":364},[368,594,595,598,600,603,606,609,611,613],{"class":370,"line":371},[368,596,597],{"class":468},"import",[368,599,528],{"class":483},[368,601,602],{"class":479}," defineConfig",[368,604,605],{"class":483}," }",[368,607,608],{"class":468}," from",[368,610,536],{"class":483},[368,612,562],{"class":377},[368,614,615],{"class":483},"'\n",[368,617,618,620,623,626,628,631],{"class":370,"line":487},[368,619,597],{"class":468},[368,621,622],{"class":479}," vue ",[368,624,625],{"class":468},"from",[368,627,536],{"class":483},[368,629,630],{"class":377},"@vitejs\u002Fplugin-vue",[368,632,615],{"class":483},[368,634,635,637,640,642,644,647],{"class":370,"line":513},[368,636,597],{"class":468},[368,638,639],{"class":479}," Components ",[368,641,625],{"class":468},[368,643,536],{"class":483},[368,645,646],{"class":377},"unplugin-vue-components\u002Fvite",[368,648,615],{"class":483},[368,650,651,653,655,658,660,662,664,666],{"class":370,"line":520},[368,652,597],{"class":468},[368,654,528],{"class":483},[368,656,657],{"class":479}," VccsResolver",[368,659,605],{"class":483},[368,661,608],{"class":468},[368,663,536],{"class":483},[368,665,334],{"class":377},[368,667,615],{"class":483},[368,669,670],{"class":370,"line":547},[368,671,673],{"emptyLinePlaceholder":672},true,"\n",[368,675,677,679,681,683,685],{"class":370,"line":676},6,[368,678,469],{"class":468},[368,680,472],{"class":468},[368,682,602],{"class":475},[368,684,480],{"class":479},[368,686,484],{"class":483},[368,688,690,693,695],{"class":370,"line":689},7,[368,691,692],{"class":490},"  plugins",[368,694,494],{"class":483},[368,696,697],{"class":479}," [\n",[368,699,701,704,707],{"class":370,"line":700},8,[368,702,703],{"class":475},"    vue",[368,705,706],{"class":479},"()",[368,708,510],{"class":483},[368,710,712,715,717,720,723,725,727,730,733,735,738],{"class":370,"line":711},9,[368,713,714],{"class":475},"    Components",[368,716,480],{"class":479},[368,718,719],{"class":483},"{",[368,721,722],{"class":490}," resolvers",[368,724,494],{"class":483},[368,726,497],{"class":479},[368,728,729],{"class":475},"VccsResolver",[368,731,732],{"class":479},"()] ",[368,734,550],{"class":483},[368,736,737],{"class":479},")",[368,739,510],{"class":483},[368,741,743,746],{"class":370,"line":742},10,[368,744,745],{"class":479},"  ]",[368,747,510],{"class":483},[368,749,751,753],{"class":370,"line":750},11,[368,752,550],{"class":483},[368,754,553],{"class":479},[285,756,758],{"id":757},"use-your-first-chart","Use your first chart",[349,760,761],{},"Import chart components and compose them in your template:",[358,763,768],{"className":764,"code":765,"filename":766,"language":767,"meta":364,"style":364},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'vccs'\n\nconst data = [\n  { name: 'Page A', uv: 4000, pv: 2400 },\n  { name: 'Page B', uv: 3000, pv: 1398 },\n  { name: 'Page C', uv: 2000, pv: 9800 },\n  { name: 'Page D', uv: 2780, pv: 3908 },\n  { name: 'Page E', uv: 1890, pv: 4800 },\n  { name: 'Page F', uv: 2390, pv: 3800 },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBarChart\n    :data=\"data\"\n    :height=\"300\"\n  >\n    \u003CCartesianGrid stroke-dasharray=\"3 3\" \u002F>\n    \u003CXAxis data-key=\"name\" \u002F>\n    \u003CYAxis \u002F>\n    \u003CTooltip \u002F>\n    \u003CBar\n      data-key=\"pv\"\n      fill=\"#8884d8\"\n    \u002F>\n    \u003CBar\n      data-key=\"uv\"\n      fill=\"#82ca9d\"\n    \u002F>\n  \u003C\u002FBarChart>\n\u003C\u002Ftemplate>\n","App.vue","vue",[297,769,770,785,792,799,806,813,820,827,834,846,850,863,905,941,977,1013,1049,1085,1091,1101,1106,1116,1125,1144,1161,1167,1190,1212,1222,1231,1239,1254,1269,1275,1282,1296,1310,1315,1326],{"__ignoreMap":364},[368,771,772,775,778,782],{"class":370,"line":371},[368,773,774],{"class":483},"\u003C",[368,776,777],{"class":490},"script",[368,779,781],{"class":780},"spNyl"," setup",[368,783,784],{"class":483},">\n",[368,786,787,789],{"class":370,"line":487},[368,788,597],{"class":468},[368,790,791],{"class":483}," {\n",[368,793,794,797],{"class":370,"line":513},[368,795,796],{"class":479},"  Bar",[368,798,510],{"class":483},[368,800,801,804],{"class":370,"line":520},[368,802,803],{"class":479},"  BarChart",[368,805,510],{"class":483},[368,807,808,811],{"class":370,"line":547},[368,809,810],{"class":479},"  CartesianGrid",[368,812,510],{"class":483},[368,814,815,818],{"class":370,"line":676},[368,816,817],{"class":479},"  Tooltip",[368,819,510],{"class":483},[368,821,822,825],{"class":370,"line":689},[368,823,824],{"class":479},"  XAxis",[368,826,510],{"class":483},[368,828,829,832],{"class":370,"line":700},[368,830,831],{"class":479},"  YAxis",[368,833,510],{"class":483},[368,835,836,838,840,842,844],{"class":370,"line":711},[368,837,550],{"class":483},[368,839,608],{"class":468},[368,841,536],{"class":483},[368,843,439],{"class":377},[368,845,615],{"class":483},[368,847,848],{"class":370,"line":742},[368,849,673],{"emptyLinePlaceholder":672},[368,851,852,855,858,861],{"class":370,"line":750},[368,853,854],{"class":780},"const",[368,856,857],{"class":479}," data ",[368,859,860],{"class":483},"=",[368,862,697],{"class":479},[368,864,866,869,872,874,876,879,881,884,887,889,893,895,898,900,903],{"class":370,"line":865},12,[368,867,868],{"class":483},"  {",[368,870,871],{"class":490}," name",[368,873,494],{"class":483},[368,875,536],{"class":483},[368,877,878],{"class":377},"Page A",[368,880,500],{"class":483},[368,882,883],{"class":483},",",[368,885,886],{"class":490}," uv",[368,888,494],{"class":483},[368,890,892],{"class":891},"sbssI"," 4000",[368,894,883],{"class":483},[368,896,897],{"class":490}," pv",[368,899,494],{"class":483},[368,901,902],{"class":891}," 2400",[368,904,544],{"class":483},[368,906,908,910,912,914,916,919,921,923,925,927,930,932,934,936,939],{"class":370,"line":907},13,[368,909,868],{"class":483},[368,911,871],{"class":490},[368,913,494],{"class":483},[368,915,536],{"class":483},[368,917,918],{"class":377},"Page B",[368,920,500],{"class":483},[368,922,883],{"class":483},[368,924,886],{"class":490},[368,926,494],{"class":483},[368,928,929],{"class":891}," 3000",[368,931,883],{"class":483},[368,933,897],{"class":490},[368,935,494],{"class":483},[368,937,938],{"class":891}," 1398",[368,940,544],{"class":483},[368,942,944,946,948,950,952,955,957,959,961,963,966,968,970,972,975],{"class":370,"line":943},14,[368,945,868],{"class":483},[368,947,871],{"class":490},[368,949,494],{"class":483},[368,951,536],{"class":483},[368,953,954],{"class":377},"Page C",[368,956,500],{"class":483},[368,958,883],{"class":483},[368,960,886],{"class":490},[368,962,494],{"class":483},[368,964,965],{"class":891}," 2000",[368,967,883],{"class":483},[368,969,897],{"class":490},[368,971,494],{"class":483},[368,973,974],{"class":891}," 9800",[368,976,544],{"class":483},[368,978,980,982,984,986,988,991,993,995,997,999,1002,1004,1006,1008,1011],{"class":370,"line":979},15,[368,981,868],{"class":483},[368,983,871],{"class":490},[368,985,494],{"class":483},[368,987,536],{"class":483},[368,989,990],{"class":377},"Page D",[368,992,500],{"class":483},[368,994,883],{"class":483},[368,996,886],{"class":490},[368,998,494],{"class":483},[368,1000,1001],{"class":891}," 2780",[368,1003,883],{"class":483},[368,1005,897],{"class":490},[368,1007,494],{"class":483},[368,1009,1010],{"class":891}," 3908",[368,1012,544],{"class":483},[368,1014,1016,1018,1020,1022,1024,1027,1029,1031,1033,1035,1038,1040,1042,1044,1047],{"class":370,"line":1015},16,[368,1017,868],{"class":483},[368,1019,871],{"class":490},[368,1021,494],{"class":483},[368,1023,536],{"class":483},[368,1025,1026],{"class":377},"Page E",[368,1028,500],{"class":483},[368,1030,883],{"class":483},[368,1032,886],{"class":490},[368,1034,494],{"class":483},[368,1036,1037],{"class":891}," 1890",[368,1039,883],{"class":483},[368,1041,897],{"class":490},[368,1043,494],{"class":483},[368,1045,1046],{"class":891}," 4800",[368,1048,544],{"class":483},[368,1050,1052,1054,1056,1058,1060,1063,1065,1067,1069,1071,1074,1076,1078,1080,1083],{"class":370,"line":1051},17,[368,1053,868],{"class":483},[368,1055,871],{"class":490},[368,1057,494],{"class":483},[368,1059,536],{"class":483},[368,1061,1062],{"class":377},"Page F",[368,1064,500],{"class":483},[368,1066,883],{"class":483},[368,1068,886],{"class":490},[368,1070,494],{"class":483},[368,1072,1073],{"class":891}," 2390",[368,1075,883],{"class":483},[368,1077,897],{"class":490},[368,1079,494],{"class":483},[368,1081,1082],{"class":891}," 3800",[368,1084,544],{"class":483},[368,1086,1088],{"class":370,"line":1087},18,[368,1089,1090],{"class":479},"]\n",[368,1092,1094,1097,1099],{"class":370,"line":1093},19,[368,1095,1096],{"class":483},"\u003C\u002F",[368,1098,777],{"class":490},[368,1100,784],{"class":483},[368,1102,1104],{"class":370,"line":1103},20,[368,1105,673],{"emptyLinePlaceholder":672},[368,1107,1109,1111,1114],{"class":370,"line":1108},21,[368,1110,774],{"class":483},[368,1112,1113],{"class":490},"template",[368,1115,784],{"class":483},[368,1117,1119,1122],{"class":370,"line":1118},22,[368,1120,1121],{"class":483},"  \u003C",[368,1123,1124],{"class":490},"BarChart\n",[368,1126,1128,1131,1134,1136,1139,1141],{"class":370,"line":1127},23,[368,1129,1130],{"class":483},"    :",[368,1132,1133],{"class":780},"data",[368,1135,860],{"class":483},[368,1137,1138],{"class":483},"\"",[368,1140,1133],{"class":479},[368,1142,1143],{"class":483},"\"\n",[368,1145,1147,1149,1152,1154,1156,1159],{"class":370,"line":1146},24,[368,1148,1130],{"class":483},[368,1150,1151],{"class":780},"height",[368,1153,860],{"class":483},[368,1155,1138],{"class":483},[368,1157,1158],{"class":891},"300",[368,1160,1143],{"class":483},[368,1162,1164],{"class":370,"line":1163},25,[368,1165,1166],{"class":483},"  >\n",[368,1168,1170,1173,1175,1178,1180,1182,1185,1187],{"class":370,"line":1169},26,[368,1171,1172],{"class":483},"    \u003C",[368,1174,228],{"class":490},[368,1176,1177],{"class":780}," stroke-dasharray",[368,1179,860],{"class":483},[368,1181,1138],{"class":483},[368,1183,1184],{"class":377},"3 3",[368,1186,1138],{"class":483},[368,1188,1189],{"class":483}," \u002F>\n",[368,1191,1193,1195,1198,1201,1203,1205,1208,1210],{"class":370,"line":1192},27,[368,1194,1172],{"class":483},[368,1196,1197],{"class":490},"XAxis",[368,1199,1200],{"class":780}," data-key",[368,1202,860],{"class":483},[368,1204,1138],{"class":483},[368,1206,1207],{"class":377},"name",[368,1209,1138],{"class":483},[368,1211,1189],{"class":483},[368,1213,1215,1217,1220],{"class":370,"line":1214},28,[368,1216,1172],{"class":483},[368,1218,1219],{"class":490},"YAxis",[368,1221,1189],{"class":483},[368,1223,1225,1227,1229],{"class":370,"line":1224},29,[368,1226,1172],{"class":483},[368,1228,218],{"class":490},[368,1230,1189],{"class":483},[368,1232,1234,1236],{"class":370,"line":1233},30,[368,1235,1172],{"class":483},[368,1237,1238],{"class":490},"Bar\n",[368,1240,1242,1245,1247,1249,1252],{"class":370,"line":1241},31,[368,1243,1244],{"class":780},"      data-key",[368,1246,860],{"class":483},[368,1248,1138],{"class":483},[368,1250,1251],{"class":377},"pv",[368,1253,1143],{"class":483},[368,1255,1257,1260,1262,1264,1267],{"class":370,"line":1256},32,[368,1258,1259],{"class":780},"      fill",[368,1261,860],{"class":483},[368,1263,1138],{"class":483},[368,1265,1266],{"class":377},"#8884d8",[368,1268,1143],{"class":483},[368,1270,1272],{"class":370,"line":1271},33,[368,1273,1274],{"class":483},"    \u002F>\n",[368,1276,1278,1280],{"class":370,"line":1277},34,[368,1279,1172],{"class":483},[368,1281,1238],{"class":490},[368,1283,1285,1287,1289,1291,1294],{"class":370,"line":1284},35,[368,1286,1244],{"class":780},[368,1288,860],{"class":483},[368,1290,1138],{"class":483},[368,1292,1293],{"class":377},"uv",[368,1295,1143],{"class":483},[368,1297,1299,1301,1303,1305,1308],{"class":370,"line":1298},36,[368,1300,1259],{"class":780},[368,1302,860],{"class":483},[368,1304,1138],{"class":483},[368,1306,1307],{"class":377},"#82ca9d",[368,1309,1143],{"class":483},[368,1311,1313],{"class":370,"line":1312},37,[368,1314,1274],{"class":483},[368,1316,1318,1321,1324],{"class":370,"line":1317},38,[368,1319,1320],{"class":483},"  \u003C\u002F",[368,1322,1323],{"class":490},"BarChart",[368,1325,784],{"class":483},[368,1327,1329,1331,1333],{"class":370,"line":1328},39,[368,1330,1096],{"class":483},[368,1332,1113],{"class":490},[368,1334,784],{"class":483},[349,1336,1337,1338,1341,1342,1344],{},"Charts fill their container's width; ",[297,1339,1340],{},":height=\"300\""," fixes the height. See ",[303,1343,43],{"href":44}," for fixed sizes and aspect ratios.",[285,1346,1348],{"id":1347},"next-steps","Next steps",[290,1350,1351,1356,1361,1366,1371,1376,1381,1386,1391],{},[293,1352,1353,1355],{},[303,1354,73],{"href":74}," — server rendering and the Nuxt module",[293,1357,1358,1360],{},[303,1359,98],{"href":99}," — use vccs with shadcn-vue's chart components",[293,1362,1363,1365],{},[303,1364,93],{"href":94}," — style charts with CSS variables",[293,1367,1368,1370],{},[303,1369,78],{"href":79}," — how charts move and how to tune it",[293,1372,1373,1375],{},[303,1374,83],{"href":84}," — react to interaction and control chart state",[293,1377,1378,1380],{},[303,1379,88],{"href":89}," — typed slots and row-typed data keys",[293,1382,1383,1385],{},[303,1384,108],{"href":109}," — accessible names, keyboard support and focus",[293,1387,1388,1390],{},[303,1389,21],{"href":22}," — breaking changes in 1.0",[293,1392,1393,1395,1396,1395,1398,1400],{},[303,1394,129],{"href":130},", ",[303,1397,134],{"href":135},[303,1399,124],{"href":125}," — chart reference",[1402,1403,1404],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":364,"searchDepth":487,"depth":487,"links":1406},[1407,1408,1412,1413],{"id":287,"depth":487,"text":288},{"id":346,"depth":487,"text":347,"children":1409},[1410,1411],{"id":444,"depth":513,"text":445},{"id":562,"depth":513,"text":563},{"id":757,"depth":487,"text":758},{"id":1347,"depth":487,"text":1348},"How to install vccs and start building charts","md",null,{},{"icon":19},{"title":16,"description":1414},"zsq3mv-KaCbmt4LlidRdrNQcwmJG7QSoXMR4mEPOo_8",[1422,1424],{"title":11,"path":12,"stem":13,"description":1423,"icon":14,"children":-1},"Learn what vccs is and when to use it",{"title":21,"path":22,"stem":23,"description":1425,"icon":24,"children":-1},"Breaking changes in vccs 1.0 and how to update",1791811109636]