Pie Chart

A Pie Chart in REAVIZ is divided into sectors, each representing a numerical proportion. The arc length of each sector (along with its central angle and area) is proportional to the quantity it represents. Named for its resemblance to a sliced pie, a pie chart effectively visualizes part-to-whole relationships in data.

Types supported by reaviz:

Pie - A standard pie chart divided into sectors to show proportions.
Exploded - A variation where one or more slices are separated from the main chart to emphasize specific sectors.
Donut - Similar to a pie chart, but with a hole in the center, making it easier to read multiple data points.

Where to use:

Show Proportions: Ideal for visualizing parts of a whole.
Compare Categories: Useful for comparing different categories in a dataset.
Highlight Key Data Points: Exploded pie charts emphasize specific sectors.

Quick Start

To create a Pie chart, use import the PieChart and give it data. The chart will automatically configure itself with the default options exposed via props.

import { PieChart } from 'reaviz';


export default function App() {
return (
  <PieChart
    height={300}
    width={300}
    data={[
      { key: 'Bacon', data: 13 },
      { key: 'Eggs', data: 8 },
      { key: 'Cheese', data: 17 },
    ]}
  />
);
}

import { PieChart } from 'reaviz';

export default function App() {
return (
  <PieChart
    height={300}
    width={300}
    data={[
      { key: 'Bacon', data: 13 },
      { key: 'Eggs', data: 8 },
      { key: 'Cheese', data: 17 },
    ]}
  />
);
}

Examples

Pie

Exploded

Donut

API

PieChart

Name	Type	Default
`data`	`ChartShallowDataShape[]` Data the chart will receive to render.	`[]`
`disabled`	`boolean` Whether the chart is disabled.
`displayAllLabels`	`boolean` Whether to display labels even if their value has a small display radius.
`series`	`ReactElement<PieArcSeriesProps, FC<Partial<PieArcSeriesProps>>>` The series component that renders the arc components.	`<PieArcSeries />`
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

PieArcSeries

Name	Type	Default
`id`	`string` Unique id for the series.
`animated`	`boolean` Animated set by the `PieArc` components.	`true`
`outerRadius`	`number` Outer radius set by the parent component.
`innerRadius`	`number` Inner radius set by the parent component.	`0`
`padAngle`	`number` Pad Angle between adjacent arcs, see https://github.com/d3/d3-shape#arc_padAngle	`0`
`padRadius`	`number` Pad Radius between adjacent arcs, see https://github.com/d3/d3-shape#arc_padRadius	`0`
`cornerRadius`	`number` Corner Radius of the arcs, see https://github.com/d3/d3-shape#arc_cornerRadius	`0`
`data`	`ArcData[]` Data set by the parent component.
`arcWidth`	`number` Width of the arc	`0.25`
`doughnut`	`boolean` Doughnut, render as a donut shape
`explode`	`boolean` Explode: OuterRadius will be adjusted by the data property	`false`
`displayAllLabels`	`boolean` Display all labels shows labels even if there is little space	`false`
`label`	`ReactElement<PieArcLabelProps, FC<Partial<PieArcLabelProps>>> \| null` Label component	`<PieArcLabel />`
`arc`	`ReactElement<PieArcProps, FC<PieArcProps>>` Arc Component	`<PieArc />`
`colorScheme`	`ColorSchemeType` Color scheme	`'cybertron'`
`height`	`number` Height set by the parent component
`width`	`number` Width set by the parent component

PieArcLabel

Name	Type	Default
`data`	`ArcData` Data set by the parent component
`centroid`	`(d: ArcData) => [number, number]` A function returning the centroid of the corresponding `PieArc`
`format`	`(v: any) => ReactNode` A Formatting function for the label value
`fontFill`	`string` FontFill color	`'#8F979F'`
`fontSize`	`number` FontSize	`11`
`fontFamily`	`string` FontFamily	`'sans-serif'`
`lineStroke`	`string` Line stroke of the label connector	`'rgba(127,127,127,0.5)'`
`outerRadius`	`number` Outer radius of the corresponding `PieArc`
`padding`	`string` y Padding of the label	`'.35em'`
`position`	`[number, number]` The label position set by the parent component
`width`	`number` Width of the label
`height`	`number` Height of the label	`11`

PieArc

Name	Type	Default
`id`	`string` Unique id for arc
`arc`	`(data: ArcData) => string \| null` The arc generator function returning an arc path
`data`	`ArcData` Data is the datum passed to the arc generator function
`color`	`string` Color
`animated`	`boolean` Animate	`true`
`tooltip`	`ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>> \| null` Tooltip component	`<ChartTooltip />`
`cursor`	`string` The cursor type used when hovering	`'initial'`
`disabled`	`boolean` Disable the arc	`false`
`gradient`	`ReactElement<GradientProps, FC<Partial<GradientProps>>> \| null` Gradient shades for the bar.
`style`	`MotionStyle` Style for the arc
`onClick`	`(e: PieArcMouseEvent) => void` OnClick event handler
`onMouseEnter`	`(e: PieArcMouseEvent) => void` MouseEnter event handler
`onMouseLeave`	`(e: PieArcMouseEvent) => void` MouseLeave event handler