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 (opens in a new tab)

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

PieArcSeries (opens in a new tab)

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

PieArcLabel (opens in a new tab)

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

PieArc (opens in a new tab)

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

Meter Radar