Chart.js: chart not displayed

Question

I'd like to use Chart.js to create stunning charts into a webpage.

Following the documentation, I wrote the code as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>Chart.js demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>

<body>
    <script>
        var pieData = [
            {
                value: 20,
                color:"#878BB6"
            },
            {
                value : 40,
                color : "#4ACAB4"
            },
            {
                value : 10,
                color : "#FF8153"
            },
            {
                value : 30,
                color : "#FFEA88"
            }
        ];
        // Get the context of the canvas element we want to select
        var countries= document.getElementById("countries").getContext("2d");
        new Chart(countries).Pie(pieData);
    </script>

    <h1>Chart.js Sample</h1>
    <canvas id="countries" width="600" height="400"></canvas>
</body>

</html>

Which is the reason why the chart doesn't appear?

Removing the part of the question which both answers refer to does not make sense. — Marco Kerwitz, Jan 04 '15 at 16:15
Although unrelated to this specific scenario, I'd like to comment that if the chart is created inside a hid element (`display:none`) and the element is shown after, the chart won't display. Only workaround I found was to show the element before creating the chart (calling `chart.resize()` won't work either). This caught me twice so with this comment I won't forget again... — Parziphal, Jun 08 '15 at 17:35

score 49 · Accepted Answer · answered Aug 20 '18 at 08:36

49

Add a div outside the canvas element:

<div><canvas id="countries" width="600" height="400"></canvas></div>

answered Aug 20 '18 at 08:36

Shrinivas Kalangutkar

983
1
9
16

2

Wow. I never realised that this is a thing. Can you please help me understand this a little bit better why it works only when canvas is inside a div. I have an Angular 7 setup and this works only if wrapped in a div in one of component templates. – Priya Ranjan Singh Nov 18 '18 at 18:18
3

bcos charjs checks for the div element to plot graph in the canvas element. – Shrinivas Kalangutkar Nov 19 '18 at 19:24
Oh sadly this is it. – SoEzPz Jan 12 '21 at 21:40

Julien Malige · Answer 2 · 2018-09-12T14:09:54.813

First, you have to put your script after the canvas declaration. After that, delete the pie options (or define them).

<html>
<head>
    <meta charset="utf-8"/>
    <title>Chart.js demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>


    <h1>Chart.js Sample</h1>

    <canvas id="countries" width="600" height="400"></canvas>
    <script>
        var pieData = [
            {
                value: 20,
                color:"#878BB6"
            },
            {
                value : 40,
                color : "#4ACAB4"
            },
            {
                value : 10,
                color : "#FF8153"
            },
            {
                value : 30,
                color : "#FFEA88"
            }
        ];
        // Get the context of the canvas element we want to select
        var countries= document.getElementById("countries").getContext("2d");
        new Chart(countries).Pie(pieData);
    </script>
</body>

score 1 · Answer 3 · answered Jul 21 '14 at 12:53

1

pieOptions is null :) just remove it from your .Pie() call.

http://jsbin.com/decagicu/1/

And keep your browser script console open, so you can see all the valuable output it provides you :)

answered Jul 21 '14 at 12:53

Brunis

1,073
8
12

i just visited that link in Chrome and your PieChart is displayed. can you inspect and find any errors in the console? – Brunis Jul 21 '14 at 13:00
I fixed the error by following Julien Malige's suggestion. Thank you anyway – vdenotaris Jul 21 '14 at 13:01
yeah, i guess i should have copy/pasted your code like he did. my jsbin does the same as his suggestion though. In general you should always put your scripts at the bottom. – Brunis Jul 21 '14 at 13:05

score 0 · Answer 4 · answered Sep 18 '22 at 20:50

Such a problem occurred to me because I didn't put a comma after the {{ data }}

Wrong
[{% for data in years %} '{{ data }}' {% endfor %}]

Right one
[{% for data in years %} '{{ data }}', {% endfor %}]

$(document).ready(function(){
    var ctx = document.getElementById('myChart').getContext('2d');
    console.log("context",ctx);
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{% for data in years %} '{{ data }}', {% endfor %}], //loop through queryset, 
            datasets: [{
                label: 'Value',
                data: [{% for data in values %} '{{ data }}', {% endfor %}], //loop through queryset
                fill: false,
                borderColor: [
                    'rgba(75, 192, 192, 1)',
                ],
                tension: 0.1,
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});

Chart.js: chart not displayed

4 Answers4

Linked