[{"data":1,"prerenderedAt":748},["ShallowReactive",2],{"navigation_docs":3,"-guides-bar-alignment":279,"-guides-bar-alignment-surround":743},[4,26,112,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Migrate from 0.6","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F3.migration","i-lucide-arrow-up-circle",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[32,37,42,47,52,57,62,67,72,77,82,87,92,97,102,107],{"title":33,"path":34,"stem":35,"icon":36},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":38,"path":39,"stem":40,"icon":41},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":48,"path":49,"stem":50,"icon":51},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":53,"path":54,"stem":55,"icon":56},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":58,"path":59,"stem":60,"icon":61},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":63,"path":64,"stem":65,"icon":66},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":68,"path":69,"stem":70,"icon":71},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":73,"path":74,"stem":75,"icon":76},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":78,"path":79,"stem":80,"icon":81},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":83,"path":84,"stem":85,"icon":86},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":88,"path":89,"stem":90,"icon":91},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":93,"path":94,"stem":95,"icon":96},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":98,"path":99,"stem":100,"icon":101},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":103,"path":104,"stem":105,"icon":106},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":108,"path":109,"stem":110,"icon":111},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":113,"icon":114,"path":115,"stem":116,"children":117,"page":25},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[118,123,128,133,138,143,148,153,158,163,167,172,177,182,187,192,197,201,206],{"title":119,"path":120,"stem":121,"icon":122},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":124,"path":125,"stem":126,"icon":127},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":129,"path":130,"stem":131,"icon":132},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":134,"path":135,"stem":136,"icon":137},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":139,"path":140,"stem":141,"icon":142},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":144,"path":145,"stem":146,"icon":147},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":149,"path":150,"stem":151,"icon":152},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":154,"path":155,"stem":156,"icon":157},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":159,"path":160,"stem":161,"icon":162},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":164,"path":165,"stem":166,"icon":51},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":168,"path":169,"stem":170,"icon":171},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":173,"path":174,"stem":175,"icon":176},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":178,"path":179,"stem":180,"icon":181},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":183,"path":184,"stem":185,"icon":186},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":188,"path":189,"stem":190,"icon":191},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":193,"path":194,"stem":195,"icon":196},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":198,"path":199,"stem":200,"icon":137},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":202,"path":203,"stem":204,"icon":205},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":207,"path":208,"stem":209,"icon":210},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":25},"Components","i-lucide-code","\u002Fcomponents","4.components",[217,222,227,231,236,240,245,249,254,259,264,269,274],{"title":218,"path":219,"stem":220,"icon":221},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":223,"path":224,"stem":225,"icon":226},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":228,"path":229,"stem":230,"icon":196},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":232,"path":233,"stem":234,"icon":235},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":237,"path":238,"stem":239,"icon":147},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":241,"path":242,"stem":243,"icon":244},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":246,"path":247,"stem":248,"icon":56},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":250,"path":251,"stem":252,"icon":253},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":255,"path":256,"stem":257,"icon":258},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":260,"path":261,"stem":262,"icon":263},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":265,"path":266,"stem":267,"icon":268},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":270,"path":271,"stem":272,"icon":273},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":275,"path":276,"stem":277,"icon":278},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":280,"title":68,"body":281,"description":736,"extension":737,"links":738,"meta":739,"navigation":740,"path":69,"seo":741,"stem":70,"__hash__":742},"docs\u002F2.guides\u002F10.bar-alignment.md",{"type":282,"value":283,"toc":728},"minimark",[284,288,293,309,314,317,323,391,397,401,411,482,486,491,546,550,557,641,645,724],[285,286,287],"p",{},"When rendering bar charts, vccs provides several props to control how bars are sized and spaced within each category.",[289,290,292],"h2",{"id":291},"bar-alignment-controls","Bar alignment controls",[285,294,295,296,300,301,304,305,308],{},"Here's how ",[297,298,299],"code",{},"bar-size",", ",[297,302,303],{},"bar-gap",", and ",[297,306,307],{},"bar-category-gap"," work together:",[310,311],"chart-demo",{"description":312,"name":68,"src":313},"Two-series bar chart with explicit barSize, barGap, and barCategoryGap.","guide-charts\u002Fbar-alignment-chart",[289,315,316],{"id":299},"Bar size",[285,318,319,320,322],{},"The ",[297,321,299],{}," prop sets the width (or height for horizontal bars) in pixels:",[324,325,330],"pre",{"className":326,"code":327,"language":328,"meta":329,"style":329},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBar data-key=\"value\" fill=\"#f97316\" :bar-size=\"20\" \u002F>\n","vue","",[297,331,332],{"__ignoreMap":329},[333,334,337,341,345,349,352,355,359,361,364,366,368,371,373,376,378,380,382,386,388],"span",{"class":335,"line":336},"line",1,[333,338,340],{"class":339},"sMK4o","\u003C",[333,342,344],{"class":343},"swJcz","Bar",[333,346,348],{"class":347},"spNyl"," data-key",[333,350,351],{"class":339},"=",[333,353,354],{"class":339},"\"",[333,356,358],{"class":357},"sfazB","value",[333,360,354],{"class":339},[333,362,363],{"class":347}," fill",[333,365,351],{"class":339},[333,367,354],{"class":339},[333,369,370],{"class":357},"#f97316",[333,372,354],{"class":339},[333,374,375],{"class":339}," :",[333,377,299],{"class":347},[333,379,351],{"class":339},[333,381,354],{"class":339},[333,383,385],{"class":384},"sbssI","20",[333,387,354],{"class":339},[333,389,390],{"class":339}," \u002F>\n",[285,392,393,394,396],{},"Without ",[297,395,299],{},", bars automatically fill the available space.",[289,398,400],{"id":399},"gap-between-bars","Gap between bars",[285,402,403,404,406,407,410],{},"Use ",[297,405,303],{}," on the chart container to control spacing between bars in the same category. A number is a gap in px; a string such as ",[297,408,409],{},"\"10%\""," is a percentage of the category width:",[324,412,414],{"className":326,"code":413,"language":328,"meta":329,"style":329},"\u003C!-- 10 px gap between bars (default: 4 px) -->\n\u003CBarChart :data=\"data\" :bar-gap=\"10\">\n  \u003CBar data-key=\"a\" fill=\"#f97316\" \u002F>\n  \u003CBar data-key=\"b\" fill=\"#14b8a6\" \u002F>\n\u003C\u002FBarChart>\n",[297,415,416,422,460,466,472],{"__ignoreMap":329},[333,417,418],{"class":335,"line":336},[333,419,421],{"class":420},"sHwdD","\u003C!-- 10 px gap between bars (default: 4 px) -->\n",[333,423,425,427,430,432,435,437,439,442,444,446,448,450,452,455,457],{"class":335,"line":424},2,[333,426,340],{"class":339},[333,428,429],{"class":343},"BarChart",[333,431,375],{"class":339},[333,433,434],{"class":347},"data",[333,436,351],{"class":339},[333,438,354],{"class":339},[333,440,434],{"class":441},"sTEyZ",[333,443,354],{"class":339},[333,445,375],{"class":339},[333,447,303],{"class":347},[333,449,351],{"class":339},[333,451,354],{"class":339},[333,453,454],{"class":384},"10",[333,456,354],{"class":339},[333,458,459],{"class":339},">\n",[333,461,463],{"class":335,"line":462},3,[333,464,465],{"class":441},"  \u003CBar data-key=\"a\" fill=\"#f97316\" \u002F>\n",[333,467,469],{"class":335,"line":468},4,[333,470,471],{"class":441},"  \u003CBar data-key=\"b\" fill=\"#14b8a6\" \u002F>\n",[333,473,475,478,480],{"class":335,"line":474},5,[333,476,477],{"class":339},"\u003C\u002F",[333,479,429],{"class":343},[333,481,459],{"class":339},[289,483,485],{"id":484},"gap-between-categories","Gap between categories",[285,487,403,488,490],{},[297,489,307],{}," to control spacing between groups of bars. Accepts a percentage or pixel value:",[324,492,494],{"className":326,"code":493,"language":328,"meta":329,"style":329},"\u003C!-- 20% of available space between categories (default: '10%') -->\n\u003CBarChart :data=\"data\" bar-category-gap=\"20%\">\n  \u003CBar data-key=\"value\" fill=\"#f97316\" \u002F>\n\u003C\u002FBarChart>\n",[297,495,496,501,533,538],{"__ignoreMap":329},[333,497,498],{"class":335,"line":336},[333,499,500],{"class":420},"\u003C!-- 20% of available space between categories (default: '10%') -->\n",[333,502,503,505,507,509,511,513,515,517,519,522,524,526,529,531],{"class":335,"line":424},[333,504,340],{"class":339},[333,506,429],{"class":343},[333,508,375],{"class":339},[333,510,434],{"class":347},[333,512,351],{"class":339},[333,514,354],{"class":339},[333,516,434],{"class":441},[333,518,354],{"class":339},[333,520,521],{"class":347}," bar-category-gap",[333,523,351],{"class":339},[333,525,354],{"class":339},[333,527,528],{"class":357},"20%",[333,530,354],{"class":339},[333,532,459],{"class":339},[333,534,535],{"class":335,"line":462},[333,536,537],{"class":441},"  \u003CBar data-key=\"value\" fill=\"#f97316\" \u002F>\n",[333,539,540,542,544],{"class":335,"line":468},[333,541,477],{"class":339},[333,543,429],{"class":343},[333,545,459],{"class":339},[289,547,549],{"id":548},"horizontal-bar-alignment","Horizontal bar alignment",[285,551,552,553,556],{},"For horizontal bars (",[297,554,555],{},"layout=\"vertical\"","), the same props apply but affect the vertical dimension:",[324,558,560],{"className":326,"code":559,"language":328,"meta":329,"style":329},"\u003CBarChart :data=\"data\" layout=\"vertical\" :bar-gap=\"4\" bar-category-gap=\"15%\">\n  \u003CXAxis type=\"number\" \u002F>\n  \u003CYAxis data-key=\"name\" type=\"category\" \u002F>\n  \u003CBar data-key=\"value\" fill=\"#f97316\" :bar-size=\"20\" \u002F>\n\u003C\u002FBarChart>\n",[297,561,562,618,623,628,633],{"__ignoreMap":329},[333,563,564,566,568,570,572,574,576,578,580,583,585,587,590,592,594,596,598,600,603,605,607,609,611,614,616],{"class":335,"line":336},[333,565,340],{"class":339},[333,567,429],{"class":343},[333,569,375],{"class":339},[333,571,434],{"class":347},[333,573,351],{"class":339},[333,575,354],{"class":339},[333,577,434],{"class":441},[333,579,354],{"class":339},[333,581,582],{"class":347}," layout",[333,584,351],{"class":339},[333,586,354],{"class":339},[333,588,589],{"class":357},"vertical",[333,591,354],{"class":339},[333,593,375],{"class":339},[333,595,303],{"class":347},[333,597,351],{"class":339},[333,599,354],{"class":339},[333,601,602],{"class":384},"4",[333,604,354],{"class":339},[333,606,521],{"class":347},[333,608,351],{"class":339},[333,610,354],{"class":339},[333,612,613],{"class":357},"15%",[333,615,354],{"class":339},[333,617,459],{"class":339},[333,619,620],{"class":335,"line":424},[333,621,622],{"class":441},"  \u003CXAxis type=\"number\" \u002F>\n",[333,624,625],{"class":335,"line":462},[333,626,627],{"class":441},"  \u003CYAxis data-key=\"name\" type=\"category\" \u002F>\n",[333,629,630],{"class":335,"line":468},[333,631,632],{"class":441},"  \u003CBar data-key=\"value\" fill=\"#f97316\" :bar-size=\"20\" \u002F>\n",[333,634,635,637,639],{"class":335,"line":474},[333,636,477],{"class":339},[333,638,429],{"class":343},[333,640,459],{"class":339},[289,642,644],{"id":643},"summary","Summary",[646,647,648,667],"table",{},[649,650,651],"thead",{},[652,653,654,658,661,664],"tr",{},[655,656,657],"th",{},"Prop",[655,659,660],{},"Applied to",[655,662,663],{},"Default",[655,665,666],{},"Description",[668,669,670,688,708],"tbody",{},[652,671,672,677,682,685],{},[673,674,675],"td",{},[297,676,299],{},[673,678,679],{},[297,680,681],{},"\u003CBar>",[673,683,684],{},"auto",[673,686,687],{},"Width of individual bars (px)",[652,689,690,694,697,701],{},[673,691,692],{},[297,693,303],{},[673,695,696],{},"Chart container",[673,698,699],{},[297,700,602],{},[673,702,703,704,707],{},"Gap between bars in same category (px, or ",[297,705,706],{},"'N%'"," of the category width)",[652,709,710,714,716,721],{},[673,711,712],{},[297,713,307],{},[673,715,696],{},[673,717,718],{},[297,719,720],{},"'10%'",[673,722,723],{},"Gap between category groups",[725,726,727],"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":329,"searchDepth":424,"depth":424,"links":729},[730,731,732,733,734,735],{"id":291,"depth":424,"text":292},{"id":299,"depth":424,"text":316},{"id":399,"depth":424,"text":400},{"id":484,"depth":424,"text":485},{"id":548,"depth":424,"text":549},{"id":643,"depth":424,"text":644},"Control bar width, spacing, and alignment within categories","md",null,{},{"icon":71},{"title":68,"description":736},"WNeT0QTts7oXxuB8OgcHK9tRyZlZqP6Ef4STB8PxCzo",[744,746],{"title":63,"path":64,"stem":65,"description":745,"icon":66,"children":-1},"Add rounded corners to bar charts using the radius prop",{"title":73,"path":74,"stem":75,"description":747,"icon":76,"children":-1},"Server-render charts in Nuxt with correct layout and clean hydration",1791811109636]