react-chartist alternatives and similar libraries
Based on the "Chart" category.
Alternatively, view react-chartist alternatives based on common mentions on social networks and blogs.
-
-
-
-
-
-
-
-
-
-
-
-
chartify
DISCONTINUED. 📊 📈 📉 React.js plugin for building charts using CSS [GET https://api.github.com/repos/kis/chartify: 404 - Not Found // See: https://docs.github.com/rest/repos/repos#get-a-repository] -
-
-
-
-
-
-
-
-
-
Civic Auth - Auth in Less Than 5 Minutes
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-chartist or a related project?
README
react-chartist
React component for Chartist.js
Installation
$ 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
Usage
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)
Options
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} />
Note
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
Development
$ npm install
To build run npm run build
Changelog
If you want to support react version under v0.13, use npm install [email protected]
License
MIT
*Note that all licence references and agreements mentioned in the react-chartist README section above
are relevant to that project's source code only.