React Pie Chart - Soft UI

The Pie Chart component helps you to simply create a beautiful pie chart for displaying the data.


The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// Soft UI Dashboard React examples import PieChart from "examples/Charts/PieChart";
Pie Chart

Props Information

NameTypeDefaultDescription
titlestring""Used to set a title for the chart.
descriptionnodestring""Used to set a description for the chart.
heightnumberstring19.125remUsed to set a height for the chart.
chart*objectUsed to set the chart data. It should be an object that contains the `labels` and `datasets` keys.
  • The `labels` key is an array.
  • The `datasets` key is an object of with the following keys: `label`, `backgroundColors` and `data`.
  • The amount of elements inside `backgroundColors` array should be equal to the amount of elements inside the `labels` array.
Its a required prop.
Contents