0.0.14 • Published 10 months ago
@evergreenstash/react-chart v0.0.14
Hey,
Do you have something to plot?
I'm the <Chart />
component and I'm really excited about how incredibly awesome your data will look like on my canvas! I'm self-sufficient and provide a bunch of options to custmoize myself for your needs in the most convinient way.
Please, be advised this repo is marked as
in progress
and can work unstable.
Installation
yarn add @evergreenstash/react-chart
or
npm -i @evergreenstash/react-chart
will do the work :)
Usage
All you need to start is to import <Chart />
into project and pass some numeric values to it.
The children are completely optional, some of them can be additionally tuned.
The minimal setup:
import { Chart } from '@evergreenstash/react-chart';
...
const values = [
data.map(item => item.temperature)
];
...
<Chart values={values} />
The complete basic setup:
import { Chart, Line, AxisX, AxisY, Zoom, Tooltips } from '@evergreenstash/react-chart';
...
const values = [
data.map(item => item.temperature),
data.map(item => item.humidity),
];
const dates = data.map(item => item.date);
...
<Chart values={values}>
<Line label="temperature" color="#73A921" />
<Line label="humidity" color="#487AFA" />
<AxisX labels={dates} />
<AxisY />
<Zoom />
<Tooltips />
</Chart>
Check the example
folder for more details.