[charts] Add documentation on border radius alternative for `BarChart…

…s` (mui#12859)

Signed-off-by: Jose C Quintas Jr <[email protected]>
Co-authored-by: Alexandre Fauquette <[email protected]>

docs/data/charts/bars/BorderRadius.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
+
+export default function BorderRadius() {
+  return (
+    <div style={{ width: '100%' }}>
+      <BarChart
+        dataset={dataset}
+        {...chartSetting}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 10px 10px 0px 0px)`,
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+const dataset = [
+  [59, 57, 86, 21, 'Jan'],
+  [50, 52, 78, 28, 'Fev'],
+  [47, 53, 106, 41, 'Mar'],
+  [54, 56, 92, 73, 'Apr'],
+  [57, 69, 92, 99, 'May'],
+  [60, 63, 103, 144, 'June'],
+  [59, 60, 105, 319, 'July'],
+  [65, 60, 106, 249, 'Aug'],
+  [51, 51, 95, 131, 'Sept'],
+  [60, 65, 97, 55, 'Oct'],
+  [67, 64, 76, 48, 'Nov'],
+  [61, 70, 103, 25, 'Dec'],
+].map(([london, paris, newYork, seoul, month]) => ({
+  london,
+  paris,
+  newYork,
+  seoul,
+  month,
+}));
+
+const valueFormatter = (value) => `${value}mm`;
+
+const chartSetting = {
+  series: [{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }],
+  height: 300,
+  sx: {
+    [`& .${axisClasses.directionY} .${axisClasses.label}`]: {
+      transform: 'translateX(-10px)',
+    },
+  },
+};

docs/data/charts/bars/BorderRadius.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
+
+export default function BorderRadius() {
+  return (
+    <div style={{ width: '100%' }}>
+      <BarChart
+        dataset={dataset}
+        {...chartSetting}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 10px 10px 0px 0px)`,
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+const dataset = [
+  [59, 57, 86, 21, 'Jan'],
+  [50, 52, 78, 28, 'Fev'],
+  [47, 53, 106, 41, 'Mar'],
+  [54, 56, 92, 73, 'Apr'],
+  [57, 69, 92, 99, 'May'],
+  [60, 63, 103, 144, 'June'],
+  [59, 60, 105, 319, 'July'],
+  [65, 60, 106, 249, 'Aug'],
+  [51, 51, 95, 131, 'Sept'],
+  [60, 65, 97, 55, 'Oct'],
+  [67, 64, 76, 48, 'Nov'],
+  [61, 70, 103, 25, 'Dec'],
+].map(([london, paris, newYork, seoul, month]) => ({
+  london,
+  paris,
+  newYork,
+  seoul,
+  month,
+}));
+
+const valueFormatter = (value: number | null) => `${value}mm`;
+
+const chartSetting = {
+  series: [{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }],
+  height: 300,
+  sx: {
+    [`& .${axisClasses.directionY} .${axisClasses.label}`]: {
+      transform: 'translateX(-10px)',
+    },
+  },
+};

docs/data/charts/bars/BorderRadius.tsx.preview

@@ -0,0 +1,9 @@
+<BarChart
+  dataset={dataset}
+  {...chartSetting}
+  slotProps={{
+    bar: {
+      clipPath: `inset(0px round 10px 10px 0px 0px)`,
+    },
+  }}
+/>

docs/data/charts/bars/bars.md

@@ -100,6 +100,27 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts
 
 {{"demo": "ColorScaleNoSnap.js"}}
 
+### Border Radius
+
+The border radius can be set by using a [clipPath](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) with
+[inset](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset) on the BarChart's `bar` [slot](/x/api/charts/bar-chart/#bar-chart-prop-slots)
+
+You can customize any of properties inside `inset`, the first property is "distance from border" and should be left at `0px` else it might break the bars alignment.
+
+```css
+inset(0px round <top-left> <top-right> <bottom-right> <bottom-left>)
+```
+
+{{"demo": "BorderRadius.js"}}
+
+:::warning
+There are few limitations to this method though.
+
+- [Stacking](/x/react-charts/bars/#stacking) won't look right with border radius.
+- On charts containing `Negative` and `Positive` values, rounding will apply to all of them in the same way, which might be undesirable.
+
+:::
+
 ## Click event
 
 Bar charts provides two click handlers: