[charts] Introduce the radar chart #16406

alexfauquette · 2025-01-30T16:25:36Z

This PR is a rough first version of the Radar chart #7925. Lots of features are missing.

The idea is to validate the data structure, and it's mapping to a rotation/radius scale system. If ok, we can merge this one and add features in distinct PR such that we keep them small enough to be relevant (I don't expect someone to read 200 files with 10 different features and spot any bug or room for improvement)

Main idea

The polar plugin introduce the support of rotatio/radius axes that work similarly to the x/y axes

The radar don't expose directly those axies. It uses an intermediate metrics to make sure the radar has only one rotation axis with scale point, and one radius axis per metric.

Then we have one component per item rendered (grid, area, and marks)

Features

Polar coordinate
Map series config to rendering

Future features

Correct margins
Correct light/dark colors [charts] Add radar labels #16839
Axes labels [charts] Add radar labels #16839
Variants of axes shape (rounded one)
Interaction
Highlight
Tooltip
Defining the composition customization (opportunity to experiment with base-ui DX)
ARIA attributes?

Preview: https://deploy-preview-16406--material-ui-x.netlify.app/x/react-charts/radar/

Changelog

🎁 The first iteration of the radar chart is available. Features and refinements will be added in the coming weeks

mui-bot · 2025-01-30T16:29:57Z

Deploy preview: https://deploy-preview-16406--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/radar/radar.md

Generated by 🚫 dangerJS against 3be61ca

github-actions · 2025-01-31T11:09:03Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

codspeed-hq · 2025-01-31T15:21:45Z

CodSpeed Performance Report

Merging #16406 will not alter performance

_{Comparing alexfauquette:radar-chart (3be61ca) with master (03f0c05)}

Summary

✅ 7 untouched benchmarks

github-actions · 2025-02-04T08:14:29Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior

Good job! Left some comments because I don't get a lot of stuff 😛

bernardobelchior · 2025-02-28T09:19:36Z

packages/x-charts/src/models/seriesType/config.ts

+    seriesProp: RadarSeriesType;
+    itemIdentifier: RadarItemIdentifier;
+    valueType: number;
+    polar: true;


More of a nitpick, and we don't need to solve it now since we're just repeating the established pattern of using cartesian: true, but would it make sense to have a type: 'cartesian' or type: 'polar' instead?

bernardobelchior · 2025-02-28T09:20:01Z

...s/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.types.ts

+    params: UseChartPolarAxisParameters;
+    defaultizedParams: UseChartPolarAxisDefaultizedParameters;
+    state: UseChartPolarAxisState;
+    // instance: UseChartPolarAxisInstance;


Bump to ensure this comment isn't forgotten 😄

bernardobelchior · 2025-02-28T09:26:19Z

docs/data/charts/radar/DemoRadarNoSnap.tsx

+            margin={{ top: 20 }}
+            series={[
+              {
+                // label: 'Lisa',


Suggested change

// label: 'Lisa',

bernardobelchior · 2025-02-28T09:34:19Z

docs/data/charts/radar/CompositionExample.tsx

+
+export default function CompositionExample() {
+  return (
+    <RadarDataProvider


I wonder if it makes sense to have this RadarDataProvider.

From my understanding, we already have three tiers of decreasing abstraction: LineChart, ChartContainer and ChartDataProvider. With RadarDataProvider, it seems we'll now have 4 tiers: RadarChart, ChartContainer, RadarDataProvider and ChartDataProvider.

Does it make sense to have the distinction between RadarDataProvider and ChartDataProvider?

I'm questioning because either we'll have to add docs on how to use ChartDataProvider with a radar chart, or we'll probably need to update the generic composition page to mention that some of that information doesn't apply to radar charts.

What are we trying to accomplish with RadarDataProvider that can't be done with ChartDataProvider?

My point of view might not make sense since I don't have much experience with this, but I'm a bit confused so I assumed that users might also face the same problem. Curious to hear your opinion!

Yeah I have some concerns as well with the DataProvider, currently you can't use zoom if you use composition. And if we add a different data provider for each of the charts it might get messy 😓

What are we trying to accomplish with RadarDataProvider that can't be done with ChartDataProvider?

The mapping from the radar props to polar axes.

The idea is to provide a simpler API such that users can not shoot in their feet, and allowing us to make assumption about the links between the axes.

Technically they could use the DataProvider if they respect the relation between the radial axes, and the rotation one.

I have some concerns as well with the DataProvider, currently you can't use zoom if you use composition.

That's an issue about plugins propagation. The DataProviderProps should defaultize its plugins with the default MIT plugins plus the zoom one

For me the strategy is the following

A general composition is ChartContainer[Pro] = ChartDataProvider[Pro] + ChartSurface[Pro]

Custom Data provider for charts with dedicated API

The idea being that the ChartDataProvider is a technical description of the charts, and the custom data provider is a simplification because not all the combinations of axes and data make sense. For example, the funnel charts does not really need flexible axes. They have some combination that are useful and could be extracted in a simplified API.

The messy aspect comes from the fact that we currently have only Cartesian charts that can be mixed together + the pie chart that is poorly documented. The composition docs could effectively be more explicit about the two approach about composition.

bernardobelchior · 2025-02-28T09:42:31Z

packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/getAxisExtremum.ts

+  axisIndex: number,
+  formattedSeries: ProcessedSeries<TSeriesType>,
+) => {
+  const charTypes = Object.keys(seriesConfig).filter(isPolarSeriesType);


Nit: did you mean chartTypes I guess something like polarSeries would maybe make more sense?

Suggested change

const charTypes = Object.keys(seriesConfig).filter(isPolarSeriesType);

const polarSeries = Object.keys(seriesConfig).filter(isPolarSeriesType);

bernardobelchior · 2025-02-28T09:58:16Z

packages/x-charts/src/RadarChart/RadarGrid/RadarGrid.tsx

+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisionNumber?: number;


Nit: would it make sense to call this divisions or slices?

Slices would be the V shapes. Like a slice of pizza. I found divisionNumber a bit confusing too. divisions or internalDivisions, though the first is probably better.

bernardobelchior · 2025-02-28T09:59:18Z

packages/x-charts/src/RadarChart/RadarDataProvider/radar.types.ts

+   */
+  name: string;
+  /**
+   * The minimal value of the domain.


Do we mean "minimum"?

Suggested change

* The minimal value of the domain.

* The minimum value of the domain.

bernardobelchior · 2025-02-28T10:00:56Z

packages/x-charts/src/RadarChart/RadarDataProvider/radar.types.ts

+  metrics: string[] | MetricConfig[];
+  /**
+   * The default max value for axis.
+   * If will be override is `metrics` contains a `max` property.


Suggested change

* If will be override is `metrics` contains a `max` property.

* It will be overridden if `metrics` contains a `max` property.

bernardobelchior · 2025-02-28T10:01:22Z

packages/x-charts/src/RadarChart/RadarDataProvider/radar.types.ts

+
+export interface RadarConfig {
+  /**
+   * The different metrics shown by radar.


This is more of a nit, but I'm not sure "different" is adding much here.

Suggested change

* The different metrics shown by radar.

* The metrics shown by radar.

bernardobelchior · 2025-02-28T10:02:40Z

packages/x-charts/src/RadarChart/RadarDataProvider/radar.types.ts

+   */
+  max?: number;
+  /**
+   * The angle of the first axis (in deg)


Would it make sense to say something like "The starting angle of the rotation axis (in degrees)"? It might not be clear that the first axis is the rotation axis, or is it?

JCQuintas · 2025-02-28T10:33:49Z

Should we fix darkmode in this PR?

JCQuintas · 2025-02-28T10:38:45Z

packages/x-charts/src/RadarChart/RadarDataProvider/radar.types.ts

+  /**
+   * The number of steps in the radar grid.
+   */
+  divisionNumber?: number;


This prop does nothing. I guess it was moved into the root props but forgotten here?

JCQuintas · 2025-02-28T10:43:04Z

packages/x-charts/src/models/seriesType/radar.ts

+  /**
+   * If `true` show marks at value position.
+   */
+  showMark?: boolean;


showMark and valueFormatter doesn't seem to be working.

JCQuintas · 2025-02-28T10:48:11Z

docs/data/charts/radar/DemoRadarNoSnap.tsx

+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+
+export default function DemoRadarNoSnap() {


We can remove the NoSnap from this file. This demo seems useful to snap 👍

github-actions · 2025-03-03T12:06:51Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

JCQuintas · 2025-03-05T10:52:15Z

packages/x-charts/src/RadarChart/RadarSeriesPlot/useRadarSeriesData.ts

@@ -6,7 +6,7 @@ import { useItemHighlightedGetter } from '../../hooks/useItemHighlightedGetter';
 import { SeriesId } from '../../models/seriesType/common';

 /**
- *
+ * THis hook provides all the data needed to display radar series.


Suggested change

* THis hook provides all the data needed to display radar series.

* This hook provides all the data needed to display radar series.

bernardobelchior

Code looks good! Minor comments regarding the docs

bernardobelchior · 2025-03-05T13:06:51Z

packages/x-charts/src/RadarChart/RadarDataProvider/radar.types.ts

+   */
+  min?: number;
+  /**
+   * The maximal value of the domain.


Did you mean maximum?

Suggested change

* The maximal value of the domain.

* The maximum value of the domain.

bernardobelchior · 2025-03-05T13:07:07Z

packages/x-charts/src/RadarChart/RadarDataProvider/radar.types.ts

+  metrics: string[] | MetricConfig[];
+  /**
+   * The default max value for radius axes.
+   * It will be override if `metrics` contains a `max` property.


Suggested change

* It will be override if `metrics` contains a `max` property.

* It will be overridden if `metrics` contains a `max` property.

bernardobelchior · 2025-03-05T13:09:10Z

packages/x-charts/src/RadarChart/RadarDataProvider/radar.types.ts

+  /**
+   * The metrics shown by radar.
+   */
+  metrics: string[] | MetricConfig[];


From the code, it seems we actually support Array<string | MetricConfig> because we're handling each metric separately:

radar.metrics.map((m) => { const { name, min = 0, max = radar.max } = typeof m === 'string' ? { name: m } : m; return { id: name, label: name, scaleType: 'linear' as const, min, max, };

Not sure if there's any benefit in allowing that, but just wondering if we should use Array<string | MetricConfig> here.

bernardobelchior · 2025-03-05T13:11:44Z

packages/x-charts/src/hooks/useRadarSeries.test.tsx

+  });
+});
+
+// eslint-disable-next-line mocha/max-top-level-suites


I wonder if we should remove this rule altogether? Do you know why we have it enabled?

It will be removed once we stop depending on mocha. Theoretically mocha doesn't support multiple describes. Technically it doesn't have a problem with that...

Right now it is part of the defaults, so I just opted to leave it be and change it later when we are in position to do so globally

bernardobelchior · 2025-03-05T13:17:13Z

...s/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.types.ts

+   * The rotation-axes IDs sorted by order they got provided.
+   */
+  rotationAxisIds: AxisId[];
+  /**
+   * The radius-axes IDs sorted by order they got provided.


Suggested change

* The rotation-axes IDs sorted by order they got provided.

*/

rotationAxisIds: AxisId[];

/**

* The radius-axes IDs sorted by order they got provided.

* The rotation-axes IDs sorted by order they were provided.

*/

rotationAxisIds: AxisId[];

/**

* The radius-axes IDs sorted by order they were provided.

bernardobelchior · 2025-03-05T13:24:37Z

docs/data/charts/radar/radar.md

+
+## Basics
+
+A radar chart is defined by two main props.


Suggested change

A radar chart is defined by two main props.

A radar chart is defined by two main props:

bernardobelchior · 2025-03-05T13:24:50Z

docs/data/charts/radar/radar.md

+
+The radar chart displays a grid behind the series that can be configured with
+
+- `startAngle` The rotation angle of the entire chart in degree


Suggested change

- `startAngle` The rotation angle of the entire chart in degree

- `startAngle` The rotation angle of the entire chart in degrees

bernardobelchior · 2025-03-05T13:25:02Z

docs/data/charts/radar/radar.md

+The radar chart displays a grid behind the series that can be configured with
+
+- `startAngle` The rotation angle of the entire chart in degree
+- `divisions` The number of division of the grid


Suggested change

- `divisions` The number of division of the grid

- `divisions` The number of divisions of the grid

bernardobelchior · 2025-03-05T13:29:05Z

docs/data/charts/radar/radar.md

+In this example, we uses `RadarSeriesArea` and `RadarSeriesMarks` to modify the order of the elements:
+all the marks are on top of all the path.
+And we apply different properties based on the series id.


Suggested change

In this example, we uses `RadarSeriesArea` and `RadarSeriesMarks` to modify the order of the elements:

all the marks are on top of all the path.

And we apply different properties based on the series id.

In this example, we use `RadarSeriesArea` and `RadarSeriesMarks` to modify the order of the elements so that all the marks render above the paths.

Additionally, we apply different properties based on the series ID.

bernardobelchior · 2025-03-05T13:30:50Z

packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.ts

+   * The id of the series To display.
+   * If undefined all series are display.


Suggested change

* The id of the series To display.

* If undefined all series are display.

* The id of the series to display.

* If undefined all series are displayed.

distinguish polar from cartesian

d60a12a

alexfauquette added type: new feature Introduces a new piece of functionality or capability. scope: charts Changes or issues related to the charts product labels Jan 30, 2025

alexfauquette added 6 commits January 31, 2025 12:02

create a polar plugin

21d0c35

basic hooks and type definitions

ea3a57b

Update data providers to create a RadarDataProvider

ebf6158

Add basic radar chart

5d5b532

docs

21fa10d

scripts

a95fddc

alexfauquette force-pushed the radar-chart branch from 37ed9fc to a95fddc Compare January 31, 2025 11:08

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 31, 2025

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 31, 2025

alexfauquette marked this pull request as ready for review January 31, 2025 11:11

alexfauquette added 2 commits January 31, 2025 14:03

Merge remote-tracking branch 'upstream/master' into radar-chart

0f09e9f

fix errors due to highlight modification

e1b7842

alexfauquette force-pushed the radar-chart branch from a589b3a to e1b7842 Compare January 31, 2025 13:43

fix

a254ea1

alexfauquette marked this pull request as draft January 31, 2025 15:28

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 4, 2025

alexfauquette added 2 commits February 4, 2025 09:52

Merge remote-tracking branch 'upstream/master' into radar-chart

98f500e

fix luggins signatures

e1b19f5

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 4, 2025

alexfauquette added 2 commits February 4, 2025 11:14

fix

9f68947

fix

8cf53e3

alexfauquette marked this pull request as ready for review February 4, 2025 10:59

alexfauquette requested a review from JCQuintas February 4, 2025 11:00

alexfauquette added 2 commits February 26, 2025 15:47

fix docs links

80e7e7c

scripts

b40d50f

alexfauquette requested a review from JCQuintas February 26, 2025 14:49

alexfauquette added 2 commits February 27, 2025 11:15

fix test

0e7b743

Merge remote-tracking branch 'upstream/master' into radar-chart

057adc5

alexfauquette requested a review from bernardobelchior February 27, 2025 10:32

bernardobelchior reviewed Feb 28, 2025

View reviewed changes

JCQuintas reviewed Feb 28, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 3, 2025

alexfauquette added 7 commits March 4, 2025 15:25

Merge remote-tracking branch 'upstream/master' into radar-chart

231a2bd

remove no snap

6da5ec7

small feedbacks

cb18f24

rework defaultize axis and TS errors

094830a

feedback

14dc862

prevent some type propagation

57b582d

scripts

4637222

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 5, 2025

JCQuintas reviewed Mar 5, 2025

View reviewed changes

JCQuintas approved these changes Mar 5, 2025

View reviewed changes

alexfauquette added 2 commits March 5, 2025 12:01

fix

c56eef4

test-unit-fix

3be61ca

alexfauquette merged commit bc48b31 into mui:master Mar 5, 2025
19 checks passed

bernardobelchior approved these changes Mar 5, 2025

View reviewed changes

This was referenced Mar 7, 2025

[charts] Add radar labels #16839

Merged

[charts] Add axis highlight to the radar #16868

Merged

[charts] Allow circular grid on radar chart #16870

Merged

	const charTypes = Object.keys(seriesConfig).filter(isPolarSeriesType);
	const polarSeries = Object.keys(seriesConfig).filter(isPolarSeriesType);

	* The minimal value of the domain.
	* The minimum value of the domain.

	* If will be override is `metrics` contains a `max` property.
	* It will be overridden if `metrics` contains a `max` property.

	* The different metrics shown by radar.
	* The metrics shown by radar.

	* THis hook provides all the data needed to display radar series.
	* This hook provides all the data needed to display radar series.

	* The maximal value of the domain.
	* The maximum value of the domain.

	* It will be override if `metrics` contains a `max` property.
	* It will be overridden if `metrics` contains a `max` property.

	A radar chart is defined by two main props.
	A radar chart is defined by two main props:


		The radar chart displays a grid behind the series that can be configured with

		- `startAngle` The rotation angle of the entire chart in degree

	- `divisions` The number of division of the grid
	- `divisions` The number of divisions of the grid

		* The id of the series To display.
		* If undefined all series are display.

Uh oh!

[charts] Introduce the radar chart #16406

[charts] Introduce the radar chart #16406

Uh oh!

Conversation

alexfauquette commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Main idea

Features

Future features

Changelog

Uh oh!

mui-bot commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 31, 2025

Uh oh!

codspeed-hq bot commented Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #16406 will not alter performance

Summary

Uh oh!

github-actions bot commented Feb 4, 2025

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JCQuintas commented Feb 28, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

alexfauquette commented Jan 30, 2025 •

edited

Loading

mui-bot commented Jan 30, 2025 •

edited

Loading

codspeed-hq bot commented Jan 31, 2025 •

edited

Loading