I love using React with Material-UI to build my personal projects. The popular React UI library adheres to Google’s Material Design specification and comes with a plethora of highly customizable React components that make prototyping a breeze.

However, as comprehensive as the component collection Material-UI offers, I still find myself looking up third-party libraries whenever I want to draw a simple chart. Do I use Recharts? Victory? Nivo? Or React Vis? Why do I have to add a third-party dependency for a basic donut chart in the first place?

In this post, I will share my tips for building common charts by repurposing Material-UI prebuilt components.

Base Components

The Box component is infinitely customizable, with enough CSS styling, you can craft the component into anything your heart desires. The Skeletoncomponent can be manipulated into basic shapes with a quick set of properties. While it is possible to build our charts on top of either, my favorite components for building charts are LinearProgress and CircularProgress.

Pie and Donut

LinearProgress and CircularProgress components are commonly used as drop-in solutions for loading animation between page renders. They are also surprisingly versatile.

CircularProgress component essentially draws a circle repeatedly in a loop, where you can control the animation, the thickness of the line, and where that line ends. In other words, you can practically build any pie or donut-shaped chart.

import React from 'react';
import CircularProgress from '@material-ui/core/CircularProgress';

interface DonutProps {
  value: number;
  size: number;
};
const Donut: React.SFC<DonutProps> = ({
  value,
  size,
}) => {
  return (
    <CircularProgress
      size={`${size}%`}
      value={value}
      thickness={10}
      variant="static"
      color="primary"
    />
  );
};
export default Donut;

This simple functional component leverages the static variant of CircularProgress. The thickness is set to 10 so that it would appear in donut-shaped, and the value indicates the percentage of completeness of the circle.

If we increase the thickness to 22, the line would fill out the hollow center and turns it into a solid pie chart.

#charts #prototyping #react #lean #material-ui #ui