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'
      }
    }}
  />
ABC

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'}
    />
ABC

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>
Click on a segment to show the value

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}
  />
ABCDEFG