React Chart
React-Chart is a library for creating svg base charts with react.
$ npm install --save @socit/react-chart
Basic Usage
jsx
import React from 'react';
import ReactChart from 'react-chart';import './App.css';
function App() {
const data = [
{ x: [1398, 6, 1], y: 1 },
{ x: [1398, 6, 2], y: 2 },
{ x: [1398, 6, 3], y: 3 },
{ x: [1398, 6, 4], y: 4 },
{ x: [1398, 6, 5], y: 5 },
{ x: [1398, 6, 6], y: 6 },
{ x: [1398, 6, 8], y: 7 },
{ x: [1398, 6, 9], y: 8 },
{ x: [1398, 6, 10], y: 10 }
];
const data2 = [
{ x: 1, open: 2, close: 3, high: 4, low: 1 },
{ x: 2, open: 3, close: 4, high: 5, low: 2 },
{ x: 3, open: 4, close: 6, high: 7, low: 2 },
{ x: 4, open: 5, close: 3, high: 6, low: 2 },
{ x: 5, open: 4, close: 3, high: 5, low: 1 },
{ x: 6, open: 4, close: 5, high: 6, low: 2 },
{ x: 7, open: 4, close: 5, high: 7, low: 3 },
{ x: 8, open: 5, close: 6, high: 6, low: 4 },
{ x: 9, open: 6, close: 3, high: 7, low: 3 }
];
return (
height={300}
axisX={true}
axisY={true}
charts={[
{ type: 'line', color: '#f00', data: data }
]}
/>
height={200}
axisX={true}
axisY={true}
charts={[
{ type: 'candlestick', upperColor: '#0f0', lowerColor: '#f00', data: data2 }
]}
/>
);
}export default App;
``For documentation see socit.gitlab.io/react-chart.
React-Chart is under the terms of MIT licensed.