How to Create a Material-UI Pie Chart and Legend

Material-UI does not (yet) have a built-in chart feature. However, they link to DevExtreme Reactive as a chart library worth taking a look at.

The DevExtreme Reactive library uses D3 and Material-UI components to generate charts and legends. Looking at the charts in dev tools, it appears the charts are generally D3 SVGs and the legends, titles, and other auxiliary parts are created from MUI components.

We’ll take a simple Pie Chart example from Devextreme and update it with a legend, plus take some dev tools screenshots to get a better understanding of the code.

The Code Sandbox link with full React code is in the Resources section. You can view the YouTube version of this post here.

Material-UI Pie Chart

Creating a basic pie chart in DevExtreme Reactive requires only a few lines of code and a data set:

<Chart data={chartData}>
  <PieSeries valueField="votes" argumentField="state" />
  <Title text="Votes for Favorite State" />
  <Animation />

</Chart>

The legend on the right requires more code, discussed in a later section.

A gap in the pie chart functionality is that I can’t add text overlays to the pie slices. I examined the docs to see if there was a simple way to do this…there were several inscrutable props available, but I could not get them to give me a text overlay. If anyone has success with this, kindly leave a comment with a suggestion.

Adding the Chart Legend

The chart legend can be added as simply as the following code:

<Chart data={chartData}>
  <Legend />
</Chart>

This will render a Material-UI List component. We can see this from the .MuiList-root class that was applied to the element.

While it was simple to inject a legend, unfortunately customizing it requires old MUI V3 syntax using withStyles. This old syntax is also from the days before React hooks existed.

What this means is that we cannot use useStyles, makeStyles, and className to style the component. Instead we have more verbose syntax. I left it commented out in the Code Sandbox if you would like to see it. However, using the older syntax you can significantly customize the legend.

DevExtreme Reactive Docs

The docs for DevExtreme’s charts were quite extensive, but there were definitely pros and cons. I’ll list them below. Admittedly, they are my opinion but I think they might be useful.

Pros:

• The docs had lots of links to Code Sandbox examples. I learn by seeing live code and playing with it, so this was very useful.
• The docs were extensive. By this I mean that they covered every different available chart. They also listed the props for all available plugins (as far as I could tell).

Cons:

• The syntax of the library is outdated and needs to use MUI V4 and React hooks.
• Because of the old syntax, the instructions on how to use the various props was difficult to interpret.
• Some of the plugins and extras (like legend) didn’t have direct examples. Many were used in various Code Sandbox examples, but without a direct link to those from plugin’s page, they were difficult to find.

Resources

Code Sandbox link.