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: 2 months ago
JSON representation

⚛ React component for Chartist.js

Lists

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