[charts] Apply axis colorMap to radial bar fill (mui#22800)

Author: JCQuintas

docs/data/charts/radial-bars/HealthRadialBarChart.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart';
+
+const healthData = [
+  { metric: 'Water', value: 5, goal: 8, color: '#00bcd4' },
+  { metric: 'Sleep', value: 6.5, goal: 8, color: '#3f51b5' },
+  { metric: 'Calories', value: 540, goal: 700, color: '#ff9800' },
+  { metric: 'Activity', value: 42, goal: 60, color: '#4caf50' },
+  { metric: 'Steps', value: 8200, goal: 10000, color: '#e91e63' },
+];
+
+const dataset = healthData.map((d) => ({
+  metric: d.metric,
+  progress: Math.round((d.value / d.goal) * 100),
+}));
+
+const highlightScope = { highlight: 'none', fade: 'none' };
+
+export default function HealthRadialBarChart() {
+  return (
+    <RadialBarChart
+      height={400}
+      dataset={dataset}
+      series={[
+        {
+          dataKey: 'progress',
+          layout: 'horizontal',
+          label: 'Progress',
+          highlightScope,
+          valueFormatter: (value) => `${value}%`,
+        },
+      ]}
+      radiusAxis={[
+        {
+          scaleType: 'band',
+          dataKey: 'metric',
+          categoryGapRatio: 0.3,
+          disableLine: true,
+          disableTicks: true,
+          colorMap: {
+            type: 'ordinal',
+            values: healthData.map((d) => d.metric),
+            colors: healthData.map((d) => d.color),
+          },
+        },
+      ]}
+      rotationAxis={[
+        {
+          scaleType: 'linear',
+          disableTickLabel: true,
+          disableLine: true,
+          disableTicks: true,
+          min: 0,
+          max: 100,
+          valueFormatter: (value) => `${value}%`,
+        },
+      ]}
+      axisHighlight={{ rotation: 'none', radius: 'none' }}
+      hideLegend
+      slotProps={{ tooltip: { trigger: 'none' } }}
+    />
+  );
+}

docs/data/charts/radial-bars/HealthRadialBarChart.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart';
+
+const healthData = [
+  { metric: 'Water', value: 5, goal: 8, color: '#00bcd4' },
+  { metric: 'Sleep', value: 6.5, goal: 8, color: '#3f51b5' },
+  { metric: 'Calories', value: 540, goal: 700, color: '#ff9800' },
+  { metric: 'Activity', value: 42, goal: 60, color: '#4caf50' },
+  { metric: 'Steps', value: 8200, goal: 10000, color: '#e91e63' },
+];
+
+const dataset = healthData.map((d) => ({
+  metric: d.metric,
+  progress: Math.round((d.value / d.goal) * 100),
+}));
+
+const highlightScope = { highlight: 'none', fade: 'none' } as const;
+
+export default function HealthRadialBarChart() {
+  return (
+    <RadialBarChart
+      height={400}
+      dataset={dataset}
+      series={[
+        {
+          dataKey: 'progress',
+          layout: 'horizontal',
+          label: 'Progress',
+          highlightScope,
+          valueFormatter: (value) => `${value}%`,
+        },
+      ]}
+      radiusAxis={[
+        {
+          scaleType: 'band',
+          dataKey: 'metric',
+          categoryGapRatio: 0.3,
+          disableLine: true,
+          disableTicks: true,
+          colorMap: {
+            type: 'ordinal',
+            values: healthData.map((d) => d.metric),
+            colors: healthData.map((d) => d.color),
+          },
+        },
+      ]}
+      rotationAxis={[
+        {
+          scaleType: 'linear',
+          disableTickLabel: true,
+          disableLine: true,
+          disableTicks: true,
+          min: 0,
+          max: 100,
+          valueFormatter: (value) => `${value}%`,
+        },
+      ]}
+      axisHighlight={{ rotation: 'none', radius: 'none' }}
+      hideLegend
+      slotProps={{ tooltip: { trigger: 'none' } }}
+    />
+  );
+}

docs/data/charts/radial-bars/radial-bars.md

@@ -36,6 +36,15 @@ The demo below demonstrates those options.
 
 {{"demo": "RadialBarConfig.js", "hideToolbar": true, "bg": "playground"}}
 
+## Coloring each bar
+
+Radial bars support the same [color scale](/x/react-charts/bars/#color-scale) as the bar chart.
+The only difference is that the cartesian `x` and `y` axes are replaced by the `rotationAxis` and `radiusAxis`, so you can set a `colorMap` on either of them.
+
+The demo below sets an `'ordinal'` color map on the `radiusAxis` to build a health dashboard where every metric ring tracks progress toward its goal.
+
+{{"demo": "HealthRadialBarChart.js", "bg": "outline"}}
+
 ## Click events
 
 The `RadialBarChart` provides an `onAxisClick` handler that fires when the user clicks anywhere in the chart area.

packages/x-charts-premium/src/RadialBarChart/useRadialBarPlotData.ts

@@ -15,6 +15,7 @@ import {
   type ChartsRadialAxisProps,
 } from '@mui/x-charts/internals';
 import { type SeriesId } from '@mui/x-charts/models';
+import getColor from './seriesConfig/getColor';
 
 interface ProcessedRadialBarData {
   seriesId: SeriesId;
@@ -102,6 +103,8 @@ function processRadialBarDataForPlot(
         const rotationOrigin = rotationAxisConfig.scale(0) ?? 0;
         const radiusOrigin = radiusAxisConfig.scale(0) ?? 0;
 
+        const colorGetter = getColor(seriesItem, rotationAxisConfig, radiusAxisConfig);
+
         const { barWidth: bandSlice, offset } = getBandSize(
           baseScale.bandwidth(),
           stackingGroups.length,
@@ -138,7 +141,7 @@ function processRadialBarDataForPlot(
             seriesId,
             dataIndex,
             hidden: seriesItem.hidden,
-            color: seriesItem.color,
+            color: colorGetter(dataIndex),
             value: seriesValue,
             startAngle: verticalLayout ? baseStart : valueStart,
             endAngle: verticalLayout ? baseEnd : valueEnd,