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