Pie / Donut Chart

A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportions. You can also make a variation of pieChart ( donutChart) from pieChart API.

Live Editor

Usage

import { PieChart } from "@k2/rv-viz";

2 . Add data or URL to PieChart component.

<PieChart data={PieChartData} />

// or

<PieChart url="server/api/data" />

Example

PieChart: Demo

import { PieChart } from "@k2/rv-viz";

// Mandatory

const data = [

{

label: "Global Admin",

value: 1,

},

{

label: "Custom Admin",

value: 7,

},

{

label: "Users",

value: 8,

},

{

label: "External Users",

value: 10,

},

];

function RenderChart() {

return (

<PieChart

data={data}

radial={{

anglePadding: 2,

}}

/>

);

}

DonutChart: Demo

import { PieChart } from "@k2/rv-viz";

// Mandatory

const data = [

{

label: "Global Admin",

value: 1,

},

{

label: "Custom Admin",

value: 7,

},

{

label: "Users",

value: 8,

},

{

label: "External Users",

value: 10,

},

];

function RenderChart() {

return (

<PieChart

data={data}

radial={{

innerRadius: 0.8,

}}

/>

);

}

Click here for more variations of pie chart.

Props

Note: External props are mostly derived from react-vis & K2. All external props are linked. You can click highlighted props to get more details from official site.

Property	Type	Required	Default value	Description
data	PieChartData[]	yes		Data for the chart.
radial	RadialProps	no	None	Adjust radial properties.
title	JSX.Element | string	no	None	Title of the chart.
animate	boolean	no	true	Enable the animation.
colors	{[theme-name: e.g "light" or "dark"] : string[] | GradientColor[]	no	None	Colors of chart in different theme modes.
label	boolean | LabelComponent	no	true	Enable or customize the labels
labelTickWidth	number	no	1.25	Lenth of label tick.
centerLabel	boolean | CenterLabelComponent	no	true	Enable or customize the Center label.
legends	boolean | LegendsProps	no	true	Enable or customize the legends.
tooltip	boolean | TooltipProps	no	true	Enable or customize the tooltip.
width	number	no	300	Width of chart.
height	number	no	300	Height of chart.
onClick	(event: { data:TransformedData}) => void	no	None	Callback for Slice click.
style	CSSProperties	no	None	Styles applied to the root element of chart.
className	string	no	None	Class applied to the root element of chart.
classes	Classes	no	None	Classes of chart.

PieChart is wrapped with fetchData HoC, to perform data handling tasks, which adds support for some additional props.

Custom Types

PieChartData

Here is the format of the data accepted by PieChart.

export type PieChartData = { label: string; value: number };

TransformedData

export type TransformedData = PieChartData & {

radius0: number;

radius: number;

angle0: number;

angle: number;

};

RadialProps

This is a prop to adjust anglePadding and innerRadius of the chart.

export type RadialProps = {

innerRadius?: number;

anglePadding?: number;

};

LabelComponent

This is a type of custom label component. You can create a custom label component by this.

export type LabelComponent = (props: {

data: PieChartData;

total: number;

}) => JSX.Element;

};

CenterLabelComponent

This is type of custom centerlabel component. You can create a custom centerlabel component by this.

export type CenterLabelComponent = (props: {

data: PieChartData[];

total: number;

}) => JSX.Element;

GradientColor

Type of GradientColor object.

type GradientColor = {

name: string,

startingColor: string,

endingColor: string,

startingColorStopOpacity?: number,

endingColorStopOpacity?: number,

x1?: string,

x2?: string,

y1?: string,

y2?: string,

};

Classes

Classes enable customization and styling of chart elements through their classes.

ClassName	Type	Required	Default value	Description
root	string	no	None	Applied to root element of chart.
header	string	no	None	Applied to header of chart.
title	string	no	None	Applied to title of chart.
legends	string	no	None	Applied to legends of chart.
tooltip	string	no	None	Applied to tooltip of chart.
xyplot	string	no	None	Applied to svg component of chart.
arc	string	no	None	Applied to arc path of chart.
label	string	no	None	Applied to label of chart.
centerlabel	string	no	None	Applied to centerLabel of chart.

Please see Class Specificity for correctly defining it.