[{"data":1,"prerenderedAt":661},["ShallowReactive",2],{"navigation_docs":3,"-guides-chart-size":172,"-guides-chart-size-surround":656},[4,21,77,132],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","/getting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guides","i-lucide-book-open","/guides","2.guides",[27,32,37,42,47,52,57,62,67,72],{"title":28,"path":29,"stem":30,"icon":31},"Customize","/guides/customize","2.guides/01.customize","i-lucide-paintbrush",{"title":33,"path":34,"stem":35,"icon":36},"Active Index","/guides/active-state","2.guides/02.active-state","i-lucide-mouse-pointer",{"title":38,"path":39,"stem":40,"icon":41},"Domain and Ticks","/guides/domain-and-ticks","2.guides/03.domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Axis Ticks","/guides/axis-ticks","2.guides/04.axis-ticks","i-lucide-hash",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","/guides/chart-size","2.guides/05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Index and Layers","/guides/z-order-and-layers","2.guides/06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","/guides/coordinate-systems","2.guides/07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","/guides/performance","2.guides/08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","/guides/rounded-bar-corners","2.guides/09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","/guides/bar-alignment","2.guides/10.bar-alignment","i-lucide-align-center",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":20},"Charts","i-lucide-bar-chart-3","/charts","3.charts",[83,88,93,98,103,108,113,118,123,128],{"title":84,"path":85,"stem":86,"icon":87},"Area Chart","/charts/area-chart","3.charts/1.area-chart","i-lucide-area-chart",{"title":89,"path":90,"stem":91,"icon":92},"Treemap","/charts/treemap","3.charts/10.treemap","i-lucide-layout-grid",{"title":94,"path":95,"stem":96,"icon":97},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":99,"path":100,"stem":101,"icon":102},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":104,"path":105,"stem":106,"icon":107},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":109,"path":110,"stem":111,"icon":112},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":114,"path":115,"stem":116,"icon":117},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":119,"path":120,"stem":121,"icon":122},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":124,"path":125,"stem":126,"icon":127},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":129,"path":130,"stem":131,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":20},"Components","i-lucide-code","/components","4.components",[138,143,148,153,158,162,167],{"title":139,"path":140,"stem":141,"icon":142},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":144,"path":145,"stem":146,"icon":147},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":149,"path":150,"stem":151,"icon":152},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":154,"path":155,"stem":156,"icon":157},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":159,"path":160,"stem":161,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":163,"path":164,"stem":165,"icon":166},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":168,"path":169,"stem":170,"icon":171},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":173,"title":48,"body":174,"description":649,"extension":650,"links":651,"meta":652,"navigation":653,"path":49,"seo":654,"stem":50,"__hash__":655},"docs/2.guides/05.chart-size.md",{"type":175,"value":176,"toc":643},"minimark",[177,186,191,202,288,292,302,308,317,320,500,504,515,520,527,530,550,554,567,576,592,639],[178,179,180,181,185],"p",{},"Every chart in vccs requires a width and height. You can set these explicitly or use ",[182,183,184],"code",{},"\u003CResponsiveContainer>"," for dynamic sizing.",[187,188,190],"h2",{"id":189},"explicit-dimensions","Explicit dimensions",[178,192,193,194,197,198,201],{},"Pass ",[182,195,196],{},"width"," and ",[182,199,200],{},"height"," directly to the chart component:",[203,204,209],"pre",{"className":205,"code":206,"language":207,"meta":208,"style":208},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBarChart :width=\"600\" :height=\"400\" :data=\"data\">\n  \u003CBar data-key=\"value\" fill=\"#f97316\" />\n\u003C/BarChart>\n","vue","",[182,210,211,272,278],{"__ignoreMap":208},[212,213,216,220,224,227,230,233,236,240,242,244,246,248,250,253,255,257,260,262,264,267,269],"span",{"class":214,"line":215},"line",1,[212,217,219],{"class":218},"sMK4o","\u003C",[212,221,223],{"class":222},"swJcz","BarChart",[212,225,226],{"class":218}," :",[212,228,196],{"class":229},"spNyl",[212,231,232],{"class":218},"=",[212,234,235],{"class":218},"\"",[212,237,239],{"class":238},"sbssI","600",[212,241,235],{"class":218},[212,243,226],{"class":218},[212,245,200],{"class":229},[212,247,232],{"class":218},[212,249,235],{"class":218},[212,251,252],{"class":238},"400",[212,254,235],{"class":218},[212,256,226],{"class":218},[212,258,259],{"class":229},"data",[212,261,232],{"class":218},[212,263,235],{"class":218},[212,265,259],{"class":266},"sTEyZ",[212,268,235],{"class":218},[212,270,271],{"class":218},">\n",[212,273,275],{"class":214,"line":274},2,[212,276,277],{"class":266},"  \u003CBar data-key=\"value\" fill=\"#f97316\" />\n",[212,279,281,284,286],{"class":214,"line":280},3,[212,282,283],{"class":218},"\u003C/",[212,285,223],{"class":222},[212,287,271],{"class":218},[187,289,291],{"id":290},"responsive-sizing","Responsive sizing",[178,293,294,295,297,298,301],{},"Wrap your chart in ",[182,296,184],{}," to fill its parent container. All the chart demos on this site use ",[182,299,300],{},"ResponsiveContainer"," — here's an example:",[303,304],"chart-demo",{"description":305,"name":306,"src":307},"A chart using ResponsiveContainer to fill its parent width.","Responsive Chart","bar-charts/simple-bar-chart",[178,309,310,312,313,316],{},[182,311,300],{}," uses a ",[182,314,315],{},"ResizeObserver"," internally to track its parent's dimensions and passes them to the chart.",[178,318,319],{},"Common patterns:",[203,321,323],{"className":205,"code":322,"language":207,"meta":208,"style":208},"\u003C!-- Fixed height, full width -->\n\u003CResponsiveContainer width=\"100%\" :height=\"300\">\n  ...\n\u003C/ResponsiveContainer>\n\n\u003C!-- Percentage of parent -->\n\u003CResponsiveContainer width=\"100%\" height=\"100%\">\n  ...\n\u003C/ResponsiveContainer>\n\n\u003C!-- With aspect ratio -->\n\u003CResponsiveContainer width=\"100%\" :aspect=\"16 / 9\">\n  ...\n\u003C/ResponsiveContainer>\n",[182,324,325,331,365,370,379,386,392,422,427,436,441,447,486,491],{"__ignoreMap":208},[212,326,327],{"class":214,"line":215},[212,328,330],{"class":329},"sHwdD","\u003C!-- Fixed height, full width -->\n",[212,332,333,335,337,340,342,344,348,350,352,354,356,358,361,363],{"class":214,"line":274},[212,334,219],{"class":218},[212,336,300],{"class":222},[212,338,339],{"class":229}," width",[212,341,232],{"class":218},[212,343,235],{"class":218},[212,345,347],{"class":346},"sfazB","100%",[212,349,235],{"class":218},[212,351,226],{"class":218},[212,353,200],{"class":229},[212,355,232],{"class":218},[212,357,235],{"class":218},[212,359,360],{"class":238},"300",[212,362,235],{"class":218},[212,364,271],{"class":218},[212,366,367],{"class":214,"line":280},[212,368,369],{"class":266},"  ...\n",[212,371,373,375,377],{"class":214,"line":372},4,[212,374,283],{"class":218},[212,376,300],{"class":222},[212,378,271],{"class":218},[212,380,382],{"class":214,"line":381},5,[212,383,385],{"emptyLinePlaceholder":384},true,"\n",[212,387,389],{"class":214,"line":388},6,[212,390,391],{"class":329},"\u003C!-- Percentage of parent -->\n",[212,393,395,397,399,401,403,405,407,409,412,414,416,418,420],{"class":214,"line":394},7,[212,396,219],{"class":218},[212,398,300],{"class":222},[212,400,339],{"class":229},[212,402,232],{"class":218},[212,404,235],{"class":218},[212,406,347],{"class":346},[212,408,235],{"class":218},[212,410,411],{"class":229}," height",[212,413,232],{"class":218},[212,415,235],{"class":218},[212,417,347],{"class":346},[212,419,235],{"class":218},[212,421,271],{"class":218},[212,423,425],{"class":214,"line":424},8,[212,426,369],{"class":266},[212,428,430,432,434],{"class":214,"line":429},9,[212,431,283],{"class":218},[212,433,300],{"class":222},[212,435,271],{"class":218},[212,437,439],{"class":214,"line":438},10,[212,440,385],{"emptyLinePlaceholder":384},[212,442,444],{"class":214,"line":443},11,[212,445,446],{"class":329},"\u003C!-- With aspect ratio -->\n",[212,448,450,452,454,456,458,460,462,464,466,469,471,473,476,479,482,484],{"class":214,"line":449},12,[212,451,219],{"class":218},[212,453,300],{"class":222},[212,455,339],{"class":229},[212,457,232],{"class":218},[212,459,235],{"class":218},[212,461,347],{"class":346},[212,463,235],{"class":218},[212,465,226],{"class":218},[212,467,468],{"class":229},"aspect",[212,470,232],{"class":218},[212,472,235],{"class":218},[212,474,475],{"class":238},"16",[212,477,478],{"class":218}," /",[212,480,481],{"class":238}," 9",[212,483,235],{"class":218},[212,485,271],{"class":218},[212,487,489],{"class":214,"line":488},13,[212,490,369],{"class":266},[212,492,494,496,498],{"class":214,"line":493},14,[212,495,283],{"class":218},[212,497,300],{"class":222},[212,499,271],{"class":218},[187,501,503],{"id":502},"chart-margins","Chart margins",[178,505,506,507,510,511,514],{},"The ",[182,508,509],{},"margin"," prop adds internal padding between the chart edges and the drawing area. This chart uses ",[182,512,513],{},"margin: { top: 20 }"," to make room for labels above bars:",[303,516],{"description":517,"name":518,"src":519},"Bar chart with top margin for LabelList positioning.","Chart with Margins","bar-charts/label-bar-chart",[178,521,522,523,526],{},"Default margin is ",[182,524,525],{},"{ top: 5, right: 5, bottom: 5, left: 5 }",".",[178,528,529],{},"Increase margins when you need space for:",[531,532,533,537,547],"ul",{},[534,535,536],"li",{},"Axis labels that extend beyond the chart area",[534,538,539,542,543,546],{},[182,540,541],{},"\u003CLabelList>"," with ",[182,544,545],{},"position=\"top\""," on bars",[534,548,549],{},"Legend positioned outside the chart",[187,551,553],{"id":552},"common-sizing-issues","Common sizing issues",[178,555,556,560,561,542,563,566],{},[557,558,559],"strong",{},"Chart not visible",": Ensure the parent element has a defined width and height. ",[182,562,300],{},[182,564,565],{},"width=\"100%\""," requires its parent to have a non-zero width.",[178,568,569,572,573,575],{},[557,570,571],{},"Chart too small",": Check that ",[182,574,509],{}," values aren't consuming most of the available space. Large margins on a small chart can leave very little room for data.",[178,577,578,581,582,584,585,587,588,591],{},[557,579,580],{},"SSR rendering",": ",[182,583,300],{}," relies on ",[182,586,315],{}," and renders nothing on the server. Wrap it in ",[182,589,590],{},"\u003CClientOnly>"," in Nuxt/SSR environments:",[203,593,595],{"className":205,"code":594,"language":207,"meta":208,"style":208},"\u003CClientOnly>\n  \u003CResponsiveContainer width=\"100%\" :height=\"300\">\n    \u003CLineChart :data=\"data\">\n      \u003CLine data-key=\"value\" />\n    \u003C/LineChart>\n  \u003C/ResponsiveContainer>\n\u003C/ClientOnly>\n",[182,596,597,606,611,616,621,626,631],{"__ignoreMap":208},[212,598,599,601,604],{"class":214,"line":215},[212,600,219],{"class":218},[212,602,603],{"class":222},"ClientOnly",[212,605,271],{"class":218},[212,607,608],{"class":214,"line":274},[212,609,610],{"class":266},"  \u003CResponsiveContainer width=\"100%\" :height=\"300\">\n",[212,612,613],{"class":214,"line":280},[212,614,615],{"class":266},"    \u003CLineChart :data=\"data\">\n",[212,617,618],{"class":214,"line":372},[212,619,620],{"class":266},"      \u003CLine data-key=\"value\" />\n",[212,622,623],{"class":214,"line":381},[212,624,625],{"class":266},"    \u003C/LineChart>\n",[212,627,628],{"class":214,"line":388},[212,629,630],{"class":266},"  \u003C/ResponsiveContainer>\n",[212,632,633,635,637],{"class":214,"line":394},[212,634,283],{"class":218},[212,636,603],{"class":222},[212,638,271],{"class":218},[640,641,642],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":208,"searchDepth":274,"depth":274,"links":644},[645,646,647,648],{"id":189,"depth":274,"text":190},{"id":290,"depth":274,"text":291},{"id":502,"depth":274,"text":503},{"id":552,"depth":274,"text":553},"Control chart dimensions with explicit sizing or responsive containers","md",null,{},{"icon":51},{"title":48,"description":649},"jqQYNZS9efMrZPsmik3S0WHoe6IdFsNYDN9HCDeePBg",[657,659],{"title":43,"path":44,"stem":45,"description":658,"icon":46,"children":-1},"Control tick count, placement, and spacing on chart axes",{"title":53,"path":54,"stem":55,"description":660,"icon":56,"children":-1},"Understand and control the rendering order of chart elements",1775472912789]