[{"data":1,"prerenderedAt":633},["ShallowReactive",2],{"navigation_docs":3,"-guides-bar-alignment":172,"-guides-bar-alignment-surround":628},[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":73,"body":174,"description":621,"extension":622,"links":623,"meta":624,"navigation":625,"path":74,"seo":626,"stem":75,"__hash__":627},"docs/2.guides/10.bar-alignment.md",{"type":175,"value":176,"toc":613},"minimark",[177,181,186,202,207,210,216,284,290,294,300,371,375,380,435,439,446,530,534,609],[178,179,180],"p",{},"When rendering bar charts, vccs provides several props to control how bars are sized and spaced within each category.",[182,183,185],"h2",{"id":184},"bar-alignment-controls","Bar alignment controls",[178,187,188,189,193,194,197,198,201],{},"Here's how ",[190,191,192],"code",{},"bar-size",", ",[190,195,196],{},"bar-gap",", and ",[190,199,200],{},"bar-category-gap"," work together:",[203,204],"chart-demo",{"description":205,"name":73,"src":206},"Two-series bar chart with explicit barSize, barGap, and barCategoryGap.","guide-charts/bar-alignment-chart",[182,208,209],{"id":192},"Bar size",[178,211,212,213,215],{},"The ",[190,214,192],{}," prop sets the width (or height for horizontal bars) in pixels:",[217,218,223],"pre",{"className":219,"code":220,"language":221,"meta":222,"style":222},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBar data-key=\"value\" fill=\"#f97316\" :bar-size=\"20\" />\n","vue","",[190,224,225],{"__ignoreMap":222},[226,227,230,234,238,242,245,248,252,254,257,259,261,264,266,269,271,273,275,279,281],"span",{"class":228,"line":229},"line",1,[226,231,233],{"class":232},"sMK4o","\u003C",[226,235,237],{"class":236},"swJcz","Bar",[226,239,241],{"class":240},"spNyl"," data-key",[226,243,244],{"class":232},"=",[226,246,247],{"class":232},"\"",[226,249,251],{"class":250},"sfazB","value",[226,253,247],{"class":232},[226,255,256],{"class":240}," fill",[226,258,244],{"class":232},[226,260,247],{"class":232},[226,262,263],{"class":250},"#f97316",[226,265,247],{"class":232},[226,267,268],{"class":232}," :",[226,270,192],{"class":240},[226,272,244],{"class":232},[226,274,247],{"class":232},[226,276,278],{"class":277},"sbssI","20",[226,280,247],{"class":232},[226,282,283],{"class":232}," />\n",[178,285,286,287,289],{},"Without ",[190,288,192],{},", bars automatically fill the available space.",[182,291,293],{"id":292},"gap-between-bars","Gap between bars",[178,295,296,297,299],{},"Use ",[190,298,196],{}," on the chart container to control spacing between bars in the same category. The value is a percentage of the bar width:",[217,301,303],{"className":219,"code":302,"language":221,"meta":222,"style":222},"\u003C!-- 10% gap between bars (default: 4) -->\n\u003CBarChart :data=\"data\" :bar-gap=\"10\">\n  \u003CBar data-key=\"a\" fill=\"#f97316\" />\n  \u003CBar data-key=\"b\" fill=\"#14b8a6\" />\n\u003C/BarChart>\n",[190,304,305,311,349,355,361],{"__ignoreMap":222},[226,306,307],{"class":228,"line":229},[226,308,310],{"class":309},"sHwdD","\u003C!-- 10% gap between bars (default: 4) -->\n",[226,312,314,316,319,321,324,326,328,331,333,335,337,339,341,344,346],{"class":228,"line":313},2,[226,315,233],{"class":232},[226,317,318],{"class":236},"BarChart",[226,320,268],{"class":232},[226,322,323],{"class":240},"data",[226,325,244],{"class":232},[226,327,247],{"class":232},[226,329,323],{"class":330},"sTEyZ",[226,332,247],{"class":232},[226,334,268],{"class":232},[226,336,196],{"class":240},[226,338,244],{"class":232},[226,340,247],{"class":232},[226,342,343],{"class":277},"10",[226,345,247],{"class":232},[226,347,348],{"class":232},">\n",[226,350,352],{"class":228,"line":351},3,[226,353,354],{"class":330},"  \u003CBar data-key=\"a\" fill=\"#f97316\" />\n",[226,356,358],{"class":228,"line":357},4,[226,359,360],{"class":330},"  \u003CBar data-key=\"b\" fill=\"#14b8a6\" />\n",[226,362,364,367,369],{"class":228,"line":363},5,[226,365,366],{"class":232},"\u003C/",[226,368,318],{"class":236},[226,370,348],{"class":232},[182,372,374],{"id":373},"gap-between-categories","Gap between categories",[178,376,296,377,379],{},[190,378,200],{}," to control spacing between groups of bars. Accepts a percentage or pixel value:",[217,381,383],{"className":219,"code":382,"language":221,"meta":222,"style":222},"\u003C!-- 20% of available space between categories (default: '10%') -->\n\u003CBarChart :data=\"data\" bar-category-gap=\"20%\">\n  \u003CBar data-key=\"value\" fill=\"#f97316\" />\n\u003C/BarChart>\n",[190,384,385,390,422,427],{"__ignoreMap":222},[226,386,387],{"class":228,"line":229},[226,388,389],{"class":309},"\u003C!-- 20% of available space between categories (default: '10%') -->\n",[226,391,392,394,396,398,400,402,404,406,408,411,413,415,418,420],{"class":228,"line":313},[226,393,233],{"class":232},[226,395,318],{"class":236},[226,397,268],{"class":232},[226,399,323],{"class":240},[226,401,244],{"class":232},[226,403,247],{"class":232},[226,405,323],{"class":330},[226,407,247],{"class":232},[226,409,410],{"class":240}," bar-category-gap",[226,412,244],{"class":232},[226,414,247],{"class":232},[226,416,417],{"class":250},"20%",[226,419,247],{"class":232},[226,421,348],{"class":232},[226,423,424],{"class":228,"line":351},[226,425,426],{"class":330},"  \u003CBar data-key=\"value\" fill=\"#f97316\" />\n",[226,428,429,431,433],{"class":228,"line":357},[226,430,366],{"class":232},[226,432,318],{"class":236},[226,434,348],{"class":232},[182,436,438],{"id":437},"horizontal-bar-alignment","Horizontal bar alignment",[178,440,441,442,445],{},"For horizontal bars (",[190,443,444],{},"layout=\"vertical\"","), the same props apply but affect the vertical dimension:",[217,447,449],{"className":219,"code":448,"language":221,"meta":222,"style":222},"\u003CBarChart :data=\"data\" layout=\"vertical\" :bar-gap=\"4\" bar-category-gap=\"15%\">\n  \u003CXAxis type=\"number\" />\n  \u003CYAxis data-key=\"name\" type=\"category\" />\n  \u003CBar data-key=\"value\" fill=\"#f97316\" :bar-size=\"20\" />\n\u003C/BarChart>\n",[190,450,451,507,512,517,522],{"__ignoreMap":222},[226,452,453,455,457,459,461,463,465,467,469,472,474,476,479,481,483,485,487,489,492,494,496,498,500,503,505],{"class":228,"line":229},[226,454,233],{"class":232},[226,456,318],{"class":236},[226,458,268],{"class":232},[226,460,323],{"class":240},[226,462,244],{"class":232},[226,464,247],{"class":232},[226,466,323],{"class":330},[226,468,247],{"class":232},[226,470,471],{"class":240}," layout",[226,473,244],{"class":232},[226,475,247],{"class":232},[226,477,478],{"class":250},"vertical",[226,480,247],{"class":232},[226,482,268],{"class":232},[226,484,196],{"class":240},[226,486,244],{"class":232},[226,488,247],{"class":232},[226,490,491],{"class":277},"4",[226,493,247],{"class":232},[226,495,410],{"class":240},[226,497,244],{"class":232},[226,499,247],{"class":232},[226,501,502],{"class":250},"15%",[226,504,247],{"class":232},[226,506,348],{"class":232},[226,508,509],{"class":228,"line":313},[226,510,511],{"class":330},"  \u003CXAxis type=\"number\" />\n",[226,513,514],{"class":228,"line":351},[226,515,516],{"class":330},"  \u003CYAxis data-key=\"name\" type=\"category\" />\n",[226,518,519],{"class":228,"line":357},[226,520,521],{"class":330},"  \u003CBar data-key=\"value\" fill=\"#f97316\" :bar-size=\"20\" />\n",[226,523,524,526,528],{"class":228,"line":363},[226,525,366],{"class":232},[226,527,318],{"class":236},[226,529,348],{"class":232},[182,531,533],{"id":532},"summary","Summary",[535,536,537,556],"table",{},[538,539,540],"thead",{},[541,542,543,547,550,553],"tr",{},[544,545,546],"th",{},"Prop",[544,548,549],{},"Applied to",[544,551,552],{},"Default",[544,554,555],{},"Description",[557,558,559,577,593],"tbody",{},[541,560,561,566,571,574],{},[562,563,564],"td",{},[190,565,192],{},[562,567,568],{},[190,569,570],{},"\u003CBar>",[562,572,573],{},"auto",[562,575,576],{},"Width of individual bars (px)",[541,578,579,583,586,590],{},[562,580,581],{},[190,582,196],{},[562,584,585],{},"Chart container",[562,587,588],{},[190,589,491],{},[562,591,592],{},"Gap between bars in same category (%)",[541,594,595,599,601,606],{},[562,596,597],{},[190,598,200],{},[562,600,585],{},[562,602,603],{},[190,604,605],{},"'10%'",[562,607,608],{},"Gap between category groups",[610,611,612],"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":222,"searchDepth":313,"depth":313,"links":614},[615,616,617,618,619,620],{"id":184,"depth":313,"text":185},{"id":192,"depth":313,"text":209},{"id":292,"depth":313,"text":293},{"id":373,"depth":313,"text":374},{"id":437,"depth":313,"text":438},{"id":532,"depth":313,"text":533},"Control bar width, spacing, and alignment within categories","md",null,{},{"icon":76},{"title":73,"description":621},"IidHLqO98f_PNKUoGDRJnGdE6bXH9tPUtkb3Fn7WM-8",[629,631],{"title":68,"path":69,"stem":70,"description":630,"icon":71,"children":-1},"Add rounded corners to bar charts using the radius prop",{"title":84,"path":85,"stem":86,"description":632,"icon":87,"children":-1},"Build area charts to display quantitative data with filled regions",1775472912789]