React component for Chartist.js
$ npm install react-chartist --save
Chartist is a peer dependency to react chartist. You need to install it if you do not have it installed already.
$ npm install chartist --save
import React from 'react';
import ReactDOM from 'react-dom';
import ChartistGraph from 'react-chartist';
class Bar extends React.Component {
render() {
var data = {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
]
};
var options = {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 2 === 0 ? value : null;
}
}
};
var type = 'Bar'
return (
<div>
<ChartistGraph data={data} options={options} type={type} />
</div>
)
}
}
ReactDOM.render(<Bar />, document.body)Please check out Chartist.js API documentation for more details of the options.
- data - chart data (required)
- type - chart type (required)
- style - inline css styles (optional)
- options - chart options (optional)
- responsive-options - chart responsive options (optional)
To add support for aspect ratio
<ChartistGraph className={'ct-octave'} data={data} options={options} type={type} />This module does not include the css files for Chartist. If you want to add it, include their CDN in your html file
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>Or use bower or npm to install Chartist and include it in your build process.
$ npm install chartist
Or
$ bower install chartist
$ npm install
To build run npm run build
If you want to support react version under v0.13, use npm install [email protected]
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent