1👍
This can be done by defining scale.gridLines.color
option as an array of colors.
options: {
scale: {
gridLines: {
color: [...]
}
}
}
Please take a look at the below runnable code and see how it works.
window.myChart = new Chart('canvas', {
type: 'polarArea',
data: {
datasets: [{
label: 'My Dataset',
data: [4, 5, 4, 2, 6],
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)']
}]
},
options: {
scale: {
gridLines: {
color: ['black', 'orange', 'yellow', 'green', 'blue']
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
1👍
This isn’t specifically an angular solution, but this video was very helpful if you’re looking to highlight only specific rings on the scale and I thought I’d share it for others with this same question: https://www.youtube.com/watch?v=hPGuSNdwOC4
I adapted it a bit to put lines at 100 and 110 on my chart (which represent 100% and 110% of budget) without knowing the number of ticks ahead of time as the video’s solution does. The ticks could change depending on the values of the charted numbers, chart size, etc. I use the r.ticks collection to get the number of ticks to properly calculate the circle radius.
const budgetLines = {
id: "budgetLines",
afterDatasetsDraw(chart, args, options) {
var budgetTickCount = 0;
var overBudgetTickCount = 0;
const { ctx, chartArea: { top, bottom, left, right, width, height }, scales: { r } } = chart;
const angle = Math.PI / 180;
const trueHeight = r.yCenter - r.top;
r.ticks.forEach(function (tick) {
if (tick.value < options.budgetValue) {
budgetTickCount = budgetTickCount + 1;
}
if (tick.value < options.budgetValue) {
overBudgetTickCount = overBudgetTickCount + 1;
}
});
const budgetRadius = ((trueHeight / r.end) * options.budgetValue) - (budgetTickCount + 1);
const overBudgetRadius = ((trueHeight / r.end) * options.overBudgetValue) - (overBudgetTickCount + 1);
ctx.save();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = options.budgetColor;
ctx.arc(r.xCenter, r.yCenter, budgetRadius, angle * 0, angle * 360, false);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = options.overBudgetColor;
ctx.arc(r.xCenter, r.yCenter, overBudgetRadius, angle * 0, angle * 360, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
var ctx = document.getElementById("summaryChart");
new Chart(ctx, {
type: "polarArea",
data: chartData,
options: {
plugins: {
budgetLines: {
budgetValue: 100,
overBudgetValue: 110,
budgetColor: "rgba(0, 255, 0, 1)",
overBudgetColor: "rgba(0, 0, 255, 1)"
},
legend: {
display: false
}
},
scales: {
r: {
suggestedMax: 100
}
}
},
plugins: [budgetLines]
});