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