The React Easy Pie chart
Introduction
A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.(ref)
data
At the most basic the Pie chart can just take a single data file supplied in a JSON format and will render a simple Pie chart. This is a single array of JavaScript objects with a key and value.
<PieChart
data={[
{ key: 'A', value: 100 },
{ key: 'B', value: 200 },
{ key: 'C', value: 50 }
]}
/>
By default the color is automatically assigned. The color can be overwritten for each section of the pie by providing an extra color hex value to the object.
<PieChart
data={[
{ key: 'A', value: 100, color: '#aaac84' },
{ key: 'B', value: 200, color: '#dce7c5' },
{ key: 'C', value: 50, color: '#e3a51a' }
]}
/>
Size
The size of the pie chart can be set easily by passing in a size param number.
<PieChart
size={100}
data={[
{ key: 'A', value: 100, color: '#aaac84' },
{ key: 'B', value: 200, color: '#dce7c5' },
{ key: 'C', value: 50, color: '#e3a51a' }
]}
/>
donut
A donut can be produced by passing in a innerHoleSize prop. This should be less than the size prop.
<PieChart
size={400}
innerHoleSize={200}
data={[
{ key: 'A', value: 100, color: '#aaac84' },
{ key: 'B', value: 200, color: '#dce7c5' },
{ key: 'C', value: 50, color: '#e3a51a' }
]}
/>
padding
Padding can be set by passing in a padding prop.
<PieChart
padding={50}
data={[
{ key: 'A', value: 100, color: '#aaac84' },
{ key: 'B', value: 200, color: '#dce7c5' },
{ key: 'C', value: 50, color: '#e3a51a' }
]}
/>
labels
Labels can be added by passing in a labels boolean prop. The labels will be the key value passed in with the data. The example below passes a custom style object to set the text colour to white.
<PieChart
labels
data={[
{key: 'A', value: 100, color: '#aaac84'},
{key: 'B', value: 200, color: '#dce7c5'},
{key: 'C', value: 50, color: '#e3a51a'}
]}
styles={{
'.chart_text': {
fontSize: '1em',
fill: '#fff'
}
}}
/>
style
Styles for the lines and the text can be overridden by passing in a styles object prop.
<PieChart
labels
styles={{
'.chart_lines': {
strokeWidth: 0
},
'.chart_text': {
fontFamily: 'serif',
fontSize: '1.25em',
fill: '#333'
}
}}
data={[
{key: 'A', value: 100, color: '#aaac84'},
{key: 'B', value: 200, color: '#dce7c5'},
{key: 'C', value: 50, color: '#e3a51a'}
/>
Mouse handlers
The chart will send out a mouseOver event, mouseMove and mouseOut event. This can be used by your react application in anyway you would require. The event handlers provides the mouse event and the segment data. The mouse event can for instance provide the x and y coordinates which can be used for a tool tip. The data can be segment related to the pie chart.
mouseOverHandler(d, e) {
this.setState({
showToolTip: true,
top: e.y,
left: e.x,
value: d.value,
key: d.data.key});
}
mouseMoveHandler(e) {
if (this.state.showToolTip) {
this.setState({top: e.y, left: e.x});
}
}
mouseOutHandler() {
this.setState({showToolTip: false});
}
createTooltip() {
if (this.state.showToolTip) {
return (
<ToolTip
top={this.state.top}
left={this.state.left}
>
The value of {this.state.key} is {this.state.value}
</ToolTip>
);
}
return false;
}
<PieChart
data={[
{ key: 'A', value: 100, color: '#aaac84' },
{ key: 'B', value: 200, color: '#dce7c5' },
{ key: 'C', value: 50, color: '#e3a51a' }
]}
innerHoleSize={200}
mouseOverHandler={this.mouseOverHandler}
mouseOutHandler={this.mouseOutHandler.bind(this)}
mouseMoveHandler={this.mouseMoveHandler.bind(this)}
padding={10}
styles={this.styles}
/>
Click Handler
The chart will send out a click event. The event will pass the data and the event. This allows the data to be presented from the clicking of a segment in any way the react developer requires.
<div>
<div>
<PieChart
data={[
{ key: 'A', value: 100, color: '#aaac84' },
{ key: 'B', value: 200, color: '#dce7c5' },
{ key: 'C', value: 50, color: '#e3a51a' }
]}
clickHandler={
(d) => this.setState({
dataDisplay: `The value of ${d.data.key} is ${d.value}`
})
}
/>
</div>
<div>
{this.state.dataDisplay ? this.state.dataDisplay : 'Click on a segment to show the value'}
</div>
</div>
Updating the data
By selecting the button below to start the random data you can see a simulation of the performance if a data feed is passed in. React provides the functionality to only update the elements of the dom when required so will just change the path attributes. The data is passed in as a react param only and as soon as that data changes the chart will reflect that change automatically.
<PieChart
labels
data={this.data}
/>