Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 869
paradizzee Avatar asked May 12 '16 22:05

paradizzee


1 Answers

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!

like image 96
Krishnakant Avatar answered Oct 05 '22 23:10

Krishnakant