I am trying to use charts from chartist.js link: .html#simple-line-chart

When I try to use them in my code I am getting Chartist to defined how can I import it in my ponent ?

Code:

   import React, { Component } from 'react';
import chartistGraph from "react-chartist";

const simpleLineChartData = {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
          series: [
            [12, 9, 7, 8, 5],
            [2, 1, 3.5, 7, 3],
            [1, 3, 4, 5, 6]
          ]
}

class Chart extends Component {

  render(){
    return(
      <div>
            <chartistGraph data={simpleLineChartData} type={'Line'} /> 
      </div>

    )}

}

export default Chart;

Above code gives error saying Chartist not define. How to import some library and use it in reactjs.

I am trying to use charts from chartist.js link: https://gionkunz.github.io/chartist-js/examples.html#simple-line-chart

When I try to use them in my code I am getting Chartist to defined how can I import it in my ponent ?

Code:

   import React, { Component } from 'react';
import chartistGraph from "react-chartist";

const simpleLineChartData = {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
          series: [
            [12, 9, 7, 8, 5],
            [2, 1, 3.5, 7, 3],
            [1, 3, 4, 5, 6]
          ]
}

class Chart extends Component {

  render(){
    return(
      <div>
            <chartistGraph data={simpleLineChartData} type={'Line'} /> 
      </div>

    )}

}

export default Chart;

Above code gives error saying Chartist not define. How to import some library and use it in reactjs.

• javascript
• reactjs
• chartist.js

• Did you try importing the library? var ChartistGraph = require('react-chartist') try this. It will include chartist library. – AsthaUndefined Commented Jun 5, 2018 at 5:12

2 Answers 2

Run

npm install react-chartist --save

One more thing, you need to install chartist also as it is the dependency

npm install chartist --save.

Then you will be able to import Chartist into your application.

import chartistGraph from "react-chartist";

Here is the link how it can be implemented in codesandbox. codesandbox Link

Follow this link for the implementation Link

You can import ChartistGraph from 'react-chartist' as:

 import ChartistGraph from 'react-chartist';

or

var ChartistGraph = require('react-chartist')

Also, 'react-chartist' doesn't include the css files for Chartist, so if you want to add the styles then add this in your index.html file:

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

Or you can install 'chartist' package

 npm install chartist

See this link for decription