Skip to content

Commit 30592e8

Browse files
bernardobelchioralexfauquetteJCQuintasrenovate[bot]flaviendelangle
authored
[charts] Add series color callback (#20084)
Signed-off-by: Bernardo Belchior <[email protected]> Signed-off-by: Michel Engelen <[email protected]> Signed-off-by: Gene Arch <[email protected]> Co-authored-by: alex <[email protected]> Co-authored-by: Jose C Quintas Jr <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Flavien DELANGLE <[email protected]> Co-authored-by: Michel Engelen <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]> Co-authored-by: Gene Arch <[email protected]> Co-authored-by: Rom Grk <[email protected]> Co-authored-by: Jan Potoms <[email protected]> Co-authored-by: Copilot <[email protected]> Co-authored-by: Rita <[email protected]>
1 parent da98471 commit 30592e8

File tree

30 files changed

+382
-46
lines changed

30 files changed

+382
-46
lines changed

‎docs/data/charts/styling/ColorCallback.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import * as React from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import Typography from '@mui/material/Typography';
4+
import { BarChart } from '@mui/x-charts/BarChart';
5+
6+
const clubs = [
7+
'Arsenal',
8+
'Liverpool',
9+
'Man Utd',
10+
'Tottenham',
11+
'Everton',
12+
'Sunderland',
13+
'Newcastle',
14+
'Nottingham Forest',
15+
'Leeds',
16+
'Man City',
17+
'West Ham',
18+
'Burnley',
19+
'Fulham',
20+
'Chelsea',
21+
'Aston Villa',
22+
'Wolves',
23+
'Crystal Palace',
24+
'Brentford',
25+
'Bournemouth',
26+
'Brighton',
27+
];
28+
29+
// Source: https://www.squawka.com/en/news/premier-league-net-spend-2025-26/
30+
const netSpendInPounds = [
31+
251.4, 235, 166.9, 137.8, 116, 113.4, 95.6, 95.4, 91.5, 80.2, 69.7, 57.8, 18.93,
32+
9.5, -8, -14.7, -23, -58.9, -63.3, -68.15,
33+
];
34+
35+
const clubColors = [
36+
'#EF0107', // Arsenal - Red
37+
'#C8102E', // Liverpool - Red
38+
'#DA291C', // Man Utd - Red
39+
'#132257', // Tottenham - Navy Blue
40+
'#003399', // Everton - Royal Blue
41+
'#E03A3E', // Sunderland - Red
42+
'#241F20', // Newcastle - Black
43+
'#DD0000', // Nottingham Forest - Red
44+
'#FFCD00', // Leeds - Yellow
45+
'#6CABDD', // Man City - Sky Blue
46+
'#7A263A', // West Ham - Claret
47+
'#6C1D45', // Burnley - Claret
48+
'#CC0000', // Fulham - Red
49+
'#034694', // Chelsea - Blue
50+
'#670E36', // Aston Villa - Claret
51+
'#FDB913', // Wolves - Gold
52+
'#1B458F', // Crystal Palace - Blue
53+
'#E30613', // Brentford - Red
54+
'#DA291C', // Bournemouth - Red
55+
'#0057B8', // Brighton - Blue
56+
];
57+
58+
const valueFormatter = (v) => (v < 0 ? `-£${-v}m` : `£${v}m`);
59+
60+
const chartsParams = {
61+
margin: { top: 20, right: 40, bottom: 20, left: 20 },
62+
xAxis: [{ data: clubs, tickLabelStyle: { angle: 45 }, height: 80 }],
63+
yAxis: [
64+
{
65+
width: 60,
66+
valueFormatter,
67+
},
68+
],
69+
series: [
70+
{
71+
data: netSpendInPounds,
72+
colorGetter: (data) => clubColors[data.dataIndex],
73+
valueFormatter,
74+
},
75+
],
76+
height: 400,
77+
};
78+
79+
export default function ColorCallback() {
80+
return (
81+
<Stack spacing={2} width="100%">
82+
<Typography variant="h6" textAlign="center">
83+
Premier League Clubs Net Spend - Summer 2025
84+
</Typography>
85+
<BarChart {...chartsParams} />
86+
<Typography variant="caption">Source: squawka.com</Typography>
87+
</Stack>
88+
);
89+
}

‎docs/data/charts/styling/ColorCallback.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import * as React from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import Typography from '@mui/material/Typography';
4+
import { BarChart, BarChartProps, BarSeries } from '@mui/x-charts/BarChart';
5+
6+
const clubs = [
7+
'Arsenal',
8+
'Liverpool',
9+
'Man Utd',
10+
'Tottenham',
11+
'Everton',
12+
'Sunderland',
13+
'Newcastle',
14+
'Nottingham Forest',
15+
'Leeds',
16+
'Man City',
17+
'West Ham',
18+
'Burnley',
19+
'Fulham',
20+
'Chelsea',
21+
'Aston Villa',
22+
'Wolves',
23+
'Crystal Palace',
24+
'Brentford',
25+
'Bournemouth',
26+
'Brighton',
27+
];
28+
29+
// Source: https://www.squawka.com/en/news/premier-league-net-spend-2025-26/
30+
const netSpendInPounds = [
31+
251.4, 235, 166.9, 137.8, 116, 113.4, 95.6, 95.4, 91.5, 80.2, 69.7, 57.8, 18.93,
32+
9.5, -8, -14.7, -23, -58.9, -63.3, -68.15,
33+
];
34+
const clubColors = [
35+
'#EF0107', // Arsenal - Red
36+
'#C8102E', // Liverpool - Red
37+
'#DA291C', // Man Utd - Red
38+
'#132257', // Tottenham - Navy Blue
39+
'#003399', // Everton - Royal Blue
40+
'#E03A3E', // Sunderland - Red
41+
'#241F20', // Newcastle - Black
42+
'#DD0000', // Nottingham Forest - Red
43+
'#FFCD00', // Leeds - Yellow
44+
'#6CABDD', // Man City - Sky Blue
45+
'#7A263A', // West Ham - Claret
46+
'#6C1D45', // Burnley - Claret
47+
'#CC0000', // Fulham - Red
48+
'#034694', // Chelsea - Blue
49+
'#670E36', // Aston Villa - Claret
50+
'#FDB913', // Wolves - Gold
51+
'#1B458F', // Crystal Palace - Blue
52+
'#E30613', // Brentford - Red
53+
'#DA291C', // Bournemouth - Red
54+
'#0057B8', // Brighton - Blue
55+
];
56+
57+
const valueFormatter = (v: number | null) => (v! < 0 ? `-£${-v!}m` : `£${v!}m`);
58+
59+
const chartsParams = {
60+
margin: { top: 20, right: 40, bottom: 20, left: 20 },
61+
xAxis: [{ data: clubs, tickLabelStyle: { angle: 45 }, height: 80 }],
62+
yAxis: [
63+
{
64+
width: 60,
65+
valueFormatter,
66+
},
67+
],
68+
series: [
69+
{
70+
data: netSpendInPounds,
71+
colorGetter: (data) => clubColors[data.dataIndex],
72+
valueFormatter,
73+
} satisfies BarSeries,
74+
],
75+
height: 400,
76+
} satisfies BarChartProps;
77+
78+
export default function ColorCallback() {
79+
return (
80+
<Stack spacing={2} width="100%">
81+
<Typography variant="h6" textAlign="center">
82+
Premier League Clubs Net Spend - Summer 2025
83+
</Typography>
84+
<BarChart {...chartsParams} />
85+
<Typography variant="caption">Source: squawka.com</Typography>
86+
</Stack>
87+
);
88+
}

‎docs/data/charts/styling/ColorCallback.tsx.preview‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<Typography variant="h6" textAlign="center">
2+
Premier League Clubs Net Spend - Summer 2025
3+
</Typography>
4+
<BarChart {...chartsParams} />
5+
<Typography variant="caption">Source: squawka.com</Typography>

‎docs/data/charts/styling/styling.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,16 @@ This configuration can be used in Bar Charts to set colors according to string c
102102
}
103103
```
104104

105+
### Color callback
106+
107+
If you need more control over the color assignment, you can provide a `colorGetter` callback prop to the chart component.
108+
109+
The callback receives a `{ value, dataIndex }` object and should return a color string for the provided data point.
110+
111+
In components where a series-level color is required (for example, the legend), the `color` prop is used instead.
112+
113+
{{"demo": "ColorCallback.js"}}
114+
105115
## Overlay
106116

107117
Charts have a _loading_ and _noData_ overlays that appear if:

‎docs/pages/x/api/charts/bar-series.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
"properties": {
99
"type": { "type": { "description": "'bar'" }, "required": true },
1010
"color": { "type": { "description": "string" } },
11+
"colorGetter": {
12+
"type": { "description": "(data: ColorCallbackValue&lt;TValue&gt;) =&gt; string" }
13+
},
1114
"data": { "type": { "description": "readonly (number | null)[]" } },
1215
"dataKey": { "type": { "description": "string" } },
1316
"highlightScope": { "type": { "description": "HighlightScope" } },

‎docs/pages/x/api/charts/line-series.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
"area": { "type": { "description": "boolean" } },
1111
"baseline": { "type": { "description": "number | 'min' | 'max'" }, "default": "0" },
1212
"color": { "type": { "description": "string" } },
13+
"colorGetter": {
14+
"type": { "description": "(data: ColorCallbackValue&lt;TValue&gt;) =&gt; string" }
15+
},
1316
"connectNulls": { "type": { "description": "boolean" }, "default": "false" },
1417
"curve": { "type": { "description": "CurveType" }, "default": "'monotoneX'" },
1518
"data": { "type": { "description": "readonly (number | null)[]" } },

‎docs/pages/x/api/charts/pie-series.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
"default": "(innerRadius - outerRadius) / 2"
2020
},
2121
"color": { "type": { "description": "string" } },
22+
"colorGetter": {
23+
"type": { "description": "(data: ColorCallbackValue&lt;TValue&gt;) =&gt; string" }
24+
},
2225
"cornerRadius": { "type": { "description": "number" }, "default": "0" },
2326
"cx": { "type": { "description": "number | string" }, "default": "'50%'" },
2427
"cy": { "type": { "description": "number | string" }, "default": "'50%'" },

‎docs/pages/x/api/charts/radar-series.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
"data": { "type": { "description": "number[]" }, "required": true },
1010
"type": { "type": { "description": "'radar'" }, "required": true },
1111
"color": { "type": { "description": "string" } },
12+
"colorGetter": {
13+
"type": { "description": "(data: ColorCallbackValue&lt;TValue&gt;) =&gt; string" }
14+
},
1215
"fillArea": { "type": { "description": "boolean" } },
1316
"hideMark": { "type": { "description": "boolean" } },
1417
"highlightScope": { "type": { "description": "HighlightScope" } },

‎docs/pages/x/api/charts/scatter-series.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
"properties": {
99
"type": { "type": { "description": "'scatter'" }, "required": true },
1010
"color": { "type": { "description": "string" } },
11+
"colorGetter": {
12+
"type": { "description": "(data: ColorCallbackValue&lt;TValue&gt;) =&gt; string" }
13+
},
1114
"data": { "type": { "description": "readonly ScatterValueType[]" } },
1215
"datasetKeys": {
1316
"type": {

‎docs/pages/x/api/charts/scatter.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"props": {
3+
"colorGetter": { "type": { "name": "func" }, "required": true },
34
"onItemClick": {
45
"type": { "name": "func" },
56
"signature": {

0 commit comments

Comments
 (0)