Draw gradient line in line chart

[luhui]

I want to draw a gradient line chart like the picture below:

It is a human temperature record. The gradient value follow the temperature, the color guide is the picture below:

In MPAndroidChart, below code will be work:

Paint paint = mChart.getRenderer().getPaintRender();
        paint.setShader(new LinearGradient(0, 0, 0, height, Color.RED, Color.BLUE, Shader.TileMode.REPEAT));

Did iOS-charts support these feature?

[liuxuan30]

Currently, no. But it will be a good feature to have.

[ondrejhanslik]

In my opinion, ios charts need a more stable internal API and then removal of the internal keyword from most renderer methods. Then it will be simple to override a line drawing method with custom implementation. A chart library can never cover all use cases but it should be customizable.

[danielgindi]

We need to look into CoreGraphics and see if there's something similar to that shader effect

The problem with it though (on Android also!) is that it does not correlate to the colors that you have specified on your yAxis. It advances with the line, but not specifically on the yAxis.

I'm guessing that on both platforms it should be much more complex, as we'll need to break this stuff down ourselves and interpolate the colors.

Anyway, all the stuff in the renderers is public since v2.2.0!

[ondrejhanslik]

Thanks for the info, I am still on v2.1.x and didn't notice this. Good job! Then I believe this issue could be closed. On iOS everything is drawn through CGContext and for drawing gradients there is a special function CGContextDrawLinearGradient. Overriding the line drawing method is probably the only solution.

[liuxuan30]

@danielgindi Do we support such gradient line already? I took some days off, not sure if we can close this.

[mobidever]

Hey do we have any update on the integration of the gradient lines?

[owenhay]

I'm interested in this issue, and I'm doing a chart UI implementation this week with a gradient, and I'll try the CGContextDrawLinearGradient override approach and report back.

[rohinb]

Any update on this? I'm working on a design with line charts using a gradient where the lines simply fades away toward the end.

[liuxuan30]

@rohinb do you see the PR above? It's not merged yet. But you could give a try, overriding some methods

[coolioxlr]

any update on this?

[hananRiazz]

any update on this issue?

[thierryH91200]

see #649

[jjatie]

#3141

[getabhishekified]

I have created a video tutorial for this task. Kindly refer to my video.

https://www.youtube.com/watch?v=zT6zMyYpkXM&t=13s

[Maxim-Gorin]

any update on this?

[liuxuan30]

this is implemented in 4.0 branch, we are working on 4.0 merge actively, so stay tuned.

[a1049145827]

Is it finished now？

[YutaLin]

Hi @liuxuan30, In previous version api I can set gradient color, but can't use it now. I got error when I fetch branch 4.0.0 currently.

Here's how I did, please help me, I implement in production app and can't work after I try pod install now, thanks!

pod 'Charts', :git => 'https://github.com/danielgindi/Charts.git', :branch => '4.0.0'

[DhavalUmraliya]

Hi @liuxuan30, In previous version api I can set gradient color, but can't use it now. I got error when I fetch branch 4.0.0 currently.

Here's how I did, please help me, I implement in production app and can't work after I try pod install now, thanks!

pod 'Charts', :git => 'https://github.com/danielgindi/Charts.git', :branch => '4.0.0'

have you found any solution?