Not a Propaganda Machine

    react-chartist
    TypeScript icon, indicating that this package has built-in type declarations

    0.14.4 • Public • Published

    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

    Install

    npm i react-chartist

    DownloadsWeekly Downloads

    21,139

    Version

    0.14.4

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • fraserxu