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>
Source:stackexchange.com