[Chartjs]-How do I create a chartjs bar chart?

by

1👍

✅

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/

0👍

Inside your html file:

<script src="myJavascript.js"> </script>

The problem is that you don’t include your js file in your html. Make sure you include your js file at the end of your html like:

  <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>

<script src="myJavascript.js"></script>

After that it will work just fine. You need to load your page first so your JS knows where to put the chart that is created.

In jquery you can use document.ready function but since you don’t have a jquery tag i will avoid to mention to put a listener for page ready and suggest to just put it in the end for your ease.

Leave a comment