The React Easy Chart Legend

Introduction

The legend component provides a key to the data and is designed to work with the Pie and Scatter plot charts. The legend component is easily cusomised via css.

Basic

Simply pass the same data used for the chart and provide a data id (dataId) for the label.

  const pieData = [
    {key: 'Cats', value: 100},
    {key: 'Dogs', value: 200},
    {key: 'Other', value: 50}
  ];

  <PieChart data={pieData} size={300} />

  <Legend data={pieData} dataId={'key'} />

  <Legend data={pieData} dataId={'value'} />

Horizontal

Pass 'horizontal' as a parameter to switch the list items from block to inline-block.

  <Legend data={pieData} dataId={'key'} horizontal />

Config

React Easy Charts use d3.scale.category20to generate a list of default colours. If your chart has a custom colour scheme, pass this colour array to the config property.

  const pieDataCustom = [
    {key: 'Cats', value: 100, color: '#aaac84'},
    {key: 'Dogs', value: 200, color: '#dce7c5'},
    {key: 'Other', value: 50, color: '#e3a51a'}
  ];

  const config = [
    {color: '#aaac84'},
    {color: '#dce7c5'},
    {color: '#e3a51a'}
  ];

  <PieChart data={pieDataCustom} size={300} />

  <Legend data={pieDataCustom} dataId={'key'} config={config} />

Styles

Legend is a styled unordered list and can be easily customised by overriding (all or parts of) the default styles. Simply create a javascript based style object and pass this in through the styles parameter.

  /* default component styles */
  const defaultStyles = {
    '.legend': {
      'list-style': 'none',
      margin: 0,
      padding: 0
    },
    '.legend li': {
      display: 'block',
      lineHeight: '24px',
      marginRight: '24px',
      marginBottom: '6px',
      paddingLeft: '24px',
      position: 'relative'
    },
    '.legend li.horizontal': {
      display: 'inline-block'
    },
    '.legend .icon': {
      width: '12px',
      height: '12px',
      background: 'red',
      borderRadius: '6px',
      position: 'absolute',
      left: '0',
      top: '50%',
      marginTop: '-6px'
    }
  };

  /* example override */
  const customStyle = {
    '.legend': {
      backgroundColor: '#f9f9f9',
      border: '1px solid #e5e5e5',
      borderRadius: '12px',
      fontSize: '0.8em',
      maxWidth: '300px',
      padding: '12px'
    }
  };

  <Legend
    data={pieDataCustom}
    dataId={'key'}
    config={config}
    styles={customStyle}
    horizontal
  />

Scatterplot

A scatterplot example

  const scatterStyle = {
    '.legend': {
      backgroundColor: '#f9f9f9',
      border: '1px solid #e5e5e5',
      borderRadius: '12px',
      fontSize: '0.8em',
      maxWidth: '480px',
      padding: '12px'
    }
  };

  <ScatterplotChart
    data={bigData}
    width={480}
    height={270}
    axes
  />

  <Legend
    data={bigData}
    dataId={type}
    styles={scatterStyle}
    horizontal
  />