Change color of part of a segment in a line chart

Question

I want to change the color of just part of a segment in a line chart.

Basically, if the line goes below zero I want it to be red, above zero, I want it green, like in the attached image.

line chart.png

I cannot use the color mapper because that makes the whole segment the given color, so it would be green or red from the previous value, regardless of whether it was positive or negative.

Is this currently possible? If not, is it something that can be implemented?

Thanks.

Yuvaraj Gajaraj · Answer

Hi Eduardo, 
 
Greetings from Syncfusion. You requirement can be achieved using the onCreateShader callback in the series. Here you can apply color to the series based on the stop color in the gradient. We have created the sample and attached below for your reference. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/172564/ze/f172564-1935750553 
  
To know more on this call back, find the user guide below, 
https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncreateshader 
 
We hope this will help you to achieve your requirement. 
 
Regards, 
Yuvaraj.

Eduardo Urias · Answer

Hi, thanks for the answer.While this is close, is not exactly what I'm looking for, because the gradient stops are defined as a percentage of the plot area, which is not fixed, the zero value could be on any point in the chart, see the image below where the color change starts just below $200.

Yuvaraj Gajaraj · Answer

Hi Eduardo, 
 
We have analyzed your query and we would like to let you know that you can customize the color of the line segment either by setting the stop property of that gradient color or using point color mapper. If you wish to set the color for negative, you need to customize the stop color based on the zero value in the axis in your application. 
 
Regards, 
Yuvaraj.