[Chartjs]-Chart js how to fill legend box with colour

by

25👍

✅

You have to set the backgroundColor property for each of your datasets as well, as that is correspondent to legend box­‘s fill color.

...
datasets: [{
   label: 'Ubuntu-based',
   fill: true,
   data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
   backgroundColor: '#a6cee3',
   borderColor: '#a6cee3',
   borderWidth: 1
}, {
   label: 'Arch-based',
   fill: true,
   data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
   backgroundColor: '#1f78b4',
   borderColor: '#1f78b4',
   borderWidth: 1
}, {
   label: 'Solus',
   fill: true,
   data: [0, 0, 0, 0, 0.42, 0.45, 0.61, 0.64, 0.92, 1.12, 1.08, 1.21, 1.23, 1.46],
   backgroundColor: '#6a3d9a',
   borderColor: '#6a3d9a',
   borderWidth: 1
}]
...

2👍

var ct = document.getElementById('myChart').getContext('2d');
var Chart = new Chart(ct, {
    type: 'line',
    data: {
        datasets: [{
            label: 'test',
            data:[1,10],
            backgroundColor: "rgb(0, 0, 0, 0)",
            borderColor: "rgb(0, 0, 255)",
            pointBackgroundColor: "rgb(0, 0, 255)",
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            },
            yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'test'
            }
        }]
        }
    },
    plugins: [{

      beforeDraw: function(c) {
      var legends = c.legend.legendItems;
        legends.forEach(function(e) {
           e.fillStyle = 'red';
        });
      }

    }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="300"></canvas>

Leave a comment