Chart js doesn't show chart

Question

i try to display only the example from chart js in a project i work on. Unfortunately i'm forced to use Chart Js 1.x. I tried to implement the bar example from https://github.com/chartjs/Chart.js/blob/master/samples/bar/bar.html It's a pretty easy example i guess but it isn't running :(

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="zeitsteuerungChart"></canvas>

var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            borderWidth: 1,
            data: [
                "1","1","1","1","1","1","1"
            ]
        }, {
            label: 'Dataset 2',
            borderWidth: 1,
            data: [
                "1","1","1","1","1","1","1"
            ]
        }]
    };
    window.onload = function() {
        var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
        var myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData
        });
    };

The Chart JS manipulate the

<canvas id="zeitsteuerungChart"></canvas>

element to

<canvas id="zeitsteuerungChart" width="300" height="150" style="width: 300px; height: 150px;"></canvas>

but thats pretty much it. No diagram shows up. No error in Console. I tried to use jQuery as well to select the canvas with

var ctx = $("#zeitsteuerungChart").get(0).getContext("2d");

but same effect! On other subpages of the project it's working pretty fine!

General Grievance · Accepted Answer · 2025-03-28 13:05:51Z

3

You are using chart js v2 syntax on v1.

for v1

var barChartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: 'Dataset 1',
    borderWidth: 1,
    data: ["1","1","1","1","1","1","1"]
  },
  {
    label: 'Dataset 2',
    borderWidth: 1,
    data: ["1","1","1","1","1","1","1"]
  }]
};

window.onload = function() {
  var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
  // Pass 'options' as needed here:
  var myBar = new Chart(ctx).Bar(barChartData, options);
};

you can view chart options (chart js v1) here or complete options here

edited Mar 28 at 13:05

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Nov 17, 2016 at 9:15

Sam Ch

2102 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Chart js doesn't show chart

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related