Igloo branding


A pie chart is a circular graph used to display proportions or percentages. It includes a label and percentage in the middle, representing the category or component being depicted and its proportion of the whole.


To install @igloo-ui/pie-chart in your project, you will need to run the following command using npm:

npm install @igloo-ui/pie-chart

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/pie-chart


Then to use the component in your code just import it!

import PieChart from '@igloo-ui/pie-chart';
import tokens from '@igloo-ui/tokens/dist/base10/tokens.json';

const mockData = [
  { id: 'positive', percentage: 25, color: tokens.seaweed400 },
  { id: 'negative', percentage: 10, color: tokens.coral400 },
  { id: 'skipped', percentage: 40, color: tokens.creamsicle100 },
  { id: 'unanswered', percentage: 25, color: tokens.grey300 },

<PieChart data={mockData} label="Poll Completion" size="large" rate={35} />;


classNamestringThe class name of the component
dataDataProps[]The data to be displayed in the chart
dataTeststringAdd a data-test tag for automated tests
labelReactNodeThe label displayed in the center of the chart (This is not displayed if the chart size is "regular")
ratenumberThe rate of the chart in percentage (This is not displayed if the chart size is "regular")
size"regular" | "large"The size of the chart