Chartjs-Ng2-charts set color for one specific value in dataset

1👍

ng2-charts uses itself Chart.js. The bar chart dataset property backgroundColor can be defined as a string or an array of strings.

Therefore, in your component class, you can define chartColors as follows:

chartColors = [
  {
    backgroundColor: "green"
  },
  {
    backgroundColor: ["red", "red", "red", "blue", "red", "red"]
  }
];

In the HTML template, chartColors needs to be referenced as shown below:

<canvas baseChart  
  ...
  [colors]="chartColors">
</canvas>

Please take a look at this StackBlitz and see how it works.

Leave a comment