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