Skip to content

fraserxu/react-chartist

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-chartist

NPM version Downloads

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 react-chartist@0.9.0

License

MIT