PieChart

Pie and donut chart using D3 pie layout. Supports exploded slices, rounded/spaced arcs, labels with connector lines, gradients, and custom label rendering.

Import

import { PieChart, PieArcSeries, PieArc, PieArcLabel } from 'reaviz';

PieChart Props

PieArcSeries Props

PieArc Props

PieArcLabel Props

Basic Pie Chart

const data = [
  { key: 'Phishing', data: 10 },
  { key: 'Malware', data: 8 },
  { key: 'DDoS', data: 5 },
  { key: 'Ransomware', data: 3 },
];

<PieChart
  width={350}
  height={250}
  data={data}
/>

Donut Chart

<PieChart
  width={350}
  height={250}
  data={data}
  series={<PieArcSeries doughnut={true} />}
/>

Rounded and Spaced Donut

<PieChart
  data={data}
  series={
    <PieArcSeries
      doughnut={true}
      cornerRadius={4}
      padAngle={0.02}
      padRadius={200}
    />
  }
/>

Exploded Slices

<PieChart
  data={data}
  series={<PieArcSeries explode={true} />}
/>

With Gradient

import { Gradient } from 'reaviz';

<PieChart
  data={data}
  series={
    <PieArcSeries
      arc={<PieArc gradient={<Gradient />} />}
    />
  }
/>

Custom Label Format

<PieChart
  data={data}
  series={
    <PieArcSeries
      label={
        <PieArcLabel
          format={(d) => `${d.key}: ${d.data}`}
        />
      }
    />
  }
/>

HTML Labels (Custom Rendering)

<PieChart
  data={data}
  series={
    <PieArcSeries
      label={
        <PieArcLabel
          format={(d) => (
            <tspan>
              <tspan fontWeight="bold">{d.key}</tspan>
              <tspan dx={5}>{d.data}</tspan>
            </tspan>
          )}
        />
      }
    />
  }
/>

No Labels

<PieChart
  data={data}
  series={<PieArcSeries label={null} />}
/>

Display All Labels

<PieChart
  data={data}
  displayAllLabels={true}
/>

Click Handling

<PieChart
  data={data}
  series={
    <PieArcSeries
      arc={
        <PieArc
          cursor="pointer"
          onClick={({ value, nativeEvent }) => console.log(value)}
        />
      }
    />
  }
/>

Donut with Center Label

<div style={{ position: 'relative' }}>
  <PieChart
    data={data}
    series={<PieArcSeries doughnut={true} />}
  />
  <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  }}>
    <strong>Total: 26</strong>
  </div>
</div>

No Animation

<PieChart
  data={data}
  series={<PieArcSeries animated={false} />}
/>

Notes

• Labels use automatic collision detection and repositioning
• Connector lines are drawn from arc centroid to label position
• arcWidth controls donut hole size as a ratio (0-1) — smaller value = thicker ring
• explode adjusts outer radius proportionally so larger slices extend further
• displayAllLabels forces labels to render even for very small slices