Chart with custom gradient color model - Conflicting gradient iOS vs. Android

[Ondrej Slimak]

Hello,

I am displaying SfChart with custom gradient model, and I have noticed the chart colors on iOS are different than on Android.

Android ​(physical device):

iOS ​(iPhone simulator):

The charts on Android and iOS have identical color model and a use ​AreaSeries​ to display the area gradient and FastLineSeries​ to display the line with different colors. The AreaSeries has correct colors on both platforms; however, the FastLineSeries has opposite gradient on iOS and does not have a sharp color change when crossing the dashed axis.

Question: Is this a bug ​or do I need to adjust my color model based on a platform?

Sidenote: Using two series to achieve this chart look feels sub-optimal. I did not find a better solution so I display the same data twice; once as the Line, once as the Area. Tips to achieve this look with a single series is also appreciated.

[Yuvaraj Palanisamy]

Hi Ondrej Slimak, 

 

We have analyzed your query “Gradient color rendered different for Android and iOS”and we have prepared the sample for this and it was working fine at our end. Please find the code example below. 

 

CodeSnippet: 

<chart:FastLineSeries ItemsSource="{Binding Data}" 

                      StrokeWidth="2" 

                      XBindingPath="XValue"  

                      YBindingPath="YValue" > 

    <chart:FastLineSeries.ColorModel> 

        <chart:ChartColorModel Palette="Custom"> 

            <chart:ChartColorModel.CustomGradientColors> 

                <chart:ChartGradientColor StartPoint="0.5,1" EndPoint="0.5,0"> 

                    <chart:ChartGradientColor.GradientStops> 

                        <chart:ChartGradientStop Color="Red" Offset= "0"/> 

                        <chart:ChartGradientStop Color="Green" Offset= "1"/> 

                    </chart:ChartGradientColor.GradientStops> 

                </chart:ChartGradientColor> 

            </chart:ChartColorModel.CustomGradientColors> 

        </chart:ChartColorModel> 

    </chart:FastLineSeries.ColorModel> 

</chart:FastLineSeries> 

  

Also, we have attached the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/173086/ze/GradientChart1740259295  

  

Output: 

 

Android	iOS

 

If still you are facing the problem, please share the more details with code example or if possible, revert us the modified sample with issue reproduced state which will be helpful to serve you better solution at the earliest. 

  

Regards, 

Yuvaraj.