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!
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With