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.
-
victory
A collection of composable React components for building interactive data visualizations -
react-chartjs-2
React components for Chart.js, the most popular charting library -
react-chartjs
Common react charting components using chart.js. -
react-sparklines
Beautiful and expressive Sparklines React component -
react-google-charts
A thin, typed, React wrapper over Google Charts Visualization and Charts API. -
react-timeseries-charts
Declarative and modular timeseries charting components for React -
chartify
๐ ๐ ๐ React.js plugin for building charts using CSS -
rumble-charts
React components for building composable and flexible charts -
react-sigmajs
Lightweight React library for drawing network graphs built on top of SigmaJS -
d3-react-squared
Lightweight event system for (d3) charts and other components for ReactJS. -
react-sparkline
React component for rendering simple sparklines -
react-micro-bar-chart
React component for micro bar-charts rendered with D3 -
Flowchart React
Lightweight flowchart & flowchart designer for React.js. -
JSCharting for React
Official JSCharting React Plugin & Examples -
essential js 2 charts
Beautiful and interactive charts & graphs for react.
Appwrite - The open-source backend cloud platform
* 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.