[Chartjs]-How to change background in chartjs and remove background lines?

12πŸ‘

βœ…

change background color

use css to set background color for canvas (chart) element :

canvas {
   background-color: rgba(47, 152, 208, 0.1);
}

remove grid-lines

set display property of gridLines to false for both x and y axis :

scales: {
   xAxes: [{
      gridLines: {
         display: false
      }
   }],
   yAxes: [{
      gridLines: {
         display: false
      }
   }]
}

change text of tooltipΒ­β€˜s label (add $ symbol)

use a callback function for tooltips label, as such :

tooltips: {
   callbacks: {
      label: function(t, d) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = d.datasets[t.datasetIndex].data[t.index];
         return xLabel + ': $' + yLabel;
      }
   }
}

see a working example.

Leave a comment