[{"data":1,"prerenderedAt":644},["ShallowReactive",2],{"navigation_docs":3,"-guides-rounded-bar-corners":172,"-guides-rounded-bar-corners-surround":639},[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":68,"body":174,"description":632,"extension":633,"links":634,"meta":635,"navigation":636,"path":69,"seo":637,"stem":70,"__hash__":638},"docs/2.guides/09.rounded-bar-corners.md",{"type":175,"value":176,"toc":626},"minimark",[177,190,195,202,208,211,433,437,440,445,449,461,525,529,539,622],[178,179,180,181,185,186,189],"p",{},"The ",[182,183,184],"code",{},"radius"," prop on ",[182,187,188],{},"\u003CBar>"," adds rounded corners to bar rectangles using SVG arc commands.",[191,192,194],"h2",{"id":193},"per-corner-radius","Per-corner radius",[178,196,197,198,201],{},"Pass an array of four numbers for ",[182,199,200],{},"[topLeft, topRight, bottomRight, bottomLeft]",":",[203,204],"chart-demo",{"description":205,"name":206,"src":207},"Bar chart with uniform radius={10} on all corners.","Rounded Bars","guide-charts/rounded-bars-chart",[178,209,210],{},"Other patterns:",[212,213,218],"pre",{"className":214,"code":215,"language":216,"meta":217,"style":217},"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\" />\n\n\u003C!-- Round only the bottom corners -->\n\u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"[0, 0, 8, 8]\" />\n\n\u003C!-- Pill shape (half the bar width) -->\n\u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"[20, 20, 0, 0]\" />\n","vue","",[182,219,220,229,286,293,299,363,368,374],{"__ignoreMap":217},[221,222,225],"span",{"class":223,"line":224},"line",1,[221,226,228],{"class":227},"sHwdD","\u003C!-- Uniform radius on all corners -->\n",[221,230,232,236,240,244,247,250,254,256,259,261,263,266,268,271,273,275,277,281,283],{"class":223,"line":231},2,[221,233,235],{"class":234},"sMK4o","\u003C",[221,237,239],{"class":238},"swJcz","Bar",[221,241,243],{"class":242},"spNyl"," data-key",[221,245,246],{"class":234},"=",[221,248,249],{"class":234},"\"",[221,251,253],{"class":252},"sfazB","value",[221,255,249],{"class":234},[221,257,258],{"class":242}," fill",[221,260,246],{"class":234},[221,262,249],{"class":234},[221,264,265],{"class":252},"#f97316",[221,267,249],{"class":234},[221,269,270],{"class":234}," :",[221,272,184],{"class":242},[221,274,246],{"class":234},[221,276,249],{"class":234},[221,278,280],{"class":279},"sbssI","8",[221,282,249],{"class":234},[221,284,285],{"class":234}," />\n",[221,287,289],{"class":223,"line":288},3,[221,290,292],{"emptyLinePlaceholder":291},true,"\n",[221,294,296],{"class":223,"line":295},4,[221,297,298],{"class":227},"\u003C!-- Round only the bottom corners -->\n",[221,300,302,304,306,308,310,312,314,316,318,320,322,324,326,328,330,332,334,338,341,344,347,349,352,354,356,359,361],{"class":223,"line":301},5,[221,303,235],{"class":234},[221,305,239],{"class":238},[221,307,243],{"class":242},[221,309,246],{"class":234},[221,311,249],{"class":234},[221,313,253],{"class":252},[221,315,249],{"class":234},[221,317,258],{"class":242},[221,319,246],{"class":234},[221,321,249],{"class":234},[221,323,265],{"class":252},[221,325,249],{"class":234},[221,327,270],{"class":234},[221,329,184],{"class":242},[221,331,246],{"class":234},[221,333,249],{"class":234},[221,335,337],{"class":336},"sTEyZ","[",[221,339,340],{"class":279},"0",[221,342,343],{"class":234},",",[221,345,346],{"class":279}," 0",[221,348,343],{"class":234},[221,350,351],{"class":279}," 8",[221,353,343],{"class":234},[221,355,351],{"class":279},[221,357,358],{"class":336},"]",[221,360,249],{"class":234},[221,362,285],{"class":234},[221,364,366],{"class":223,"line":365},6,[221,367,292],{"emptyLinePlaceholder":291},[221,369,371],{"class":223,"line":370},7,[221,372,373],{"class":227},"\u003C!-- Pill shape (half the bar width) -->\n",[221,375,377,379,381,383,385,387,389,391,393,395,397,399,401,403,405,407,409,411,414,416,419,421,423,425,427,429,431],{"class":223,"line":376},8,[221,378,235],{"class":234},[221,380,239],{"class":238},[221,382,243],{"class":242},[221,384,246],{"class":234},[221,386,249],{"class":234},[221,388,253],{"class":252},[221,390,249],{"class":234},[221,392,258],{"class":242},[221,394,246],{"class":234},[221,396,249],{"class":234},[221,398,265],{"class":252},[221,400,249],{"class":234},[221,402,270],{"class":234},[221,404,184],{"class":242},[221,406,246],{"class":234},[221,408,249],{"class":234},[221,410,337],{"class":336},[221,412,413],{"class":279},"20",[221,415,343],{"class":234},[221,417,418],{"class":279}," 20",[221,420,343],{"class":234},[221,422,346],{"class":279},[221,424,343],{"class":234},[221,426,346],{"class":279},[221,428,358],{"class":336},[221,430,249],{"class":234},[221,432,285],{"class":234},[191,434,436],{"id":435},"stacked-bars-with-radius","Stacked bars with radius",[178,438,439],{},"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:",[203,441],{"description":442,"name":443,"src":444},"Stacked bar chart with radius only on the top bar.","Stacked Rounded Bars","guide-charts/stacked-rounded-bars-chart",[191,446,448],{"id":447},"horizontal-bars","Horizontal bars",[178,450,451,452,455,456,460],{},"For horizontal layouts (",[182,453,454],{},"layout=\"vertical\"","), the corner order stays the same but the visual direction changes. Top-left/top-right become the ",[457,458,459],"strong",{},"right side"," of horizontal bars:",[212,462,464],{"className":214,"code":463,"language":216,"meta":217,"style":217},"\u003CBarChart :data=\"data\" layout=\"vertical\">\n  \u003CXAxis type=\"number\" />\n  \u003CYAxis data-key=\"name\" type=\"category\" />\n  \u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"[0, 8, 8, 0]\" />\n\u003C/BarChart>\n",[182,465,466,501,506,511,516],{"__ignoreMap":217},[221,467,468,470,473,475,478,480,482,484,486,489,491,493,496,498],{"class":223,"line":224},[221,469,235],{"class":234},[221,471,472],{"class":238},"BarChart",[221,474,270],{"class":234},[221,476,477],{"class":242},"data",[221,479,246],{"class":234},[221,481,249],{"class":234},[221,483,477],{"class":336},[221,485,249],{"class":234},[221,487,488],{"class":242}," layout",[221,490,246],{"class":234},[221,492,249],{"class":234},[221,494,495],{"class":252},"vertical",[221,497,249],{"class":234},[221,499,500],{"class":234},">\n",[221,502,503],{"class":223,"line":231},[221,504,505],{"class":336},"  \u003CXAxis type=\"number\" />\n",[221,507,508],{"class":223,"line":288},[221,509,510],{"class":336},"  \u003CYAxis data-key=\"name\" type=\"category\" />\n",[221,512,513],{"class":223,"line":295},[221,514,515],{"class":336},"  \u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"[0, 8, 8, 0]\" />\n",[221,517,518,521,523],{"class":223,"line":301},[221,519,520],{"class":234},"\u003C/",[221,522,472],{"class":238},[221,524,500],{"class":234},[191,526,528],{"id":527},"background-bars-with-radius","Background bars with radius",[178,530,531,532,534,535,538],{},"Background bars also accept a ",[182,533,184],{}," via the ",[182,536,537],{},"background"," prop:",[212,540,542],{"className":214,"code":541,"language":216,"meta":217,"style":217},"\u003CBar data-key=\"value\" fill=\"#f97316\" :radius=\"8\" :background=\"{ fill: '#eee', radius: 8 }\" />\n",[182,543,544],{"__ignoreMap":217},[221,545,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584,586,588,590,593,595,597,600,603,606,608,611,613,615,618,620],{"class":223,"line":224},[221,547,235],{"class":234},[221,549,239],{"class":238},[221,551,243],{"class":242},[221,553,246],{"class":234},[221,555,249],{"class":234},[221,557,253],{"class":252},[221,559,249],{"class":234},[221,561,258],{"class":242},[221,563,246],{"class":234},[221,565,249],{"class":234},[221,567,265],{"class":252},[221,569,249],{"class":234},[221,571,270],{"class":234},[221,573,184],{"class":242},[221,575,246],{"class":234},[221,577,249],{"class":234},[221,579,280],{"class":279},[221,581,249],{"class":234},[221,583,270],{"class":234},[221,585,537],{"class":242},[221,587,246],{"class":234},[221,589,249],{"class":234},[221,591,592],{"class":234},"{",[221,594,258],{"class":238},[221,596,201],{"class":234},[221,598,599],{"class":234}," '",[221,601,602],{"class":252},"#eee",[221,604,605],{"class":234},"'",[221,607,343],{"class":234},[221,609,610],{"class":238}," radius",[221,612,201],{"class":234},[221,614,351],{"class":279},[221,616,617],{"class":234}," }",[221,619,249],{"class":234},[221,621,285],{"class":234},[623,624,625],"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":217,"searchDepth":231,"depth":231,"links":627},[628,629,630,631],{"id":193,"depth":231,"text":194},{"id":435,"depth":231,"text":436},{"id":447,"depth":231,"text":448},{"id":527,"depth":231,"text":528},"Add rounded corners to bar charts using the radius prop","md",null,{},{"icon":71},{"title":68,"description":632},"5Bn9UoiMsfb6yb2Oo7TYDlLnSKa0vq2u4r61B5cJz5w",[640,642],{"title":63,"path":64,"stem":65,"description":641,"icon":66,"children":-1},"Optimize chart rendering for large datasets and complex visualizations",{"title":73,"path":74,"stem":75,"description":643,"icon":76,"children":-1},"Control bar width, spacing, and alignment within categories",1775472912789]