ChartJS Doughnut Charts Gradient Fill
Answer : ChartJS will not (properly) use gradient fill colors when drawing a linear gradient on non-linear paths like your donut chart. A linear gradient does not curve. Possibility #1 -- use a radial gradient You might experiment with a radial gradient and see if the results meets your design needs. Possibility #2 -- use a gradient stroke (a DIY project) Also, canvas's stroke will curve around a circle. If you want to "roll-your-own" gradient donut chart, here's example code and a Demo that uses a gradient strokeStyle on a circular path (see my previous answer here: Angle gradient in canvas): var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); function drawMultiRadiantCircle(xc, yc, r, radientColors) { var partLength = (2 * Math.PI) / radientColors.length; var start = 0; var gradient = null; var startColor = null, endColor = null; for (var i = 0; i < radientColors.length; i++) { ...