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

by

0👍

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:

enter image description here

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.

Further Readings

Leave a comment