Quick start guide

Installation

Install cl-react-graph using NPM or Yarn.

npm i -S cl-react-graph

Creating our first graph

You are going to use a pie chart for our example lets import that and useWidth to handle the resizing.

  import {
    PieChart,
    useWidth,
  } from 'cl-react-graph;

Now You need some data here is an example for you to get started, for more options take a deeper dive into the chart you want to use.

  const data = {
    bins: [
      'bin 1',
      'bin 2',
      'bin 3 with a long name',
      'bin 4',
      'bin 5',
      'bin 6',
      'bin 7'
    ],
    counts: [
      {
        data: [1, 2, 3, 4, 5, 6, 7],
      },
    ],
  };

Then use the chart like so passing in your data:

  const MyComponent = () => {
    const [ref, width] = useWidth('90%');
    return(
      <div ref={ref} style={{width: '400px'}}>
        <PieChart
          width={width}
          height={400}
          data={data}
        />
      </div>
    )
  };

Resulting pie chart