[{"data":1,"prerenderedAt":758},["ShallowReactive",2],{"navigation_docs":3,"-guides-rounded-bar-corners":284,"-guides-rounded-bar-corners-surround":753},[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":68,"body":286,"description":746,"extension":747,"links":748,"meta":749,"navigation":750,"path":69,"seo":751,"stem":70,"__hash__":752},"docs\u002F2.guides\u002F09.rounded-bar-corners.md",{"type":287,"value":288,"toc":740},"minimark",[289,302,307,314,320,323,545,549,552,557,561,575,639,643,653,736],[290,291,292,293,297,298,301],"p",{},"The ",[294,295,296],"code",{},"radius"," prop on ",[294,299,300],{},"\u003CBar>"," adds rounded corners to bar rectangles using SVG arc commands.",[303,304,306],"h2",{"id":305},"per-corner-radius","Per-corner radius",[290,308,309,310,313],{},"Pass an array of four numbers for ",[294,311,312],{},"[topLeft, topRight, bottomRight, bottomLeft]",":",[315,316],"chart-demo",{"description":317,"name":318,"src":319},"Bar chart with a radius of 10 on all corners.","Rounded Bars","guide-charts\u002Frounded-bars-chart",[290,321,322],{},"Other patterns:",[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","\u003C!-- Uniform radius on all corners -->\n\u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"8\" \u002F>\n\n\u003C!-- Round only the bottom corners -->\n\u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"[0, 0, 8, 8]\" \u002F>\n\n\u003C!-- Rounded top (half of a 40 px bar) -->\n\u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"[20, 20, 0, 0]\" \u002F>\n","vue","",[294,331,332,341,398,405,411,475,480,486],{"__ignoreMap":329},[333,334,337],"span",{"class":335,"line":336},"line",1,[333,338,340],{"class":339},"sHwdD","\u003C!-- Uniform radius on all corners -->\n",[333,342,344,348,352,356,359,362,366,368,371,373,375,378,380,383,385,387,389,393,395],{"class":335,"line":343},2,[333,345,347],{"class":346},"sMK4o","\u003C",[333,349,351],{"class":350},"swJcz","Bar",[333,353,355],{"class":354},"spNyl"," data-key",[333,357,358],{"class":346},"=",[333,360,361],{"class":346},"\"",[333,363,365],{"class":364},"sfazB","value",[333,367,361],{"class":346},[333,369,370],{"class":354}," fill",[333,372,358],{"class":346},[333,374,361],{"class":346},[333,376,377],{"class":364},"#f97316",[333,379,361],{"class":346},[333,381,382],{"class":346}," :",[333,384,296],{"class":354},[333,386,358],{"class":346},[333,388,361],{"class":346},[333,390,392],{"class":391},"sbssI","8",[333,394,361],{"class":346},[333,396,397],{"class":346}," \u002F>\n",[333,399,401],{"class":335,"line":400},3,[333,402,404],{"emptyLinePlaceholder":403},true,"\n",[333,406,408],{"class":335,"line":407},4,[333,409,410],{"class":339},"\u003C!-- Round only the bottom corners -->\n",[333,412,414,416,418,420,422,424,426,428,430,432,434,436,438,440,442,444,446,450,453,456,459,461,464,466,468,471,473],{"class":335,"line":413},5,[333,415,347],{"class":346},[333,417,351],{"class":350},[333,419,355],{"class":354},[333,421,358],{"class":346},[333,423,361],{"class":346},[333,425,365],{"class":364},[333,427,361],{"class":346},[333,429,370],{"class":354},[333,431,358],{"class":346},[333,433,361],{"class":346},[333,435,377],{"class":364},[333,437,361],{"class":346},[333,439,382],{"class":346},[333,441,296],{"class":354},[333,443,358],{"class":346},[333,445,361],{"class":346},[333,447,449],{"class":448},"sTEyZ","[",[333,451,452],{"class":391},"0",[333,454,455],{"class":346},",",[333,457,458],{"class":391}," 0",[333,460,455],{"class":346},[333,462,463],{"class":391}," 8",[333,465,455],{"class":346},[333,467,463],{"class":391},[333,469,470],{"class":448},"]",[333,472,361],{"class":346},[333,474,397],{"class":346},[333,476,478],{"class":335,"line":477},6,[333,479,404],{"emptyLinePlaceholder":403},[333,481,483],{"class":335,"line":482},7,[333,484,485],{"class":339},"\u003C!-- Rounded top (half of a 40 px bar) -->\n",[333,487,489,491,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,526,528,531,533,535,537,539,541,543],{"class":335,"line":488},8,[333,490,347],{"class":346},[333,492,351],{"class":350},[333,494,355],{"class":354},[333,496,358],{"class":346},[333,498,361],{"class":346},[333,500,365],{"class":364},[333,502,361],{"class":346},[333,504,370],{"class":354},[333,506,358],{"class":346},[333,508,361],{"class":346},[333,510,377],{"class":364},[333,512,361],{"class":346},[333,514,382],{"class":346},[333,516,296],{"class":354},[333,518,358],{"class":346},[333,520,361],{"class":346},[333,522,449],{"class":448},[333,524,525],{"class":391},"20",[333,527,455],{"class":346},[333,529,530],{"class":391}," 20",[333,532,455],{"class":346},[333,534,458],{"class":391},[333,536,455],{"class":346},[333,538,458],{"class":391},[333,540,470],{"class":448},[333,542,361],{"class":346},[333,544,397],{"class":346},[303,546,548],{"id":547},"stacked-bars-with-radius","Stacked bars with radius",[290,550,551],{},"When bars are stacked, applying radius to all bars in the stack can cause visual artifacts — rounded corners in the middle of the stack create gaps. Apply radius only to the top bar:",[315,553],{"description":554,"name":555,"src":556},"Stacked bar chart with radius only on the top bar.","Stacked Rounded Bars","guide-charts\u002Fstacked-rounded-bars-chart",[303,558,560],{"id":559},"horizontal-bars","Horizontal bars",[290,562,563,564,567,568,571,572,313],{},"For horizontal layouts (",[294,565,566],{},"layout=\"vertical\"","), the array still means ",[294,569,570],{},"[top-left, top-right, bottom-right, bottom-left]"," on screen; the corners do not rotate. To round the end of a horizontal bar, use ",[294,573,574],{},"[0, r, r, 0]",[324,576,578],{"className":326,"code":577,"language":328,"meta":329,"style":329},"\u003CBarChart :data=\"data\" layout=\"vertical\">\n  \u003CXAxis type=\"number\" \u002F>\n  \u003CYAxis data-key=\"name\" type=\"category\" \u002F>\n  \u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"[0, 8, 8, 0]\" \u002F>\n\u003C\u002FBarChart>\n",[294,579,580,615,620,625,630],{"__ignoreMap":329},[333,581,582,584,587,589,592,594,596,598,600,603,605,607,610,612],{"class":335,"line":336},[333,583,347],{"class":346},[333,585,586],{"class":350},"BarChart",[333,588,382],{"class":346},[333,590,591],{"class":354},"data",[333,593,358],{"class":346},[333,595,361],{"class":346},[333,597,591],{"class":448},[333,599,361],{"class":346},[333,601,602],{"class":354}," layout",[333,604,358],{"class":346},[333,606,361],{"class":346},[333,608,609],{"class":364},"vertical",[333,611,361],{"class":346},[333,613,614],{"class":346},">\n",[333,616,617],{"class":335,"line":343},[333,618,619],{"class":448},"  \u003CXAxis type=\"number\" \u002F>\n",[333,621,622],{"class":335,"line":400},[333,623,624],{"class":448},"  \u003CYAxis data-key=\"name\" type=\"category\" \u002F>\n",[333,626,627],{"class":335,"line":407},[333,628,629],{"class":448},"  \u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"[0, 8, 8, 0]\" \u002F>\n",[333,631,632,635,637],{"class":335,"line":413},[333,633,634],{"class":346},"\u003C\u002F",[333,636,586],{"class":350},[333,638,614],{"class":346},[303,640,642],{"id":641},"background-bars-with-radius","Background bars with radius",[290,644,645,646,648,649,652],{},"Background bars also accept a ",[294,647,296],{}," via the ",[294,650,651],{},"background"," prop:",[324,654,656],{"className":326,"code":655,"language":328,"meta":329,"style":329},"\u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"8\" :background=\"{ fill: '#eee', radius: 8 }\" \u002F>\n",[294,657,658],{"__ignoreMap":329},[333,659,660,662,664,666,668,670,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,702,704,707,709,711,714,717,720,722,725,727,729,732,734],{"class":335,"line":336},[333,661,347],{"class":346},[333,663,351],{"class":350},[333,665,355],{"class":354},[333,667,358],{"class":346},[333,669,361],{"class":346},[333,671,365],{"class":364},[333,673,361],{"class":346},[333,675,370],{"class":354},[333,677,358],{"class":346},[333,679,361],{"class":346},[333,681,377],{"class":364},[333,683,361],{"class":346},[333,685,382],{"class":346},[333,687,296],{"class":354},[333,689,358],{"class":346},[333,691,361],{"class":346},[333,693,392],{"class":391},[333,695,361],{"class":346},[333,697,382],{"class":346},[333,699,651],{"class":354},[333,701,358],{"class":346},[333,703,361],{"class":346},[333,705,706],{"class":346},"{",[333,708,370],{"class":350},[333,710,313],{"class":346},[333,712,713],{"class":346}," '",[333,715,716],{"class":364},"#eee",[333,718,719],{"class":346},"'",[333,721,455],{"class":346},[333,723,724],{"class":350}," radius",[333,726,313],{"class":346},[333,728,463],{"class":391},[333,730,731],{"class":346}," }",[333,733,361],{"class":346},[333,735,397],{"class":346},[737,738,739],"style",{},"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 .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 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);}",{"title":329,"searchDepth":343,"depth":343,"links":741},[742,743,744,745],{"id":305,"depth":343,"text":306},{"id":547,"depth":343,"text":548},{"id":559,"depth":343,"text":560},{"id":641,"depth":343,"text":642},"Add rounded corners to bar charts using the radius prop","md",null,{},{"icon":71},{"title":68,"description":746},"pPWFqsqve5PYOv-chtezomDfr_xvufTzBxzebGkDzsI",[754,756],{"title":63,"path":64,"stem":65,"description":755,"icon":66,"children":-1},"Optimize chart rendering for large datasets and complex visualizations",{"title":73,"path":74,"stem":75,"description":757,"icon":76,"children":-1},"Control bar width, spacing, and alignment within categories",1793527166295]