React Pie Chart Easy

The React Pie Chart simple and customizable React pie chart component. React pie chart component which is very easy to use and have multiple configuration options for more customization.

Demo

Click here for live demo

Usage

import ReactPieChart from 'react-pie-chart-easy';

const chartData = [
  { title: 'One', value: 10, color: '#E38627', tooltip: 'I am one' },
  { title: 'Two', value: 15, color: '#C13C37', tooltip: 'I am two' },
  { title: 'Three', value: 20, color: '#6A2135', tooltip: 'I am three' },
];

const showLegend = false

const App = () => (
  <ReactPieChart
    data={chartData}
    backgroundColor={['#E38627', '#C13C37', '#6A2135']}
    borderColor={['#FFF', '#FFF', '#FFF']}
    radius={90}
    animate="yes"
    zoom={true}
    rotate={45}
    showLegend={showLegend}
  />
);

export default App;

Props

• data: Array of data objects (title, value, color, tooltip).
• backgroundColor: Array of background colors for each slice (optional).
• borderColor: Array of border colors for each slice (optional).
• radius: The radius of the pie chart (default: 100) in % of the canvas area.
• cutout: The inner donut circle size (default: 0).
• animate: Whether to animate the chart ("yes" or "no").
• zoom: Whether to enable zoom and pan functionality (boolean).
• rotate: Rotation angle of the chart (default: 0).
• showLegend: Whether to show the chart legend (summary) (default: true).