Meteor / React.js / Chart.js issue

Question

I work on a Meteor/React.js application and I'm trying to add Chart.js functionality into my app. The below code returns errors and doesn't work:

import Chart from 'chart.js';

    drawChart(){
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                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
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
        }

    render() {

           return (
                <div>
                     <canvas id="myChart" width="400" height="400"></canvas>

                     {this.drawChart()}

                 </div>
);
}

It looks like drawChart function can't get element by id "myChart" and returns "Uncaught TypeError: Cannot read property 'length' of null" where null is ctx in my example.

When I switch to jQuery and do $("myChart") instead it returns "Failed to create chart: can't acquire context from the given item".

Then I decided to add .getContext("2d") to $("myChart") where I got $("myChart").getContext("2d") and it still doesn't work. It returns "Uncaught TypeError: $(...).getContext is not a function"

Please help

Answer 1

You actually had it correct your original way,

var ctx = document.getElementById("myChart");

The reason for the jquery errors is because you left off the # sign (needed since you are dealing with an id). This would work though.

$("#myChart")

However, I think you will still get an error. I think the problem is that your canvas element is not actually rendered yet since you are calling {this.drawChart()} directly from the render function.

I don't know a lot about react, but can you call this function after you have rendered? I do however know a lot about chart.js and this error pops up when canvas is not yet in the dom but you try to access it.