javascript - ChartJS Doughnut Charts Gradient Fill -

so tried make gradient fill chartjs doughnut chart, works horizontal , not in circle.

this code i'm using:

   var ctx = document.getelementbyid("chart-area").getcontext("2d");     var gradient1 = ctx.createlineargradient(0, 0, 0, 175);    gradient1.addcolorstop(0.0, '#ace1db');    gradient1.addcolorstop(1.0, '#7fbdb9');      var gradient2 = ctx.createlineargradient(0, 0, 400, 400);    gradient2.addcolorstop(0, '#b5d57b');    gradient2.addcolorstop(1, '#98af6e');     var gradient3 = ctx.createlineargradient(0, 0, 0, 175);    gradient3.addcolorstop(0, '#e36392');    gradient3.addcolorstop(1, '#fe92bd');     var gradient4 = ctx.createlineargradient(0, 0, 0, 175);    gradient4.addcolorstop(1, '#fad35e');    gradient4.addcolorstop(0, '#f4ad4f');     /* add data doughnut chart */    var doughnutdata = [     {       value: 80,       color: gradient1,       highlight: "#e6e6e6",       label: "nutrients"     },     {       value: 20,       color:"#e6f1ee"      },     {       value:50,       color: gradient2,       highlight: "#e6e6e6",       label: "proteine"     },     {       value: 50,       color:"#e6f1ee"     },     {       value: 75,       color: gradient3,       highlight: "#e6e6e6",       label: "fette"     },     {       value:25,       color:"#e6f1ee"     },     {       value: 77,       color: gradient4,       highlight: "#e6e6e6",       label: "carbs"     }     {       value: 23,       color:"#e6f1ee"     },    ]; 

is possible implement gradient on radius, seen on design?

thanks!

chartjs not (properly) use gradient fill colors when drawing linear gradient on non-linear paths donut chart. linear gradient not curve.

possibility #1 -- use radial gradient

you might experiment radial gradient , see if results meets design needs.

possibility #2 -- use gradient stroke (a diy project)

also, canvas's stroke curve around circle.

if want "roll-your-own" gradient donut chart, here's example code , demo uses gradient strokestyle on circular path (see 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;      (var = 0; < radientcolors.length; i++) {      startcolor = radientcolors[i];      endcolor = radientcolors[(i + 1) % radientcolors.length];        // x start / end of next arc draw      var xstart = xc + math.cos(start) * r;      var xend = xc + math.cos(start + partlength) * r;      // y start / end of next arc draw      var ystart = yc + math.sin(start) * r;      var yend = yc + math.sin(start + partlength) * r;        ctx.beginpath();        gradient = ctx.createlineargradient(xstart, ystart, xend, yend);      gradient.addcolorstop(0, startcolor);      gradient.addcolorstop(1.0, endcolor);        ctx.strokestyle = gradient;      ctx.arc(xc, yc, r, start, start + partlength);      ctx.linewidth = 30;      ctx.stroke();      ctx.closepath();        start += partlength;    }  }    var somecolors = [];  somecolors.push('#0f0');  somecolors.push('#0ff');  somecolors.push('#f00');  somecolors.push('#ff0');  somecolors.push('#f0f');    drawmultiradiantcircle(150, 150, 120, somecolors);

body{ background-color: ivory; }  #canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>