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

by

1👍

✅

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

0👍

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>

Leave a comment