score: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


Related Query

More Query from same tag