Codes316 Codes316 - 6 months ago 20
HTML Question

Last value not showing in bar graph of charts.js-library

I created a bar graph, but I only see 5 values from the 6 labels that I created. Even on the charts.js website, the bar graph example they used only shows 6 values out of the 7 created labels.

My code

'use strict'

$(function () {
var data = {
labels: ["HTML", "CSS", "JavaScript", "Java", "Wordpress", "Boostrap"],
datasets: [
{
label: "My Skill Set",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [100, 90, 80, 82, 85, 88],
}
]
};
var options = {};
var ctx = document.getElementById("myChart").getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
});

Answer

I found this from the reference you provided..

ar myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3]
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

try that out.