Cl React Graphs

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