CODEWITHSUNDEEP
angularjschartscolorschart.jsangular-chart
Yulian
Yulian

Reputation: 6759

How to assign specific colors to data items in a doughnut chart in Angular Chart?

I'm using Angular Chart and I have a doughnut chart. I want to have specific colors for my data.

For example:

$scope.labels = ["Oranges", "Bananas", "Avocados"];
$scope.data = [300, 500, 100];
$scope.colors = [
    "#ff9900", // oranges are orange :)
    "ffff00",  // bananas are yellow 
    "1E824C"]; // avocados are green

Now, I can only change the global colors, but this doesn't guarantee me that the oranges are going to be orange, the bananas yellow and the avocados green. Moreover, I have more than one doughnut chart where the same series are used and they have to be with the same colors - e.g. the bananas are always yellow.

How can I achieve this?

Upvotes: 0

Views: 2166

Answers (1)

Amit Singh
Amit Singh

Reputation: 2275

Have you tried:

<canvas id="doughnut" class="chart chart-doughnut"
  chart-data="data" chart-labels="labels" chart-colours="colors">
</canvas>

You are also missing # in color codes:

So this should be :

$scope.colors = [
    "#1E824C", // oranges are orange :)
    "#1E824C",  // bananas are yellow 
    "#1E824C"];

Upvotes: 1

Related Questions