ChartJS Donut Charts Gradient Fill

Question

So, I tried to make a gradient fill for the ChartJS donut chart, but this only works horizontally, not in a circle.

This is the 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 TO THE 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 it possible to implement a gradient along the radius, as can be seen in this diagram?

Thanks!

Answer 1

ChartJS will not (correctly) use gradient fill colors when drawing a linear gradient on non-linear paths such as your donut chart. Linear gradient is not a curve.

Option # 1 - use radial gradient

You can experiment with a radial gradient and see if the results match your designs.

Opportunity # 2 - use a gradient bar (DIY project)

In addition, the canvas will revolve around a circle.

If you want to “cast your own” gradient gradient chart, here is a code example and a demo that uses the strokeStyle gradient in a circular path (see my previous answer here: Gradient angle 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++) { startColor = radientColors[i]; endColor = radientColors[(i + 1) % radientColors.length]; // x start / end of the next arc to draw var xStart = xc + Math.cos(start) * r; var xEnd = xc + Math.cos(start + partLength) * r; // y start / end of the next arc to 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> 

Answer 2

Yes, what I did at my end is this.

Step 1 - Take Your Schedule.

  @ViewChild('slideDoughnutChart') slideDoughnutChart: BaseChartDirective; 

Step 2 - Declare a constant gradient and assign it.

 const gradient = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 220); 

Step 3 - Click the colors you want to see as a gradient.

 const colors = []; for (let i = 0; i < 4; i++) { gradient.addColorStop(0, 'rgb(37, 77, 180)'); gradient.addColorStop(1, 'rgb(123, 98, 221)'); colors.push(gradient); } 

Here I clicked the same color.

Step 4 - Set the color variable of the pie chart to an array of colors.

 this.slideDoughnutChartColors = [{ backgroundColor: colors }]; 

Step 5 - Assign the variable slideDoughnutChartColors to snap the colors on the canvas.

 <canvas class="chartjs canvasResponsive" baseChart #slideDoughnutChart="base-chart" [colors]="slideDoughnutChartColors" ></canvas> 

If you follow the steps correctly, you are done with this.

For 4 different colors you need to create 4 different variables. For example, something like this.

 const gradientOne = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400); const gradientTwo = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 100, 400); const gradientThree = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400); const gradientFour = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400); 

then do something like this.

  for (let i = 0; i < this.slideDoughnutChartData.length; i++) { switch (i) { case 0: gradientOne.addColorStop(0, 'rgb(223, 43, 100)'); gradientOne.addColorStop(1, 'rgb(224, 105, 84)'); colors.push(gradientOne); break; case 1: gradientTwo.addColorStop(0, 'rgb(248, 188, 80)'); gradientTwo.addColorStop(1, 'rgb(243, 217, 53)'); colors.push(gradientTwo); break; case 2: gradientThree.addColorStop(0, 'rgb(147, 229, 151)'); gradientThree.addColorStop(1, 'rgb(3, 220, 179)'); colors.push(gradientThree); break; case 3: gradientFour.addColorStop(0, 'rgb(123, 98, 221)'); gradientFour.addColorStop(1, 'rgb(37, 77, 180)'); colors.push(gradientFour); break; } } 

do away with you.

This is my chart data.

 this.slideDoughnutChartData = [25, 35, 20, 25, 2];