Chart.js in Angular 10: Specified colors not shown in multi-series bar chart (instead random colors)

Question

I am trying to implement the stacked bar chart (horizontal, responsive).

I am using Chart.js in Angular 10.

It should have following specific colors for the 3 series (shown as labels in legend on top):

green for Both data,
yellow for Only data and
red for No data

Issue

However, I am getting random colors apart from what is being coded in barchartColors.

Actual output

This is as screenshot from the generated chart: bar chart with random colors

TypeScript

public barChartOptions: any = {
  scaleShowVerticalLines: false,
  responsive: true
};

public barChartLabels: string[] = ['Dept1', 'Dept2', 'Dept3', 'Dept4', 'Dept5', 'Dept6'];
public barChartType = 'horizontalBar';
public barChartLegend = true;


public barChartData: any[] = [
  {data: [0, 16,4, 3, 10, 0], label: 'Both data'},
  {data: [0, 5, 0,5, 8, 0], label: 'Only data'},
  {data: [41, 6, 6,0, 48, 12], label: 'No Data'}
];

public barchartColors=[
  {backgroundColor: [
    'rgba(92, 184, 92,1)',  //green
    'rgba(255, 193, 7,1)',  //yellow
    'rgba(217, 83, 79,1)',  //red
  ]}
];

HTML

<div class="card">

  <div class="card-header">
    Data Availability Department Wise
    <div class="card-header-actions">
      <a href="http://www.chartjs.org"><small class="text-muted">View</small></a>
    </div>
  </div>
  
  <div class="card-body">
    <div class="chart-wrapper">      
       <canvas baseChart class="chart" id ="data"
         [datasets]="barChartData"
         [labels]="barChartLabels"
         [options]="barChartOptions"
         [legend]="barChartLegend"
         [colors]="barchartColors"
         [chartType]="barChartType"
       ></canvas>
    </div>
  </div>

</div>

Welcome to Stackoverflow! Your questions was a challenging puzzle to solve. However, for the next question: 👉️ (1) please format your code properly indented, (2) clarify what you expected, (3) do research in the docs and mention by adding links, (4) pay attention to correct ⚠️ technical terms: 💡️ it's not a stacked bar chart, but a multi-series or grouped bar chart. ✔️ Hope I helped with my edit of your question and the answer 😀️ — hc_dev

hc_dev hc_dev · Accepted Answer · 2021-04-23T18:57:27

Visual & Color test-report

The 3 background-colors for the data-series are shown, but in the legend on top along with the labels.

As far as I can see, they appear as coded in barchartColors. See my descriptions and links added to your color-specification comments:

'rgba(92, 184, 92 ,1)', //green: gives other #5cb8ff color description : Light blue

'rgba(255, 193, 7 ,1)', //yellow: gives #ffc107 color description : Vivid yellow

'rgba(217, 83, 79 ,1)', //red: gives #d9534f color description : Soft red

Compare against your given screenshot from the generated chart: bar chart with random colors

However:

in the legend: they are mixed, not assigned correctly to the labels
in the chart, on the bars: they are not assigned correctly to the series

{data: [0, 16,4, 3, 10, 0], label: 'Both data'}, // expected Blue(Green) but was random

{data: [0, 5, 0,5, 8, 0], label: 'Only data'}, // expected Yellow but was random

{data: [41, 6, 6,0, 48, 12], label: 'No Data'} // expected Red but was random

How to colorize Bar Datasets

Research in the Chart.js documentation, Bar chart's dataset properties shows, that colors should be supplied for each dataset:

data.datasets[index] - options for this dataset only

Your datasets are 3 series (in JS or TypeScipt defined as 3 elements of an array). They are defined as array barChartData with 3 elements or JavaScript objects. Each dataset (object) is defined by properties like data, label .. but currently missing a color specification.

So you could define the desired backgroundColor for each dataset like this, in each object (not in a separate array!):

Solution

TypeScript:

public barChartData: any[] = [
  {
    data: [0, 16,4, 3, 10, 0], 
    label: 'Both data',
    backgroundColor: '#5cb8ff' // LightBlue (intended: green)
  },
  {
    data: [0, 5, 0,5, 8, 0],
    label: 'Only data',
    backgroundColor: '#ffc107' // VividYellow (intended: yellow)

  },
  {
    data: [41, 6, 6,0, 48, 12],
    label: 'No Data',
    backgroundColor: '#d9534f' // SoftRed (intended: red)
  }
];

Note:

I used a hexadecimal color notation string (like '#d9534f') as specification format. This was offered by the Chart.js documentation for Colors:

You can specify the color as a string in hexadecimal, RGB, or HSL notations.

The same paragraph also explains why your not-specified (correctly) color for the dataset lead to apparently random colors. They were defined by defaults:

If a color is needed, but not specified, Chart.js will use the global default color.

Then remove the color Angular-binding from your HTML:

       <canvas baseChart class="chart" id ="data"
         [datasets]="barChartData"
         [labels]="barChartLabels"
         [options]="barChartOptions"
         [legend]="barChartLegend"

         [chartType]="barChartType"
       ></canvas>

Demo

I used Chart.js version 3.1.1 in plain JavaScript to test it. It worked and showed the specified colors:

Goodie: Even managed to add plugins that will change the tool-tip appearance (background-color, label's text-color).

Try the live-demo in this fiddle.