chart js how to fill legend box with colour

Question

I'm using Chart.js for line charts and I have the legend as below.

The problem is that the legend only has an outline color, I want the legend box to have the whole thing colored. I haven't found anything in the documentation to see why mine only has the border. I'm at a bit of a loss, here's an example of my setup:

var LinuxDistributionsCombined = document.getElementById('LinuxDistributionsCombined');
var myChart = new Chart.Line(LinuxDistributionsCombined, {
  type: 'line',
  data: {
    labels: ['Jul-2016', 'Sep-2016', 'Oct-2016', 'Dec-2016', 'Jan-2017', 'Feb-2017', 'Mar-2017', 'Apr-2017', 'May-2017', 'Jun-2017', 'Jul-2017', 'Aug-2017', 'Sep-2017', 'Oct-2017'],
    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],
      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],
      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],
      borderColor: '#6a3d9a',
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: 'Percentage of users'
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          var label = data.datasets[tooltipItem.datasetIndex].label;
          return label + ' ' + value + '%';
        }
      },
    },
  }
});

Answer 1

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
}]
...

Answer 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>