[Chartjs]-Angular: How to change color of chartjs?

by

2👍

✅

The colors etc can be set inside the dataset, along with the data… like: public barChartData: ChartDataSets[] = [{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', backgroundColor: 'lightgreen', hoverBorderColor: 'green', borderColor: '#000'}, {...} }

relevant TS with styling is:

 public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [pluginDataLabels];

  public barChartData: ChartDataSets[] = [
    {
      data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'
      , backgroundColor: 'lightgreen', hoverBorderColor: 'green', borderColor: '#000'
    },
    {
      data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'
      , backgroundColor: 'lightblue', hoverBorderColor: 'blue', borderColor: '#000'
    }
  ];

relevant HTML is:

<div style="display: block">
  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

you can check a working demo here

Leave a comment