Chart.js donut chart remains grey - no color

Question

I have a donut chart being created by chart.js as follows:

        <div id="chartContainer" style="height: 320px; width: 320px">
            <canvas id="hoursFEContainer"></canvas>
        </div>

I require chart.js as follows (downloaded from npm):-

require('chart.js');    

Then in a relevant function I instantiated Chart.js as follows:-

var distinctFeeEarners = ['MEH', 'IHM'];
var totalHoursByFE = [0.8, 0.7];
        var chartdata = {
                        labels: distinctFeeEarners,
                        datasets : [
                            {
                                label: 'Fee Earner',
                                data: totalHoursByFE
                            }
                        ]
                    };

                    var ctx = $("#hoursFEContainer");

                    var donutChart = new Chart(ctx, {
                        type: 'doughnut',
                        backgroundColor:
                        ['rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)'],                     
                        data: chartdata
                    });

The chart displays with the correct data, but the donut does not have any colours?

Whats wrong?

EDIT: Beyond stupid, backgroundColor needs to be in datasets not in new Chart. Nevermind.

Goodill

Answer 1

Set the forceOverride option to true in the Chart options like this. (If you're using React)

<Doughnut
    data={data}
    options={{
      plugins: {
        colors: {
          forceOverride: true,
        },
        legend: {
          position: "right",
        },
      },
    }}
  />

Muster

Answer 2

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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div id="chartContainer" style="height: 320px; width: 320px">
  <canvas id="hoursFEContainer"></canvas>
</div>

Erigena

I don't think that is the problem. I have charts without any background and I have the same problem. Worst than that happens and fix it self on page refresh. – Qoph

Answer 3

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();
response.items.map(result => {
    dataset.push(result);
  });
this.data =  [dataset];

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

public data: MultiDataSet; //=[];

Savitt