CODEWITHSUNDEEP
angularjschart.js
VBMali
VBMali

Reputation: 1380

How we can set our own colors for each label in charts

I am using angularjs charts. The colors are coming in sequence, but I want to define color for each label as my own choice, because color meaniing matters for user.

For Example: I want colors as:

Sample data, I am using:

$scope.labels = ["Completed", "In Progress", "Not started"];
$scope.data = [300, 500, 100];

Simple Display Chart:

 <canvas  id="pie" class="chart chart-pie" data="data" labels="labels" legend="true"
                      click="onClick" hover="onHover" series="series"></canvas>

Note: All is fine with the current Chart display, Only I want to implement Color choice manually.

Upvotes: 1

Views: 624

Answers (2)

VBMali
VBMali

Reputation: 1380

This solves my problem:

$scope.labels = ["Completed", "In Progress", "Not started"];
$scope.data = [300, 500, 100];
$scope.lbl_colors = ['#33CC33', '#FFFF66', '#FF3300'];

HTML:

<canvas  id="pie" class="chart chart-pie" data="data" labels="labels" legend="true"
  click="onClick" hover="onHover" series="series" colours="lbl_colors" ></canvas>

Upvotes: 0

Alexander B
Alexander B

Reputation: 1033

You can supply an array of objects with attributes strokeColor for regular color and pointHighlightStroke for mouseover color to the colours s attribute of canvas.

$scope.colours = [
    {strokeColor : "#FF00FF", pointHighlightStroke : "#FF00AA"},
    {strokeColor : "#00FFFF", pointHighlightStroke : "#00FFAA"},
    {strokeColor : "#FFFF00", pointHighlightStroke : "#FFAA00"}
];

An your HTML

<canvas  id="pie" class="chart chart-pie" data="data" labels="labels" legend="true" colours="colours"></canvas>

Now your pie slices and legend are displayed in the colors that you've chosen. For Tooltip colors you should check Custom Tooltip documentation of Chart.js

Upvotes: 1

Related Questions