poboisvert / next-chartist

⚛ NPM Package for React Chartist.js component

⚡React Blazing Fast SVG charts ⚡ (next-chartist)

A continuation of https://github.com/fraserxu/react-chartist. Feel free to push an update

Made with create-react-library

NPM Package: https://www.npmjs.com/package/next-chartist

Install

npm install --save next-chartist

or in _app or layout.tsx/jsx

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" async />

Usage

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

import React, { Component } from 'react'

import NextChartist from 'next-chartist'

class Example extends Component {

    var type = "barChart"

    var dataChart = {
      labels: ["Speed"],
      series: [1000]
    }

    var options = {
      high: 2500,
      low: 0,
      reverseData: true,
      distributeSeries: true,
      horizontalBars: true,
      chartPadding: {
        right: 50
      },
      axisY: {
        offset: 125,
        onlyInteger: true
      },
      axisX: {
        onlyInteger: true
      }

  }

  render() {
    return (
      <NextChartist
        className={'ct-octave'}
        data={dataChart}
        options={options}
        type={type}
      />
    )
  }
}

License

MIT © poboisvert