Making a line chart become a certain color below a certain value

[Teodor Nikolaev]

Hello,

I was wondering if it is possible to make a linechart be multiple colors at the same time, for example the part of the line that is above 0 should be green but the part below 0 should be red?

[Bharathiraja K]

Hi Teodor, 

 

Greetings from Syncfusion. We can add the multiple color to the line series in two method. 

 

1. Using Custom color collection.  

 

Colormodel property of ChartSeries class is used to define the color for each data point. And the CustomBrush property is used to define the colors based on our own color collection.  

 

[XAML]: 

   <chart:LineSeries ItemsSource="{Binding LineSeriesData}" XBindingPath="Date" YBindingPath="Value"> 

                <chart:LineSeries.ColorModel> 

                    <chart:ChartColorModel CustomBrushes="{Binding ColorCollection}" Palette="Custom"> 

                    </chart:ChartColorModel>      

                </chart:LineSeries.ColorModel> 

            </chart:LineSeries> 

 

[C#]: 

foreach(var v in LineSeriesData) 

            { 

                if (v.Value > 0) 

 

                    ColorCollection.Add(Color.Green); 

 

                else 

 

                    ColorCollection.Add(Color.Red); 

            } 

 

 

2. Using Gradient color. 

We can set the gradient color by using the CustomGradientColors property of ChartColorModel by below. 

         <chart:SfChart.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:SfChart.ColorModel> 

 

We have prepared the sample based on your requirement, that can be downloaded from below link.  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleSample498676919.zip  

 

UG link: https://help.syncfusion.com/xamarin/sfchart/appearance#gradient-colors  

 

Regards, 

Bharathi.  

[Teodor Nikolaev]

Thank for the reply but i am looking for is the moment the line connecting the data points crosses the 0 axis it changes color deppending on which side it is.

[Bharathiraja K]

Hi Teodor,  

 

Query: I am looking for is the moment the line connecting the data points crosses the 0 axis it changes color depending on which side it is. 

 

Currently it is not possible with the line chart. Because the line will be draw always point to point. If you would like to change line color for positive and negative, then you should change your date points collection based on your requirement when you are loading data to chart. 

 

Regards, 

Bharathi.