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