Multiple data sets not working when using ChartJS

Question

I am using chart js to produce a line graph and I want to display multiple datasets showing different data. After looking online I found a solution below, but for some reason it is not working. In the console I get the following error: Uncaught ReferenceError: ctx is not defined at 1:80.

If anyone can see why the chart is not working, that would be great.

JS:

document.getElementById('productDetailGraph').getContext('2d');
    var productGraph = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['01, 10', '02, 10', '03, 10', '04, 10', '05, 10', '06, 10', '07, 10', '08, 10', '09, 10', '10, 10', ],
            datasets: [{
                data: ['123, 124, 125, 126, 128, 122, 127, 121, 125, 127'],
                label: 'Argos',
                backgroundColor: 'rgb(255, 255, 255)',
                fill: false,
                borderColor: 'rgb(128, 128, 128)',
            }, {
                data: ['121, 122, 124, 122, 129, 131, 134, 137, 138, 140'],
                label: 'Smyths',
                backgroundColor: 'rgb(255, 255, 255)',
                fill: false,
                borderColor: 'rgb(128, 128, 128)',
            }, {
                data: ['122, 129, 125, 134, 135, 138, 139, 142, 145, 154'],
                label: 'Entertainer',
                backgroundColor: 'rgb(255, 255, 255)',
                fill: false,
                borderColor: 'rgb(128, 128, 128)',
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:false
                    }
                }]
            }
        }
    });

What is ctx? #productDetailGraph?

demkovych
– demkovych

2019-09-25 09:09:33 +00:00
Commented Sep 25, 2019 at 9:09 — demkovych
– demkovych, Commented Sep 25, 2019 at 9:09

Ricardo Rocha · Accepted Answer · 2019-09-25 09:13:18Z

1

You are using the variable ctx which is indeed not defined.

Change this line:

document.getElementById('productDetailGraph').getContext('2d');

To this:

var ctx = document.getElementById('productDetailGraph').getContext('2d');

edited Sep 25, 2019 at 9:13

answered Sep 25, 2019 at 9:11

Ricardo Rocha

16.5k24 gold badges86 silver badges142 bronze badges

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

1 Comment

Ricardo Rocha Over a year ago

@MaxLoyd If you think that is the correct answer, please accept it :D

Collectives™ on Stack Overflow

Multiple data sets not working when using ChartJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related