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

Question

I'm currently trying to render a bar chart in ReactJS using Chart.js

info:

official page - http://www.chartjs.org/docs/

gitHub - https://github.com/reactjs/react-chartjs

The problem I have is that even though my terminal doesn't give me any errors, my local server doesn't render anything.

Here is my code:

var React = require('react');
var BarChart = require('../../node_modules/chart.js/Chart.js');
var styles = require('./Styles.js');

var data={
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
  }]
};
var options={
  scales: {
      yAxes: [{
          ticks: {
              beginAtZero:true
          }
      }]
  }
};

var Graphs = React.createClass({
  render: function() {
    return (
      <div id='graphDiv'>
        <BarChart type='bar' data={data} options={options} />
      </div>
      );
    }
  });

module.exports = Graphs;

Please bear with me if I made some silly mistakes, it's the first React app I'm coding so I have a lot to learn.

I have multiple questions, though:

did I install the library at the right place? - I used npm and it is now located in the node_modules folder
Is the path towards the file written correctly? as the gitHub says it should be something like this:

var LineChart = require("react-chartjs").Line;
Is it ok to place the data and the options as global variables?
what's wrong with my code if I don't get any error messages from the terminal ?

Have a nice day

Shubham Khatri · Accepted Answer · 2017-01-03 17:25:00Z

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 [email protected] as a dependency in your project . Install it as

npm install -S chart.js@^1.1.1

edited Jan 3, 2017 at 17:25

answered Jan 3, 2017 at 16:52

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

nootaku Over a year ago

Hey man thanks for answering ;-) So I did the importation like you suggested and added the chartjs dependency. I also changed "BarChart" to "Bar" in the render module. however it still leaves me with a blank window. A few question regarding the importation though: How can I know from where I need to import stuff? since 'react-chartjs' and 'chartjs' have no pathname - when do I have to use 'libraryname' and when do I have to use './path/name.js' ?

Shubham Khatri Over a year ago

When you install react-chartjs or any module like npm install -S react-chartjs it goes inside your default node_modules folder and then you need not specify the path , rather use the name directly. It's only when u have a custom component that u need to import, that u use the path

Shubham Khatri Over a year ago

Also Make sure you have installed react-chartjs and chartjs with correct versions as mentioned in the doc

nootaku Over a year ago

Ah ok. maybe that's the problem then I've been through my node_modules folder and I cannot seem to find anything called 'react-chartjs'. I'll just have to find out where it is supposed to come from.

nootaku Over a year ago

is it problematic if i have: <code>npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN [email protected] No description npm WARN [email protected] No repository field.</code> in my terminal after installation ?

|

nootaku · Accepted Answer · 2017-01-03 18:07:02Z

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.

answered Jan 3, 2017 at 18:07

nootaku

6110 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related