Add gradient to bar chart and pie chart

[MobileMon]

Instead of a solid color, can I use a gradient to fill in the pie chart segments and bar chart segments?

[xi1570-krupeshanadkat]

Yes, I want to add gradient in bar graph rods. please add this feature.

[imaNNeo]

What kind of gradient do you need in the PieChart?
@MobileMon

[bdairy]

to use gradient colors like this

[imaNNeo]

It has just been added in 0.12.0 version.

Check out this sample

The pie chart gradient is yet to come!

[Nirsu]

Hello guys,
I didn't want to open a new issue, since this one was still open.
I would like to know if there was any information about the gradient for pie charts, because I would like to make a gradient like that:

[asaboor-art]

i want this type of gradient color design in Doughnut Chart.. can someone help me?

[asaboor-art]

<script> const settings = { canvasId : 'canvas', fillAmount : 85, baseAmount : 100, fillColor : '#64c832', baseColor : '#EBF5FB', lineWidth : 20, } const state = { curAmount: 0, curDegrees: 0 } const canvas = document.getElementById(settings.canvasId) canvas.halfWidth = canvas.width / 2 canvas.halfHeight = canvas.height / 2 const ctx = canvas.getContext('2d') animate() function animate () { update() draw() if (state.curAmount < settings.fillAmount) { requestAnimationFrame(animate) } } function update () { state.curAmount += 1 state.curDegrees = (state.curAmount / settings.baseAmount) * 360 } function draw () { ctx.clearRect(0, 0, canvas.width, canvas.height) drawArc(0, 360, settings.baseColor) drawArc(-90, (state.curDegrees - 90), settings.fillColor) drawText(state.curAmount) } function drawArc (startDegrees, endDegrees, lineColor) { ctx.lineWidth = settings.lineWidth ctx.strokeStyle = lineColor ctx.beginPath() ctx.arc( canvas.halfWidth, canvas.halfHeight, canvas.halfWidth - (settings.lineWidth / 2), degreesToRadians(startDegrees), degreesToRadians(endDegrees) ) ctx.stroke() } function drawText (text) { ctx.fillStyle = settings.fillColor ctx.font = 'bold ' + settings.fontSize + ' ' + settings.fontFace ctx.textAlign = 'center' ctx.fillText( text, canvas.halfWidth, canvas.halfHeight + (parseInt(settings.fontSize) / 3) ) } function degreesToRadians (degrees) { return degrees * Math.PI / 180 } document.getElementById('replay').addEventListener('click', function() { state.curAmount = 0 state.curDegrees = 0 animate() }) </script>

<div id="canvas-wrap">
            <canvas id="canvas" width="300" height="300"></canvas>
            <div class="donut-result">
               <p><span>9,8969</span> Estimated Overtime Owed</p>
             </div>
          </div>
          
          #canvas-wrap {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}

[raldhafiri]

I have created pull request
#1511

it will add support for piechart gradients

[imaNNeo]

PieChart gradient is added in 0.66.0.
Thanks, @raldhafiri for contributing 🚀

[imaNNeo]

It has just been added in 0.12.0 version.

Check out this sample

The pie chart gradient is yet to come!

I think now we're done with this issue ;)