score:7
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++) {
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>
score:2
yes What I did on my end is this.
Step 1 - Grab your chart.
@ViewChild('slideDoughnutChart') slideDoughnutChart: BaseChartDirective;
Step 2 - Declare a const gradient and assign it.
const gradient = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 220);
Step 3 - Push the colors that you wan to see as 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 have pushed the same color.
Step 4 - Set doughnut chart colors variable to colors array.
this.slideDoughnutChartColors = [{ backgroundColor: colors }];
Step 5 - Assign slideDoughnutChartColors variable to colors binding in canvas.
<canvas class="chartjs canvasResponsive" baseChart #slideDoughnutChart="base-chart" [colors]="slideDoughnutChartColors" ></canvas>
If you follow the steps correctly, You will end 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 doing 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;
}
}
will end you up with.
This is my data for the chart.
this.slideDoughnutChartData = [25, 35, 20, 25, 2];
Source: stackoverflow.com
Related Query
- ChartJS Doughnut Charts Gradient Fill
- Chartjs doughnut chart with gradient color
- how to change thickness of two doughnut charts in chartjs
- ChartJS Line Charts - remove color underneath lines
- How to modify bar width in Chartjs 2 bar charts
- ChartJS - Donut charts with multiple rings
- chartjs + Angular6 is not showing charts or any error
- Why are these 2.9 ChartJS bar charts different?
- Chartjs Nested Pie/Doughnut charts
- Chart.js - Multiple Doughnut Charts on same Canvas
- How to create a gradient fill line chart in latest Chart JS version (3.3.2)?
- Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
- Chartjs Doughnut disappears
- Gradient color for each bar in a bar graph using ChartJS
- Chartjs hovering over one Chart, shows tooltip across all charts
- Chartjs - pointColor to follow current color of gradient stroke
- Chartjs extended doughnut with text tooltip issue
- Update charts in chartjs and angular
- How do I make line charts overlay over bar charts in chartjs
- ChartJS charts not generating within tabs
- ChartJs Doughnut parsing datasets
- How to maintain chartjs / ng2-charts gradient on window resize?
- How to add ChartJS code in Html2Pdf to view image
- Chartjs Nested Doughnut Layers With Different Thickness
- Multipe doughnut charts on one page with text in center using Chart.js
- ChartJS different background gradient depending on data (line graph)
- Gradient line chart with ChartJS
- Add Text to Doughnut Chart - ChartJS
- canvas fill text vanishes when hovering over chartjs pie chart
- chartjs plugin datalabels does not show value on charts
More Query from same tag
- Dynamic multiple charts in chart.js with dynamic data inside them
- Chart Js flickering or switching as i move mouse on canvas
- Chartjs v2 stroke shadow
- How to check chart type on Chart.js
- How to set a borderWidth on ChartJS - AngularJS?
- Add multiline labelString to yAxes Chart.js
- My pie chart (chartJs) does not appear
- How to change background color in ng2-charts
- Changing data when click button in chart.js
- How to use segment property to color line / border color based on value in chart js?
- Is it possible to have tick stepSize for each dataset in Chart.js?
- Limit chart.js X axis ticks
- Bold text inside doughnut chart (chart.js)
- Same bar different color / One bar with many colors
- Chartjs - destroy() does nothing
- Charts.js doughnut
- Show date on xAxes without labels
- Get bar value when onClick Reactjs
- Chart.js add icon at the top of bar
- Chart doesn't display fonts
- unable to pass data from views to js file having chart js codes, shows unexpected syntax error
- Chart.js; Chart is not showing time and imported data.
- Chart.js two categorical scales
- How could I implement chartjs-plugin-datalabels in chartjs-node-canvas?
- How to display grouped data in ChartJs
- Chart.js legend style
- Render chartjs and export image to data not in the DOM
- Chart.js with 2 y-axis
- How to make multiple stacked charts to share the same yAxis?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?