20

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, pieOptions);
        </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?

Improve this question
2
  • 4
    Removing the part of the question which both answers refer to does not make sense. Commented Jan 4, 2015 at 16:15
  • 2
    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... Commented Jun 8, 2015 at 17:35

3 Answers 3

Reset to default
49

Add a div outside the canvas element:

<div><canvas id="countries" width="600" height="400"></canvas></div>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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.
bcos charjs checks for the div element to plot graph in the canvas element.
This answer is incorrect - The correct solution is shared in this answer - The element countries does not exist yet because OP added the script above the container and didn't wait for the document to be loaded - demo without wrapping the canvas in a div. The suggestion of wrapping the canvas in a div just give the same error OP is experiencing - "TypeError: document.getElementById(...) is null" — demo
Even just adding the <canvas> element at the start wont solve the issue as the variable "pieOptions" passed in the "new Chart(countries).Pie(pieData, pieOptions);" is not defined, correct syntax should be "new Chart(countries).Pie(pieData);"
25

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>

Improve this answer

3 Comments

This is partially correct, variable "pieOptions" passed in new Chart(countries).Pie(pieData, pieOptions); is not defined. it can be fixed by removing "pieOptions" from new Chart(countries).Pie(pieData);
How is it partially correct? The answer already clearly states this: "After that, delete the pie options (or define them)." and is also reflected in the code: new Chart(countries).Pie(pieData);
@ShrinivasKalangutkar Where do you see pieOptions in this answer?
2

pieOptions is null. Remove it from your .Pie() call.

https://jsbin.com/decagicu/1/

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

Improve this answer

3 Comments

i just visited that link in Chrome and your PieChart is displayed. can you inspect and find any errors in the console?
I fixed the error by following Julien Malige's suggestion. Thank you anyway
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.