Nextjs React Chartist

React component for Chartist.js

For the implementation of graphic charts, we used the Chartist plugin and added our custom styles. The plugin is free to download and use here. Fraser Xu is the guy behind the project, he did an awesome job and we recommend using it his stuff. Besides all the great customisation that you have using it, it is also fully responsive. We changed the colors, background and typography.

As you will see in the following examples, we put our variables for charts in variables/charts.js. Here you can find all variables for creating these charts. This module exports all chart variables together, and every variables by it’s own. Please check this file to understand better.

Styles

You will find the styles for this component in assets/scss/nextjs-material-dashboard-pro/plugins/_plugin-react-chartist.scss..

Example

For more examples, please check our live demo:

• Dashboard Page
• Charts Page

import React from 'react';
// react plugin for creating charts
import ChartistGraph from "react-chartist";
// core components
import { roundedLineChart } from "variables/charts.js";

export default function Charts(){
  return (
    <ChartistGraph
      className="ct-chart"
      data={roundedLineChart.data}
      type="Line"
      options={roundedLineChart.options}
      listener={roundedLineChart.animation}
    />
  );
}

Props

If you want to see more examples and properties please check the official react-chartist Documentation and also the official chartistjs Documentation.

You can also check the Official React-Chartist Github Repository and the the Official ChartistJS Github Repository.