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