simple-chart-react v0.0.8

Simple React Chart

Demo

How to use

Line Chart

Pass two axes and array of values to LineChart component. Data needs to contain values with keys corresponding to those of axes. Vertical axis goes first in an array and horizontal goes second.

const axes = [{ key: "y" }, { key: "x" }]
const data = [{ x: 3, y: 4 }, { x: 4, y: 7 }, { x: 5, y: 4 }, { x: 6, y: 3 }]

<LineChart axes={axes} data={data} />

LineChart also accepts string values.

const NonNumData = [
  { x: "V0", y: 0 },
  { x: "V1", y: 0.5 },
  { x: "V2", y: 2 },
  { x: "V3", y: 4 }
]

<LineChart axes={axes} data={nonNumData} />

Customisations

Axes names

You can set name of axis. It will be shown instead of key.

const axes = [{ key: "y", name: "Value" }, { key: "x", name: "Time" }]

Chart Size

You can pass height and width to LineChart to change it's size.

Line color

You can pass lineColor to LineChart to change it's line color.

<LineChart axes={axes} data={data} width={600} lineColor="grey" />

Styling

You can style chart container with css by using simple-react-chart class.