Chart.js bar chart : Grid color and hide label

Question

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!

Krishnakant Krishnakant · Accepted Answer · 2016-05-13T09:03:55

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!

Chart.js bar chart : Grid color and hide label

1 Answers