Create a responsive chart with React, Material-UI, and Recharts

With all the tools available for creating data visualizations within your web app, it can be tough to find the right one for your project. The following is step by step tutorial on creating a responsive chart with my favorite charting tool of them all, Recharts. Recharts is my go-to because its lightweight out of the box and flexible to fit your needs. In this exercise, we’ll be building a chart that displays hardware sales (servers and storage) by date. And, the user will be able to filter the data based on sales region. Let’s get started!

1. % npx create-react-app [your-project-name], then grab some tea (this will take a minute)
2. cd into your project and % npm run start, a new tab will populate in your browser with the boilerplate react app code.
3. Navigate to App.js and remove boilerplate code between <header> tags
4. Install dependencies: % npm i @material-ui/core recharts, then include the following imports

5. Set up your Material-UI grid, the Grid component is based on a 12 column grid layout. Notice the xs and sm props in the Grid item below, this means that for an xs screen (cell phone), the Grid item will span all 12 columns, meaning it won’t squeeze next to another component. And, for small screens and up, the Grid items will span 6 columns across, meaning two or more items will fit on the screen, depending on the size of the screen. Something else to note is that the Grid components are built upon CSS flexbox. Flexbox is working under the hood, so you don’t have to recreate the code.

6. Check out the Recharts docs https://recharts.org/en-US/examples/SimpleLineChart, for this exercise we’ll be using the Simple Line Chart. Let’s add the boilerplate code to our project, as well as include the FormControl component we imported, in order to create a dropdown menu for filtering our data. We’ll also being use the react hook useState to set state based on the region selected in the dropdown menu.

set state using react hook useState and handle change function

create a dropdown menu using Material-UI components

7. Next, we will feed our chart seed data. Recharts accepts an array of objects, the seed data for this chart looks like: [{region: “Northeast”, date: “Jan 01 2021”, servers: 541, storage: 163}]. In the snapshot below, the chart will render based on the selected region, servers and storage will each display as a line, the x-axis will be the date, and the y-axis a key of the range of values up to 1000.

recharts chart container, note the dataKey prop for XAxis and the Lines

8. Lastly, let’s revisit the useStyles hook to add some style to our chart

Our final product, a responsive chart that displays hardware sales by each region.

For the source code, please visit https://github.com/kerri-ryan/mui-dashboard.

Thanks for reading!