fix(charts): round only top corners of vertical bars, right corners of horizontal bars (fixes #10741)

Author: creazyfrog

apps/v4/registry/new-york-v4/charts/chart-bar-active.tsx

@@ -84,7 +84,7 @@ export function ChartBarActive() {
             <Bar
               dataKey="visitors"
               strokeWidth={2}
-              radius={8}
+              radius={[8, 8, 0, 0]}
               shape={({ index, ...props }: BarShapeProps) =>
                 index === ACTIVE_INDEX ? (
                   <Rectangle

apps/v4/registry/new-york-v4/charts/chart-bar-default.tsx

@@ -58,7 +58,7 @@ export function ChartBarDefault() {
               cursor={false}
               content={<ChartTooltipContent hideLabel />}
             />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={[8, 8, 0, 0]} />
           </BarChart>
         </ChartContainer>
       </CardContent>

apps/v4/registry/new-york-v4/charts/chart-bar-horizontal.tsx

@@ -66,7 +66,7 @@ export function ChartBarHorizontal() {
               cursor={false}
               content={<ChartTooltipContent hideLabel />}
             />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={[0, 5, 5, 0]} />
           </BarChart>
         </ChartContainer>
       </CardContent>

apps/v4/registry/new-york-v4/charts/chart-bar-label-custom.tsx

@@ -75,7 +75,7 @@ export function ChartBarLabelCustom() {
               cursor={false}
               content={<ChartTooltipContent indicator="line" />}
             />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4}>
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={[4, 4, 0, 0]}>
               <LabelList
                 dataKey="month"
                 position="insideLeft"

apps/v4/registry/new-york-v4/charts/chart-bar-label.tsx

@@ -64,7 +64,7 @@ export function ChartBarLabel() {
               cursor={false}
               content={<ChartTooltipContent hideLabel />}
             />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={[8, 8, 0, 0]}>
               <LabelList
                 position="top"
                 offset={12}

apps/v4/registry/new-york-v4/charts/chart-bar-mixed.tsx

@@ -86,7 +86,7 @@ export function ChartBarMixed() {
               cursor={false}
               content={<ChartTooltipContent hideLabel />}
             />
-            <Bar dataKey="visitors" radius={5} />
+            <Bar dataKey="visitors" radius={[5, 5, 0, 0]} />
           </BarChart>
         </ChartContainer>
       </CardContent>

apps/v4/registry/new-york-v4/charts/chart-bar-multiple.tsx

@@ -62,8 +62,8 @@ export function ChartBarMultiple() {
               cursor={false}
               content={<ChartTooltipContent indicator="dashed" />}
             />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={[4, 4, 0, 0]} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={[4, 4, 0, 0]} />
           </BarChart>
         </ChartContainer>
       </CardContent>