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. Image for the cookie policy date

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

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?

3 Replies

BK Bharathiraja K Syncfusion Team 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.  



TN Teodor Nikolaev 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.



BK Bharathiraja K Syncfusion Team 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. 


Loader.
Up arrow icon