[{"data":1,"prerenderedAt":694},["ShallowReactive",2],{"navigation_docs":3,"-guides-nuxt-and-ssr":284,"-guides-nuxt-and-ssr-surround":689},[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":78,"body":286,"description":682,"extension":683,"links":684,"meta":685,"navigation":686,"path":79,"seo":687,"stem":80,"__hash__":688},"docs\u002F2.guides\u002F11.nuxt-and-ssr.md",{"type":287,"value":288,"toc":676},"minimark",[289,293,298,310,381,408,480,484,487,518,521,612,615,619,658,662,672],[290,291,292],"p",{},"The server sends each chart at its entrance start: collapsed bars, undrawn lines and transparent cells. After hydration, the entrance plays when the chart is on screen.",[294,295,297],"h2",{"id":296},"install-the-module","Install the module",[290,299,300,301,305,306,309],{},"The module needs Nuxt 4 or later. On Nuxt 3 it stops the build with an error; there, import the components from ",[302,303,304],"code",{},"vccs"," or use ",[302,307,308],{},"vccs\u002Fresolver",".",[311,312,318],"pre",{"className":313,"code":314,"filename":315,"language":316,"meta":317,"style":317},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['vccs\u002Fnuxt'],\n})\n","nuxt.config.ts","ts","",[302,319,320,344,372],{"__ignoreMap":317},[321,322,325,329,332,336,340],"span",{"class":323,"line":324},"line",1,[321,326,328],{"class":327},"s7zQu","export",[321,330,331],{"class":327}," default",[321,333,335],{"class":334},"s2Zo4"," defineNuxtConfig",[321,337,339],{"class":338},"sTEyZ","(",[321,341,343],{"class":342},"sMK4o","{\n",[321,345,347,351,354,357,360,364,366,369],{"class":323,"line":346},2,[321,348,350],{"class":349},"swJcz","  modules",[321,352,353],{"class":342},":",[321,355,356],{"class":338}," [",[321,358,359],{"class":342},"'",[321,361,363],{"class":362},"sfazB","vccs\u002Fnuxt",[321,365,359],{"class":342},[321,367,368],{"class":338},"]",[321,370,371],{"class":342},",\n",[321,373,375,378],{"class":323,"line":374},3,[321,376,377],{"class":342},"}",[321,379,380],{"class":338},")\n",[290,382,383,384,371,387,390,391,394,395,397,398,400,401,403,404,407],{},"The module auto-imports every component and every composable (",[302,385,386],{},"usePlotArea",[302,388,389],{},"useXAxisScale",", …). Import types and ",[302,392,393],{},"defineChartComponents"," from ",[302,396,304],{},". Components have no\nprefix by default. Names such as ",[302,399,223],{},", ",[302,402,228],{}," and ",[302,405,406],{},"Label"," can conflict with shadcn-vue or Nuxt UI. Set a prefix to avoid these name collisions:",[311,409,411],{"className":313,"code":410,"filename":315,"language":316,"meta":317,"style":317},"export default defineNuxtConfig({\n  modules: ['vccs\u002Fnuxt'],\n  vccs: { prefix: 'V' }, \u002F\u002F \u003CVBarChart>, \u003CVLine>, ...\n})\n",[302,412,413,425,443,473],{"__ignoreMap":317},[321,414,415,417,419,421,423],{"class":323,"line":324},[321,416,328],{"class":327},[321,418,331],{"class":327},[321,420,335],{"class":334},[321,422,339],{"class":338},[321,424,343],{"class":342},[321,426,427,429,431,433,435,437,439,441],{"class":323,"line":346},[321,428,350],{"class":349},[321,430,353],{"class":342},[321,432,356],{"class":338},[321,434,359],{"class":342},[321,436,363],{"class":362},[321,438,359],{"class":342},[321,440,368],{"class":338},[321,442,371],{"class":342},[321,444,445,448,450,453,456,458,461,464,466,469],{"class":323,"line":374},[321,446,447],{"class":349},"  vccs",[321,449,353],{"class":342},[321,451,452],{"class":342}," {",[321,454,455],{"class":349}," prefix",[321,457,353],{"class":342},[321,459,460],{"class":342}," '",[321,462,463],{"class":362},"V",[321,465,359],{"class":342},[321,467,468],{"class":342}," },",[321,470,472],{"class":471},"sHwdD"," \u002F\u002F \u003CVBarChart>, \u003CVLine>, ...\n",[321,474,476,478],{"class":323,"line":475},4,[321,477,377],{"class":342},[321,479,380],{"class":338},[294,481,483],{"id":482},"how-server-rendering-works","How server rendering works",[290,485,486],{},"Responsive charts reserve their box on the server and stay hidden until the browser measures it. This avoids drawing at the wrong width and then snapping to the real size.",[488,489,490,501,507],"ul",{},[491,492,493,494,403,497,500],"li",{},"A chart with numeric ",[302,495,496],{},"width",[302,498,499],{},"height"," renders exactly at that size.",[491,502,503,504,506],{},"A chart with only ",[302,505,499],{}," (the most common case) uses an initial width of 640 px and fills the container width after measurement.",[491,508,509,510,513,514,517],{},"Without a size, the chart starts at 640 × 360 (or ",[302,511,512],{},"640 \u002F aspect"," high when ",[302,515,516],{},"aspect"," is set).",[290,519,520],{},"For a complete chart without JavaScript, use fixed width and height and turn animation off:",[311,522,526],{"className":523,"code":524,"language":525,"meta":317,"style":317},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CAreaChart :data=\"data\" :width=\"900\" :height=\"250\" :is-animation-active=\"false\">\n  \u003CArea data-key=\"desktop\" \u002F>\n\u003C\u002FAreaChart>\n","vue",[302,527,528,598,603],{"__ignoreMap":317},[321,529,530,533,536,539,543,546,549,551,553,555,557,559,561,565,567,569,571,573,575,578,580,582,585,587,589,593,595],{"class":323,"line":324},[321,531,532],{"class":342},"\u003C",[321,534,535],{"class":349},"AreaChart",[321,537,538],{"class":342}," :",[321,540,542],{"class":541},"spNyl","data",[321,544,545],{"class":342},"=",[321,547,548],{"class":342},"\"",[321,550,542],{"class":338},[321,552,548],{"class":342},[321,554,538],{"class":342},[321,556,496],{"class":541},[321,558,545],{"class":342},[321,560,548],{"class":342},[321,562,564],{"class":563},"sbssI","900",[321,566,548],{"class":342},[321,568,538],{"class":342},[321,570,499],{"class":541},[321,572,545],{"class":342},[321,574,548],{"class":342},[321,576,577],{"class":563},"250",[321,579,548],{"class":342},[321,581,538],{"class":342},[321,583,584],{"class":541},"is-animation-active",[321,586,545],{"class":342},[321,588,548],{"class":342},[321,590,592],{"class":591},"sfNiH","false",[321,594,548],{"class":342},[321,596,597],{"class":342},">\n",[321,599,600],{"class":323,"line":346},[321,601,602],{"class":338},"  \u003CArea data-key=\"desktop\" \u002F>\n",[321,604,605,608,610],{"class":323,"line":374},[321,606,607],{"class":342},"\u003C\u002F",[321,609,535],{"class":349},[321,611,597],{"class":342},[290,613,614],{},"Disabling animation alone does not reveal an unmeasured responsive chart.",[294,616,618],{"id":617},"what-vccs-does-for-you","What vccs does for you",[488,620,621,636,642,648],{},[491,622,623,627,628,631,632,635],{},[624,625,626],"strong",{},"Same first render on server and client."," Every chart item registers before any geometry renders, regardless of the order you declare children in. A ",[302,629,630],{},"\u003CLine>"," declared before a ",[302,633,634],{},"\u003CBar>"," still gets the bar's category padding on the first render.",[491,637,638,641],{},[624,639,640],{},"Entrance after hydration."," Hydration preserves the entrance start. The entrance plays when the chart is on screen.",[491,643,644,647],{},[624,645,646],{},"No text measurement during hydration."," Tick sizes are measured after mount, then the layout settles.",[491,649,650,653,654,657],{},[624,651,652],{},"Request isolation."," Generated ids use Vue's ",[302,655,656],{},"useId()",", and no chart state lives in module scope.",[294,659,661],{"id":660},"client-only-charts","Client-only charts",[290,663,664,665,668,669,309],{},"You do not need ",[302,666,667],{},"\u003CClientOnly>",". Use it only when the data itself exists only in the browser, for example from ",[302,670,671],{},"localStorage",[673,674,675],"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 .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 .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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":317,"searchDepth":346,"depth":346,"links":677},[678,679,680,681],{"id":296,"depth":346,"text":297},{"id":482,"depth":346,"text":483},{"id":617,"depth":346,"text":618},{"id":660,"depth":346,"text":661},"Server-render charts in Nuxt with correct layout and clean hydration","md",null,{},{"icon":81},{"title":78,"description":682},"sbs1bKSS_aUTAyz5HesNUEU9Int7dfqiMP4DA9ANdpo",[690,692],{"title":73,"path":74,"stem":75,"description":691,"icon":76,"children":-1},"Control bar width, spacing, and alignment within categories",{"title":83,"path":84,"stem":85,"description":693,"icon":86,"children":-1},"How charts move, how to tune the motion, and how to turn it off",1793527166718]