[{"data":1,"prerenderedAt":935},["ShallowReactive",2],{"navigation_docs":3,"-guides-chart-size":177,"-guides-chart-size-surround":930},[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":923,"extension":924,"links":925,"meta":926,"navigation":927,"path":49,"seo":928,"stem":50,"__hash__":929},"docs/2.guides/05.chart-size.md",{"type":180,"value":181,"toc":914},"minimark",[182,195,200,211,297,304,314,562,577,584,593,599,607,610,772,776,787,792,798,801,821,825,838,847,864,911],[183,184,185,186,190,191,194],"p",{},"Every chart in vccs needs a width and height. You can set them explicitly, let the chart size itself with the ",[187,188,189],"code",{},"responsive"," prop, or wrap it in ",[187,192,193],{},"\u003CResponsiveContainer>",".",[196,197,199],"h2",{"id":198},"explicit-dimensions","Explicit dimensions",[183,201,202,203,206,207,210],{},"Pass ",[187,204,205],{},"width"," and ",[187,208,209],{},"height"," directly to the chart component:",[212,213,218],"pre",{"className":214,"code":215,"language":216,"meta":217,"style":217},"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,219,220,281,287],{"__ignoreMap":217},[221,222,225,229,233,236,239,242,245,249,251,253,255,257,259,262,264,266,269,271,273,276,278],"span",{"class":223,"line":224},"line",1,[221,226,228],{"class":227},"sMK4o","\u003C",[221,230,232],{"class":231},"swJcz","BarChart",[221,234,235],{"class":227}," :",[221,237,205],{"class":238},"spNyl",[221,240,241],{"class":227},"=",[221,243,244],{"class":227},"\"",[221,246,248],{"class":247},"sbssI","600",[221,250,244],{"class":227},[221,252,235],{"class":227},[221,254,209],{"class":238},[221,256,241],{"class":227},[221,258,244],{"class":227},[221,260,261],{"class":247},"400",[221,263,244],{"class":227},[221,265,235],{"class":227},[221,267,268],{"class":238},"data",[221,270,241],{"class":227},[221,272,244],{"class":227},[221,274,268],{"class":275},"sTEyZ",[221,277,244],{"class":227},[221,279,280],{"class":227},">\n",[221,282,284],{"class":223,"line":283},2,[221,285,286],{"class":275},"  \u003CBar data-key=\"value\" fill=\"#f97316\" />\n",[221,288,290,293,295],{"class":223,"line":289},3,[221,291,292],{"class":227},"\u003C/",[221,294,232],{"class":231},[221,296,280],{"class":227},[196,298,300,301,303],{"id":299},"responsive-sizing-with-the-responsive-prop","Responsive sizing with the ",[187,302,189],{}," prop",[183,305,306,307,309,310,313],{},"The simplest way to make a chart follow its parent is the ",[187,308,189],{}," prop (recommended). No extra wrapper component is needed — the chart's own root element fills the parent via standard CSS sizing and measures itself with a ",[187,311,312],{},"ResizeObserver",":",[212,315,317],{"className":214,"code":316,"language":216,"meta":217,"style":217},"\u003C!-- Full width, fixed height -->\n\u003CLineChart responsive :style=\"{ height: '300px' }\" :data=\"data\">\n  \u003CLine data-key=\"value\" fill=\"#f97316\" />\n\u003C/LineChart>\n\n\u003C!-- Fill a sized parent (flex/grid cell, etc.) -->\n\u003Cdiv style=\"width: 100%; height: 300px\">\n  \u003CLineChart responsive :data=\"data\">\n    \u003CLine data-key=\"value\" />\n  \u003C/LineChart>\n\u003C/div>\n\n\u003C!-- Keep an aspect ratio via CSS -->\n\u003CLineChart responsive :style=\"{ width: '100%', aspectRatio: '16 / 9' }\" :data=\"data\">\n  \u003CLine data-key=\"value\" />\n\u003C/LineChart>\n",[187,318,319,325,381,386,395,402,408,445,451,457,463,472,477,483,547,553],{"__ignoreMap":217},[221,320,321],{"class":223,"line":224},[221,322,324],{"class":323},"sHwdD","\u003C!-- Full width, fixed height -->\n",[221,326,327,329,332,335,337,340,342,344,347,350,352,355,359,362,365,367,369,371,373,375,377,379],{"class":223,"line":283},[221,328,228],{"class":227},[221,330,331],{"class":231},"LineChart",[221,333,334],{"class":238}," responsive",[221,336,235],{"class":227},[221,338,339],{"class":238},"style",[221,341,241],{"class":227},[221,343,244],{"class":227},[221,345,346],{"class":227},"{",[221,348,349],{"class":231}," height",[221,351,313],{"class":227},[221,353,354],{"class":227}," '",[221,356,358],{"class":357},"sfazB","300px",[221,360,361],{"class":227},"'",[221,363,364],{"class":227}," }",[221,366,244],{"class":227},[221,368,235],{"class":227},[221,370,268],{"class":238},[221,372,241],{"class":227},[221,374,244],{"class":227},[221,376,268],{"class":275},[221,378,244],{"class":227},[221,380,280],{"class":227},[221,382,383],{"class":223,"line":289},[221,384,385],{"class":275},"  \u003CLine data-key=\"value\" fill=\"#f97316\" />\n",[221,387,389,391,393],{"class":223,"line":388},4,[221,390,292],{"class":227},[221,392,331],{"class":231},[221,394,280],{"class":227},[221,396,398],{"class":223,"line":397},5,[221,399,401],{"emptyLinePlaceholder":400},true,"\n",[221,403,405],{"class":223,"line":404},6,[221,406,407],{"class":323},"\u003C!-- Fill a sized parent (flex/grid cell, etc.) -->\n",[221,409,411,413,416,419,421,423,426,428,431,434,436,438,441,443],{"class":223,"line":410},7,[221,412,228],{"class":227},[221,414,415],{"class":231},"div",[221,417,418],{"class":238}," style",[221,420,241],{"class":227},[221,422,244],{"class":227},[221,424,205],{"class":425},"sqsOY",[221,427,313],{"class":227},[221,429,430],{"class":247}," 100%",[221,432,433],{"class":227},";",[221,435,349],{"class":425},[221,437,313],{"class":227},[221,439,440],{"class":247}," 300px",[221,442,244],{"class":227},[221,444,280],{"class":227},[221,446,448],{"class":223,"line":447},8,[221,449,450],{"class":275},"  \u003CLineChart responsive :data=\"data\">\n",[221,452,454],{"class":223,"line":453},9,[221,455,456],{"class":275},"    \u003CLine data-key=\"value\" />\n",[221,458,460],{"class":223,"line":459},10,[221,461,462],{"class":275},"  \u003C/LineChart>\n",[221,464,466,468,470],{"class":223,"line":465},11,[221,467,292],{"class":227},[221,469,415],{"class":231},[221,471,280],{"class":227},[221,473,475],{"class":223,"line":474},12,[221,476,401],{"emptyLinePlaceholder":400},[221,478,480],{"class":223,"line":479},13,[221,481,482],{"class":323},"\u003C!-- Keep an aspect ratio via CSS -->\n",[221,484,486,488,490,492,494,496,498,500,502,505,507,509,512,514,517,520,522,524,527,529,531,533,535,537,539,541,543,545],{"class":223,"line":485},14,[221,487,228],{"class":227},[221,489,331],{"class":231},[221,491,334],{"class":238},[221,493,235],{"class":227},[221,495,339],{"class":238},[221,497,241],{"class":227},[221,499,244],{"class":227},[221,501,346],{"class":227},[221,503,504],{"class":231}," width",[221,506,313],{"class":227},[221,508,354],{"class":227},[221,510,511],{"class":357},"100%",[221,513,361],{"class":227},[221,515,516],{"class":227},",",[221,518,519],{"class":231}," aspectRatio",[221,521,313],{"class":227},[221,523,354],{"class":227},[221,525,526],{"class":357},"16 / 9",[221,528,361],{"class":227},[221,530,364],{"class":227},[221,532,244],{"class":227},[221,534,235],{"class":227},[221,536,268],{"class":238},[221,538,241],{"class":227},[221,540,244],{"class":227},[221,542,268],{"class":275},[221,544,244],{"class":227},[221,546,280],{"class":227},[221,548,550],{"class":223,"line":549},15,[221,551,552],{"class":275},"  \u003CLine data-key=\"value\" />\n",[221,554,556,558,560],{"class":223,"line":555},16,[221,557,292],{"class":227},[221,559,331],{"class":231},[221,561,280],{"class":227},[183,563,564,565,567,568,570,571,573,574,576],{},"When ",[187,566,189],{}," is set, any ",[187,569,205],{},"/",[187,572,209],{}," props are ignored — sizing is driven entirely by CSS. Give the parent (or the chart's ",[187,575,339],{},") a definite height, otherwise the chart collapses to zero height and nothing renders.",[196,578,580,581],{"id":579},"responsive-sizing-with-responsivecontainer","Responsive sizing with ",[187,582,583],{},"ResponsiveContainer",[183,585,586,587,589,590,592],{},"Alternatively, wrap your chart in ",[187,588,193],{}," to fill its parent container. All the chart demos on this site use ",[187,591,583],{}," — here's an example:",[594,595],"chart-demo",{"description":596,"name":597,"src":598},"A chart using ResponsiveContainer to fill its parent width.","Responsive Chart","bar-charts/simple-bar-chart",[183,600,601,603,604,606],{},[187,602,583],{}," uses a ",[187,605,312],{}," internally to track its parent's dimensions and passes them to the chart.",[183,608,609],{},"Common patterns:",[212,611,613],{"className":214,"code":612,"language":216,"meta":217,"style":217},"\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,614,615,620,651,656,664,668,673,701,705,713,717,722,760,764],{"__ignoreMap":217},[221,616,617],{"class":223,"line":224},[221,618,619],{"class":323},"\u003C!-- Fixed height, full width -->\n",[221,621,622,624,626,628,630,632,634,636,638,640,642,644,647,649],{"class":223,"line":283},[221,623,228],{"class":227},[221,625,583],{"class":231},[221,627,504],{"class":238},[221,629,241],{"class":227},[221,631,244],{"class":227},[221,633,511],{"class":357},[221,635,244],{"class":227},[221,637,235],{"class":227},[221,639,209],{"class":238},[221,641,241],{"class":227},[221,643,244],{"class":227},[221,645,646],{"class":247},"300",[221,648,244],{"class":227},[221,650,280],{"class":227},[221,652,653],{"class":223,"line":289},[221,654,655],{"class":275},"  ...\n",[221,657,658,660,662],{"class":223,"line":388},[221,659,292],{"class":227},[221,661,583],{"class":231},[221,663,280],{"class":227},[221,665,666],{"class":223,"line":397},[221,667,401],{"emptyLinePlaceholder":400},[221,669,670],{"class":223,"line":404},[221,671,672],{"class":323},"\u003C!-- Percentage of parent -->\n",[221,674,675,677,679,681,683,685,687,689,691,693,695,697,699],{"class":223,"line":410},[221,676,228],{"class":227},[221,678,583],{"class":231},[221,680,504],{"class":238},[221,682,241],{"class":227},[221,684,244],{"class":227},[221,686,511],{"class":357},[221,688,244],{"class":227},[221,690,349],{"class":238},[221,692,241],{"class":227},[221,694,244],{"class":227},[221,696,511],{"class":357},[221,698,244],{"class":227},[221,700,280],{"class":227},[221,702,703],{"class":223,"line":447},[221,704,655],{"class":275},[221,706,707,709,711],{"class":223,"line":453},[221,708,292],{"class":227},[221,710,583],{"class":231},[221,712,280],{"class":227},[221,714,715],{"class":223,"line":459},[221,716,401],{"emptyLinePlaceholder":400},[221,718,719],{"class":223,"line":465},[221,720,721],{"class":323},"\u003C!-- With aspect ratio -->\n",[221,723,724,726,728,730,732,734,736,738,740,743,745,747,750,753,756,758],{"class":223,"line":474},[221,725,228],{"class":227},[221,727,583],{"class":231},[221,729,504],{"class":238},[221,731,241],{"class":227},[221,733,244],{"class":227},[221,735,511],{"class":357},[221,737,244],{"class":227},[221,739,235],{"class":227},[221,741,742],{"class":238},"aspect",[221,744,241],{"class":227},[221,746,244],{"class":227},[221,748,749],{"class":247},"16",[221,751,752],{"class":227}," /",[221,754,755],{"class":247}," 9",[221,757,244],{"class":227},[221,759,280],{"class":227},[221,761,762],{"class":223,"line":479},[221,763,655],{"class":275},[221,765,766,768,770],{"class":223,"line":485},[221,767,292],{"class":227},[221,769,583],{"class":231},[221,771,280],{"class":227},[196,773,775],{"id":774},"chart-margins","Chart margins",[183,777,778,779,782,783,786],{},"The ",[187,780,781],{},"margin"," prop adds internal padding between the chart edges and the drawing area. This chart uses ",[187,784,785],{},"margin: { top: 20 }"," to make room for labels above bars:",[594,788],{"description":789,"name":790,"src":791},"Bar chart with top margin for LabelList positioning.","Chart with Margins","bar-charts/label-bar-chart",[183,793,794,795,194],{},"Default margin is ",[187,796,797],{},"{ top: 5, right: 5, bottom: 5, left: 5 }",[183,799,800],{},"Increase margins when you need space for:",[802,803,804,808,818],"ul",{},[805,806,807],"li",{},"Axis labels that extend beyond the chart area",[805,809,810,813,814,817],{},[187,811,812],{},"\u003CLabelList>"," with ",[187,815,816],{},"position=\"top\""," on bars",[805,819,820],{},"Legend positioned outside the chart",[196,822,824],{"id":823},"common-sizing-issues","Common sizing issues",[183,826,827,831,832,834,835,837],{},[828,829,830],"strong",{},"Chart not visible",": Ensure the parent element has a defined width and height. Both the ",[187,833,189],{}," prop and ",[187,836,583],{}," require the parent to have a non-zero size (a definite height in particular).",[183,839,840,843,844,846],{},[828,841,842],{},"Chart too small",": Check that ",[187,845,781],{}," values aren't consuming most of the available space. Large margins on a small chart can leave very little room for data.",[183,848,849,852,853,834,855,857,858,860,861,313],{},[828,850,851],{},"SSR rendering",": Both the ",[187,854,189],{},[187,856,583],{}," rely on ",[187,859,312],{},", so the chart only sizes itself on the client. In Nuxt/SSR environments, wrap the chart in ",[187,862,863],{},"\u003CClientOnly>",[212,865,867],{"className":214,"code":866,"language":216,"meta":217,"style":217},"\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,868,869,878,883,888,893,898,903],{"__ignoreMap":217},[221,870,871,873,876],{"class":223,"line":224},[221,872,228],{"class":227},[221,874,875],{"class":231},"ClientOnly",[221,877,280],{"class":227},[221,879,880],{"class":223,"line":283},[221,881,882],{"class":275},"  \u003CResponsiveContainer width=\"100%\" :height=\"300\">\n",[221,884,885],{"class":223,"line":289},[221,886,887],{"class":275},"    \u003CLineChart :data=\"data\">\n",[221,889,890],{"class":223,"line":388},[221,891,892],{"class":275},"      \u003CLine data-key=\"value\" />\n",[221,894,895],{"class":223,"line":397},[221,896,897],{"class":275},"    \u003C/LineChart>\n",[221,899,900],{"class":223,"line":404},[221,901,902],{"class":275},"  \u003C/ResponsiveContainer>\n",[221,904,905,907,909],{"class":223,"line":410},[221,906,292],{"class":227},[221,908,875],{"class":231},[221,910,280],{"class":227},[339,912,913],{},"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}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":217,"searchDepth":283,"depth":283,"links":915},[916,917,919,921,922],{"id":198,"depth":283,"text":199},{"id":299,"depth":283,"text":918},"Responsive sizing with the responsive prop",{"id":579,"depth":283,"text":920},"Responsive sizing with ResponsiveContainer",{"id":774,"depth":283,"text":775},{"id":823,"depth":283,"text":824},"Control chart dimensions with explicit sizing or responsive containers","md",null,{},{"icon":51},{"title":48,"description":923},"52jRMolTcwtUEhfSiT7ire8SVZe8gzxwg2oScXQlfJ8",[931,933],{"title":43,"path":44,"stem":45,"description":932,"icon":46,"children":-1},"Control tick count, placement, and spacing on chart axes",{"title":53,"path":54,"stem":55,"description":934,"icon":56,"children":-1},"Understand and control the rendering order of chart elements",1783000305693]