Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fraserxu/react-chartist
⚛ React component for Chartist.js
https://github.com/fraserxu/react-chartist
Last synced: 1 day ago
JSON representation
⚛ React component for Chartist.js
- Host: GitHub
- URL: https://github.com/fraserxu/react-chartist
- Owner: fraserxu
- License: mit
- Created: 2014-10-29T08:05:52.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-11-03T15:48:08.000Z (about 1 year ago)
- Last Synced: 2024-10-30T04:54:19.773Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.12 MB
- Stars: 528
- Watchers: 8
- Forks: 96
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - fraserxu/react-chartist - ⚛ React component for Chartist.js (JavaScript)
- awesome-react-components-all - react-chartist - React component for Chartist.js. (Uncategorized / Uncategorized)
- awesome-react-components - react-chartist - React component for Chartist.js. (UI Components / Chart)
- awesome-react - react-chartist - React component for Chartist.js.  (UI Components / Data Visualization)
- awesome-list - react-chartist - React component for Chartist.js. (Demos / Chart)
- awesome-react-components - react-chartist - React component for Chartist.js. (UI Components / Chart)
- awesome-react-components - react-chartist - React component for Chartist.js. (UI Components / Chart)
- awesome-react-components - react-chartist - React component for Chartist.js. (UI Components / Chart)
- fucking-awesome-react-components - react-chartist - React component for Chartist.js. (UI Components / Chart)
- awesome-react-components - react-chartist - React component for Chartist.js. (UI Components / Chart)
- awesome-react-components - react-chartist - React component for Chartist.js. (UI Components / Chart)
README
react-chartist
==============
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][downloads-url]
React component for [Chartist.js](https://gionkunz.github.io/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
```JavaScript
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 (
)
}
}
ReactDOM.render(, document.body)
```
### Options
Please check out [Chartist.js API documentation](http://gionkunz.github.io/chartist-js/api-documentation.html) 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
```jsx
```
### Note
This module does not include the css files for Chartist. If you want to add it, include their CDN in your html file
```HTML
```
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
[npm-image]: https://img.shields.io/npm/v/react-chartist.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-chartist
[downloads-image]: http://img.shields.io/npm/dm/react-chartist.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/react-chartist