How do I create a chartjs bar chart?

Question

The following code is supposed to create a new bar chart but I'm getting an "Uncaught TypeError: Cannot set property 'data' of undefined" which points to the first line (var chart = new Chart etc)

var chart = new Chart(document.getElementById("chart1"), {
            type: 'bar',
            data: {
                labels: ["Label1", "Label2", "Label3", "Label4"],
                datasets: [{
                    label: "Num incidents",
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    data: [89,57,25,28]
                }],
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        })

I have a html file with the following:

<head>
<meta charset="utf-8"/>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"> 
</script>
</head>

<div class="column">
  <canvas id="chart1"></canvas>
</div>

Do i need to include the chartjs api in the js file as well?
Or do i need to call the chart somewhere in my js file?

Are you loading your Chart.min.js before you call the new Chart method ? — Pogrindis
I'm not sure since i got a bunch of the code from a colleague. It could indeed be the order of files loaded in. — Bob

Nicky Nicky · Accepted Answer · 2018-12-18T10:39:37

Works for me. It must be just the order.

Try this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" type="application/javascript"></script>
    </head>
    <body>
        <div class="column">
          <canvas id="chart1"></canvas>
        </div>
        <script type="application/javascript">
            var chart = new Chart(document.getElementById("chart1"), {
                type: 'bar',
                data: {
                    labels: ["Label1", "Label2", "Label3", "Label4"],
                    datasets: [{
                        label: "Num incidents",
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        data: [89,57,25,28]
                    }],
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        </script>
    </body>
</html>

Or play here: https://jsfiddle.net/2d9kfegj/2/

How do I create a chartjs bar chart?

2 Answers