Giter Club home page Giter Club logo

react-chartist's Introduction

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 [email protected]

License

MIT

react-chartist's People

Contributors

fraserxu avatar toldyaonce avatar sajinshrestha avatar mrvicadai avatar debugpai avatar joshgerdes avatar julien-f avatar robinsoncol avatar vladmiller avatar diedsmiling avatar riccardo-ditosto-gellify avatar wmira avatar tlambrou avatar tanapoln avatar rojerua avatar lawrencekgrant avatar eyepulp avatar opudalo avatar cmmartin avatar nerdcowboy avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.