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