CODEWITHSUNDEEP
javascriptjqueryhtmlchartsmeteor-blaze
RP12
RP12

Reputation: 428

Getting 'Chart is not defined' error when using chart.js in Meteor

I am using the official chart.js atmosphere package in my meteor application. I've tried running an example chart to see if I can pull it up however I am getting an issue saying "ReferenceError: Chart is not defined"

Here are the steps I took to installing the atmosphere package and running the code to produce the chart.

  1. Installed the package with meteor add chart:chart
  2. In my HTML I added the canvas tag calling the chart with it's informaiton
  3. In the JS I added the function that creates the chart along with its relevant information

When I go to the page however, I just get an empty 400x400 image which is the canvas but there is no content there where the chart is supposed to be. Could someone assist me in figuring out what step I'm missing in order to get the chart to appear?

HTML

<template name="Home_page">
<canvas id="myChart" width="400" height="400"></canvas>
</template>

JS

import './home-page.html';


Template.Home_page.onRendered(function homePageOnRendered() {
var ctx = document.getElementById("myChart").getContext("2d");
    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
                    }
                }]
            }
        }
    });
});

Upvotes: 0

Views: 4584

Answers (1)

RP12
RP12

Reputation: 428

Ok I forgot to add

import Chart from 'chart.js'

in the top of my js file. That fixed it.

Upvotes: 3

Related Questions