๐ library for React.
I want to learn more about SVG after coming across some resources showing the simplicity, elegance and power of SVG. The most fun ones were How to be a compiler with JavaScript and playing around with Elm Plot.
npm i -S react-plot
React is a peer dependency for this library.
The following code:
import React from 'react';
import { render } from 'react-dom';
import { Plot, Axis, Line } from 'react-plot';
const data = [
[ 10, 490 ],
[ 140, 380 ],
[ 310, 420 ],
[ 490, 10 ]
];
render(
<Plot width={500} height={500} data={data}>
<Line color="#6fc1ff" />
</Plot>,
document.getElementById('root')
);
Renders:
The following code:
import React from 'react';
import { render } from 'react-dom';
import { Plot, Axis, Line } from 'react-plot';
const data = [
[ 50, 470 ],
[ 150, 300 ],
[ 310, 420 ],
[ 490, 10 ]
];
render(
<div>
<Plot width={400} height={200} xStep={50} yStep={100} data={data} >
<Line color="#6fc1ff" />
<Axis orientation="left" />
<Axis orientation="bottom" />
</Plot>
<Plot width={600} height={400} xStep={50} yStep={100} data={data} >
<Line color="#ff2c6d" />
<Axis orientation="right" />
<Axis orientation="top" customLabel={(i, l) => i % 2 > 0 ? '' : l} />
</Plot>
</div>,
document.getElementById('root')
);
Renders:
At the moment the viewbox is cut off, so for the plot to render properly you
must add padding to to the svg
element. For example:
svg {
padding: 5em;
}
At the moment the library exposes only this very simple line chart, but I'll add more functionality when I have the time and learn more ๐.
MIT Copyright (c) 2017 Daniรซl Illouz