@nivo/pie

What is @nivo/pie?

@nivo/pie is a React component from the Nivo library that allows you to create highly customizable and interactive pie charts. It provides a variety of features such as legends, tooltips, and animations, making it a powerful tool for data visualization.

What are @nivo/pie's main functionalities?

Basic Pie Chart

This code demonstrates how to create a basic pie chart using the @nivo/pie package. The chart is responsive and includes various customization options such as inner radius, pad angle, corner radius, and colors.

import { ResponsivePie } from '@nivo/pie';

const data = [
  { id: 'javascript', label: 'javascript', value: 29 },
  { id: 'python', label: 'python', value: 25 },
  { id: 'java', label: 'java', value: 20 },
  { id: 'ruby', label: 'ruby', value: 15 },
  { id: 'c++', label: 'c++', value: 11 }
];

const MyPieChart = () => (
  <ResponsivePie
    data={data}
    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    colors={{ scheme: 'nivo' }}
    borderWidth={1}
    borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
    radialLabelsSkipAngle={10}
    radialLabelsTextXOffset={6}
    radialLabelsTextColor='#333333'
    radialLabelsLinkColor={{ from: 'color' }}
    sliceLabelsSkipAngle={10}
    sliceLabelsTextColor='#333333'
  />
);

Pie Chart with Legends

This code demonstrates how to add legends to a pie chart using the @nivo/pie package. The legends are positioned at the bottom of the chart and include hover effects for better interactivity.

import { ResponsivePie } from '@nivo/pie';

const data = [
  { id: 'javascript', label: 'javascript', value: 29 },
  { id: 'python', label: 'python', value: 25 },
  { id: 'java', label: 'java', value: 20 },
  { id: 'ruby', label: 'ruby', value: 15 },
  { id: 'c++', label: 'c++', value: 11 }
];

const MyPieChartWithLegends = () => (
  <ResponsivePie
    data={data}
    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    colors={{ scheme: 'nivo' }}
    borderWidth={1}
    borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
    radialLabelsSkipAngle={10}
    radialLabelsTextXOffset={6}
    radialLabelsTextColor='#333333'
    radialLabelsLinkColor={{ from: 'color' }}
    sliceLabelsSkipAngle={10}
    sliceLabelsTextColor='#333333'
    legends={[
      {
        anchor: 'bottom',
        direction: 'row',
        justify: false,
        translateX: 0,
        translateY: 56,
        itemsSpacing: 0,
        itemWidth: 100,
        itemHeight: 18,
        itemTextColor: '#999',
        itemDirection: 'left-to-right',
        itemOpacity: 1,
        symbolSize: 18,
        symbolShape: 'circle',
        effects: [
          {
            on: 'hover',
            style: {
              itemTextColor: '#000'
            }
          }
        ]
      }
    ]}
  />
);

Pie Chart with Custom Tooltip

This code demonstrates how to create a pie chart with a custom tooltip using the @nivo/pie package. The custom tooltip displays the id and value of the hovered slice in a styled div.

import { ResponsivePie } from '@nivo/pie';

const data = [
  { id: 'javascript', label: 'javascript', value: 29 },
  { id: 'python', label: 'python', value: 25 },
  { id: 'java', label: 'java', value: 20 },
  { id: 'ruby', label: 'ruby', value: 15 },
  { id: 'c++', label: 'c++', value: 11 }
];

const CustomTooltip = ({ datum }) => (
  <div style={{ padding: 12, background: '#fff', border: '1px solid #ccc' }}>
    <strong>{datum.id}</strong>: {datum.value}
  </div>
);

const MyPieChartWithTooltip = () => (
  <ResponsivePie
    data={data}
    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    colors={{ scheme: 'nivo' }}
    borderWidth={1}
    borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
    radialLabelsSkipAngle={10}
    radialLabelsTextXOffset={6}
    radialLabelsTextColor='#333333'
    radialLabelsLinkColor={{ from: 'color' }}
    sliceLabelsSkipAngle={10}
    sliceLabelsTextColor='#333333'
    tooltip={CustomTooltip}
  />
);

Other packages similar to @nivo/pie

recharts

Recharts is a composable charting library built on React components. It provides a variety of chart types, including pie charts, and is known for its simplicity and ease of use. Compared to @nivo/pie, Recharts offers a more straightforward API but may lack some of the advanced customization options available in Nivo.

victory

Victory is a modular charting library for React and React Native. It offers a wide range of chart types, including pie charts, and focuses on providing a high level of customization and flexibility. Victory is comparable to @nivo/pie in terms of customization capabilities but may have a steeper learning curve.

chart.js

Chart.js is a popular JavaScript library for creating simple yet flexible charts. It supports various chart types, including pie charts, and can be integrated with React using the react-chartjs-2 wrapper. While Chart.js is not as React-specific as @nivo/pie, it is widely used and has a large community.

README

@nivo/pie

Pie

documentation

Changelog

v0.73.0 (2021-07-14)

<a name="v0.72.0"></a>