paradizzee paradizzee - 6 months ago 1261
Javascript Question

Chart.js bar chart : Grid color and hide label

I'm trying to change to background color of my grid in chart.js, I've tried following the documentation and I've done a lot of research but I can't seem to figure it out. I also want to get rid of the top label, can't find an easy way to do that either. The label I'm talking about is the label that says "My first dataset" on the demo here: http://www.chartjs.org/docs/#bar-chart

Solution:

<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
datasets: [{
label: "",
data: [12, 19, 3, 5, 2, 3, 4],
backgroundColor: "rgba(3, 118, 195, 0.5)",
borderColor: "rgba(0, 158, 219, 1)",
borderWidth: "2",
}]
},
options: {
legend:{
display: false
},
scales: {
xAxes: [{
gridLines: {
show: true,
color: "F3F3F3",
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},

}
});

</script>


Thanks!

Answer

To hide lable i.e nothing but legend: Use below config in options:

legend:{
       display:false
}

Thus in your code:

options: {
    legend:{
           display:false
    },  
    scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }

And, for background color use css for canvas element:

<canvas id="myChart" style="background-color: grey;">

Hope this will do for you!

Comments