Why is this bar chart using chart.js not rendering in react.js?

Question

I'm trying to add a bar chart to my app with arbitrary data for now but I can't get it to render. The it's imported correctly and i've used example code from the chart.js web site but no luck. What am I missing?

import Chart from 'chart.js';
import React, { Component } from 'react';

class ChartTeamOne extends Component {
setState(){
  const t1ChartEl= document.getElementById("teamOneCanvas");
  let teamOneChart = new Chart(t1ChartEl,{
  type: 'bar',
  data: {
    labels: ["Red", "Blue"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});
}
render(){
return(
  <canvas id="teamOneCanvas"></canvas>
);
}
}

export default ChartTeamOne;

erichardson30 · Accepted Answer · 2016-09-07 15:26:19Z

1

This is because you have this in the setState function and this is not setting the state of anything. This should be in the componentDidMount() lifecycle function.

setState() is used to update the state of your application https://facebook.github.io/react/docs/component-api.html where as componentDidMount() will fire once your component is mounted after the initial rendering occurs and will perform the functions inside. https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

answered Sep 7, 2016 at 15:26

erichardson30

5,0548 gold badges29 silver badges47 bronze badges

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

Comments

Arcite · Accepted Answer · 2017-03-14 18:12:58Z

chart.js needs a canvas to "overwrite" before it can draw its chart. You have the part where you return the canvas correct. But the function you are looking for is componentDidMount()not setState(). I have taken their example for pie charts and created a react class for it. It should be pretty simple to change your code to match the change.

import Chart from 'chart.js';
import React, {
    Component
} from 'react';

export default class PieChart extends Component {
    componentDidMount() {
        debugger;
        const ctx = document.getElementById("pie-chart");
        const data = {
            labels: [
                "Red",
                "Blue",
                "Yellow"
            ],
            datasets: [{
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF0000",
                    "#0000FF",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
        };
        const pieChart = new Chart(ctx, {
            type: 'pie',
            data: data
        });
    }
    render() {
        return (
            <canvas id="pie-chart"></canvas>
        );
    }
}

Collectives™ on Stack Overflow

Why is this bar chart using chart.js not rendering in react.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related