NgChartjs Bar chart bars color not working in Angular

Question

Hey guys I am having a problem with ng-chartjs. I am trying to give specific color to each bar but they all take the same color and the color is not at all the color that i am trying to give when i try to give only one color.

I am using ng-chartjs .

I am doing the same logic in a doughnut chart but is working.

Actual Bar chart

How I want the colors

Desired Bar chart

Bar char html code

    <div>
      <div>
        <canvas
          ngChartjs
          [datasets]="lineChartData"
          [labels]="lineChartLabels"
          [options]="lineChartOptions"
          [legend]="true"
          [chartType]="chartType"
        ></canvas>
      </div>
    </div>

Ts Bar chart code

  chartType = 'bar';
 
  lineChartData: Array<any> = [
    {
      label: 'Student',
      fill: false,
      lineTension: 0.1,
      backgroundColor: [
        'rgb(255, 35, 35)',
        'rgb(255,114,114)',
        'rgb(249,181,107)',
        'rgb(238,215,107)',
        'rgb(255,217,65)',
        'rgb(0,187,149)',
        'rgb(0,228,189)',
        'rgb(107,238,212)',
      ],
    
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
    
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
     
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [12, 12, 10, 22, 15, 20, 25, 30],
      barPercentage: 0.11,
    },
  ];
 
  lineChartLabels: Array<any> = [
    '0 pike',
    '15 pike',
    '30 pike',
    '45 pike',
    '60 pike',
    '75 pike',
    '90 pike',
    '100 pike',
  ];

  
  lineChartOptions: any = {
    responsive: true,
    
    chartArea: {
      backgroundColor: 'white',
    },
    title: {
      display: true,
      
      position: 'top',
    },
    legend: {
      
      display: false,
    },
    layout: {
      padding: 50,
    },
    scales: {
      yAxes: [
        {
          gridLines: {
            borderDash: [10],
            color: 'rgb(23,6,100)',
            drawBorder: false,
          },
          ticks: {
           
            beginAtZero: true,
            stepSize: 10,
          },
        },
      ],
      xAxes: [
        {
          gridLines: {
           
            display: false,
            drawBorder: false,
          },
        },
      ],
    },
  };

Answer 1

You can use the directive's [color] the set your colors like shown in the following.

Add this to your bar-chart.ts :

colors: Array<any> = [
    'rgb(255, 35, 35)',
    'rgb(255,114,114)',
    'rgb(249,181,107)',
    'rgb(238,215,107)',
    'rgb(255,217,65)',
    'rgb(0,187,149)',
    'rgb(0,228,189)',
    'rgb(107,238,212)'
]

and modify your bar-chart.html like this:

<div>
  <div>
    <canvas
      ngChartjs
      [datasets]="lineChartData"
      [labels]="lineChartLabels"
      [options]="lineChartOptions"
      [colors]="[{ backgroundColor: colors, hoverBackgroundColor: colors }]"
      [legend]="true"
      [chartType]="chartType"
    ></canvas>
  </div>
</div>

You can both set a backgroundColor 's and hoverBackgroundColor 's.

Here is a running stackblitz resulting in this view:

Good luck!