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

github: https://github.com/poboisvert/next-chartist

---

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

---

The Chartist library simplifies the process of chart creation with its intuitive JavaScript API. It offers effortless chart generation with diverse options for customization, ensuring visually appealing results swiftly. This tutorial will guide you through crafting a chart from the ground up, step by step. Additionally, you can refer to the codesandbox example provided to visualize the end product. Familiarity with HTML and JavaScript basics is assumed, with no prior exposure to Chartist.js necessary.

🚀 Setup

To integrate Chartist into your project, begin by importing the necessary Chartist.js files into your react/next project:

npm install --save next-chartist

or in _app or layout.tsx/jsx

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

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

Ensure these imports are placed within the

section. Chartist charts render as SVG, offering infinite scalability and suitability for printing or animation in infographics and presentations.

⚛ Lastly, include the JavaScript:

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}
      />
    )
  }
}