The reason is that you define backgroundColor at the wrong place. It's a dataset property, hence needs to be defined inside the dataset.

var distinctFeeEarners = ['MEH', 'IHM'];
var totalHoursByFE = [0.8, 0.7];
var chartdata = {
  labels: distinctFeeEarners,
  datasets: [{
    label: 'Fee Earner',
    data: totalHoursByFE,
    backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)']

var donutChart = new Chart(document.getElementById('hoursFEContainer'), {
  type: 'doughnut',
  data: chartdata
<script src=""></script>
<div id="chartContainer" style="height: 320px; width: 320px">
  <canvas id="hoursFEContainer"></canvas>


Had exactly the same problem with ng2-charts

What did it for me was not pre-initializing dataset. Prevously i would declare empty array

public data: MultiDataSet = [];

then after backend request resolves i would assign new value

const dataset: Array<number> = new Array(); => {
  }); =  [dataset];

This would print doughnut chart but without color. Everything was gray. Simply not preinitializing MultiDataSet like this fixes things

public data: MultiDataSet; //=[];

Related Query

More Query from same tag