Chartjs-Chart.js in ReactJS app: no terminal error, but no rendering

by

1👍

✅

You are importing Barchart from the wrong module. you need to import it from BarChart

import {Bar} from 'react-chartjs';

Also you need to include chartjs as dependency

import Chart from 'chart.js';

and then use it as

render: function() {
    return (
      <div id='graphDiv'>
        <Bar type='bar' data={data} options={options} />
      </div>
      );
    }
  });

install react-chartjs as

npm install -S react-chartjs

Also make sure to install and import chart.js@1.1.1 as a dependency in your project . Install it as

npm install -S chart.js@^1.1.1

0👍

Follow Shubham Khatri’s post. Then just change the following:

import {Bar} from 'react-chartjs';
import Chart from 'chart.js';

Into this:

var BarChart = require('react-chartjs').Bar;
var Chart = require('chart.js');

I don’t know why but it works.

Leave a comment