Member-only story
The Material-UI Chart Library You Didn’t Know You Have
5 charts you can make right now without installing additional libraries.
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 many 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 Skeleton component 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…
