We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144603 May 14,2019 08:38 AM UTC May 16,2019 10:13 AM UTC Xamarin.Forms 3
loading
Tags: SfChart
Teodor Nikolaev
Asked On May 14, 2019 08:38 AM UTC

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 [Syncfusion]
Replied On May 15, 2019 09:33 AM UTC

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.  
 
 
 
Regards, 
Bharathi.  


Teodor Nikolaev
Replied On May 15, 2019 10:34 AM UTC

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 [Syncfusion]
Replied On May 16, 2019 10:13 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon