Chartjs-Updating Chartjs to 2.5 with custom code

by

0👍

Here is a sample of what you’re looking for…

http://codepen.io/anon/pen/PWgeqx

In my experience you’ll need a div with a height and width defined to wrap the canvas. I believe you get the responsive for free. Code below.

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
        datasets: [
            {
                label: "My First dataset",
                backgroundColor: "rgba(220,220,220,0.5)",
                borderColor: "rgba(220,220,220,0.8)",
                hoverBackgroundColor: "rgba(220,220,220,0.75)",
                hoverBorderColor: "rgba(220,220,220,1)",
                borderWidth: 5,
                data: [65, 59, 80, 81, 56, 55, 40, -30]
            },
            {
                label: "My Second dataset",
                backgroundColor: "rgba(151,187,205,0.5)",
                borderColor: "rgba(151,187,205,0.8)",
                hoverBackgroundColor: "rgba(151,187,205,0.75)",
                hoverBorderColor: "rgba(151,187,205,1)",
                borderWidth: 5,
                data: [28, 48, 40, 19, 86, 27, 90, -42]
            }
        ]
    },
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    beginAtZero: false,
                    min: -50
                }
            }]
        }
    }
});

Here’s a link to the Chart.js documentation. The Bar and Scales sections will be helpful. http://www.chartjs.org/docs/

Leave a comment