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

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?

Reply | Reply with quote

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.

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.

Reply | Reply with quote

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.

Reply | Reply with quote

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144603	May 14,2019 08:38 AM UTC	May 16,2019 10:13 AM UTC	Xamarin.Forms	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US