DEV Community

Cover image for ⚡React Blazing Fast SVG charts ⚡(next-chartist)
poboisvert
poboisvert

Posted on • Edited on

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

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

Image description


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
Enter fullscreen mode Exit fullscreen mode

or in _app or layout.tsx/jsx

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" async />
Enter fullscreen mode Exit fullscreen mode
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
Enter fullscreen mode Exit fullscreen mode

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}
      />
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)