Graduation scale using split line

5 Replies
2 Participants
Marked answer

Created by
DE Deus

Platform
Xamarin.Forms

Platform
Xamarin.Forms

Control
SfChart

Created On
Oct 17, 2020 05:42 PM UTC

Last Activity On
Oct 22, 2020 06:11 AM UTC

Want to subscribe?
SIGN IN

Hi,

How can i do this color graduation scale?

Screenshot:
https://drive.google.com/file/d/1vxSgu9TWGKpYwnpD0rrMmsQixIB6yURN/view?usp=sharing

5 Replies 1 reply marked as answer

YP Yuvaraj Palanisamy Syncfusion Team October 19, 2020 09:56 AM UTC

Hi Deus,

Greetings from Syncfusion.

We have analyzed your query and we have achieved your requirement “Graduation scale color by split line” by using LineSeries GradientColor support in SfChart. Please find the following code snippet for your reference.

<syncfusion:LineSeries x:Name="gradientSeries" StrokeWidth="20" >

<syncfusion:LineSeries.ColorModel>

<syncfusion:ChartColorModel Palette="Custom">

<syncfusion:ChartColorModel.CustomGradientColors>

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

<syncfusion:ChartGradientColor.GradientStops>

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

<syncfusion:ChartGradientStop Color="Red" Offset= "1"/>

</syncfusion:ChartGradientColor.GradientStops>

</syncfusion:ChartGradientColor>

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

<syncfusion:ChartGradientColor.GradientStops>

<syncfusion:ChartGradientStop Color="Green" Offset= "0"/>

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

</syncfusion:ChartGradientColor.GradientStops>

</syncfusion:ChartGradientColor>

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

<syncfusion:ChartGradientColor.GradientStops>

<syncfusion:ChartGradientStop Color="Blue" Offset= "0"/>

<syncfusion:ChartGradientStop Color="Blue" Offset= "1"/>

</syncfusion:ChartGradientColor.GradientStops>

</syncfusion:ChartGradientColor>

</syncfusion:ChartColorModel.CustomGradientColors>

</syncfusion:ChartColorModel>

</syncfusion:LineSeries.ColorModel>

</syncfusion:LineSeries>

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

Sample: https://www.syncfusion.com/downloads/support/forum/158818/ze/ChartSample926726297

Output:

Please let us know if you need any concern.

Regards,

Yuvaraj

DE Deus October 19, 2020 08:08 PM UTC

Thank you very much

But I use for the primary axis - DateTimeAxis and it didn't work. DateTimeAxis is taken from a specified period.

Screenshot

My code:

<chart:SfChart x:Name="TDSChart"

VerticalOptions="FillAndExpand"

BackgroundColor="Transparent"

Margin="0,5">

<chart:SfChart.ColorModel>

<chart:ChartColorModel Palette="Custom" CustomBrushes="{StaticResource Colors}"/>

</chart:SfChart.ColorModel>

<chart:SfChart.PrimaryAxis>

<chart:DateTimeAxis RangePadding="Additional"

IntervalType="Days"

ShowMajorGridLines="True" >

<chart:DateTimeAxis.AxisLineStyle>

<chart:ChartLineStyle StrokeColor="DarkCyan"/>

</chart:DateTimeAxis.AxisLineStyle>

<chart:DateTimeAxis.LabelStyle>

<chart:ChartAxisLabelStyle LabelFormat ="dd" TextColor="White" Font="Bold,13"/>

</chart:DateTimeAxis.LabelStyle>

<chart:DateTimeAxis.MajorGridLineStyle>

<chart:ChartLineStyle StrokeWidth ="1" StrokeColor="DarkCyan" StrokeDashArray="{StaticResource StrokeArray}">

</chart:ChartLineStyle>

</chart:DateTimeAxis.MajorGridLineStyle>

</chart:DateTimeAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis Minimum="0" Maximum="610"

Interval="200" RangePadding="RoundEnd">

<chart:NumericalAxis.AxisLineStyle>

<chart:ChartLineStyle StrokeColor="DarkCyan"/>

</chart:NumericalAxis.AxisLineStyle>

<chart:NumericalAxis.LabelStyle>

<chart:ChartAxisLabelStyle TextColor="White" Font="Bold,13"/>

</chart:NumericalAxis.LabelStyle>

<!--<chart:NumericalAxis.StripLines>

<chart:NumericalStripLine Start="400" Width ="200" FillColor="Red"/>

<chart:NumericalStripLine Start="200" Width ="199" FillColor="Yellow"/>

<chart:NumericalStripLine Start="0" Width ="199" FillColor="LawnGreen"/>

</chart:NumericalAxis.StripLines>-->

<chart:NumericalAxis.MajorGridLineStyle>

<chart:ChartLineStyle StrokeWidth ="1" StrokeColor="LightGray" StrokeDashArray="{StaticResource StrokeArray}">

</chart:ChartLineStyle>

</chart:NumericalAxis.MajorGridLineStyle>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>

<chart:SfChart.ChartBehaviors>

<controls:ChartTrackballBehaviorExt ActivationMode="LongPress" ShowLabel="True">

<chart:ChartTrackballBehavior.LineStyle>

<chart:ChartLineStyle StrokeColor="White" StrokeWidth="2"/>

</chart:ChartTrackballBehavior.LineStyle>

<chart:ChartTrackballBehavior.LabelStyle>

<chart:ChartTrackballLabelStyle BackgroundColor="White" />

</chart:ChartTrackballBehavior.LabelStyle>

</controls:ChartTrackballBehaviorExt>

</chart:SfChart.ChartBehaviors>

<chart:SfChart.Series>

<chart:LineSeries TrackballLabelTemplate="{StaticResource trackballTemplate}"

Color="White" StrokeWidth="3"

ItemsSource="{Binding TotalWaterLine}"

XBindingPath="Date" YBindingPath="Value">

<chart:LineSeries.DataMarker>

<chart:ChartDataMarker ShowMarker="True" MarkerColor="White"

ShowLabel="False" MarkerBorderWidth="2"

MarkerBorderColor="Transparent"

MarkerHeight="6" MarkerWidth="6" />

</chart:LineSeries.DataMarker>

</chart:LineSeries>

</chart:SfChart.Series>

</chart:SfChart>

YP Yuvaraj Palanisamy Syncfusion Team October 20, 2020 11:52 AM UTC

Hi Deus,

## Solution 1: [ By using Line series ]

We have analyzed your query and we can resolve your problem by setting of RangePadding to be AppendInterval instead of Additional. And for start padding you can use Minimum property of ChartAxis.

Code Snippet:

XAML

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:DateTimeAxis x:Name="primaryAxis"

RangePadding="AppendInterval"/>

</syncfusion:SfChart.PrimaryAxis>

DateTime dateTime = new DateTime(2020, 01, 01);

primaryAxis.Minimum = dateTime;

Also, we have modified the sample as per your requirement. Please find the sample from the below link.

Sample: https://www.syncfusion.com/downloads/support/forum/158818/ze/ChartSample_Series-1919419871

For more details please refer the below link.

https://help.syncfusion.com/xamarin/charts/axis#date-time-axis

## Solution 2: [ By using StripLine ]

Also, we have achieved your requirement “Y-Axis line partition color” by using DateTimeStripLines. Please find the following code snippet.

Code Snippet

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:DateTimeAxis x:Name="primaryAxis"

RangePadding="Additional">

<syncfusion:DateTimeAxis.StripLines>

<syncfusion:DateTimeStripLine FillColor="Red"

Width="4"

WidthType="Hour"

IsSegmented="True"

SegmentStart="0"

SegmentEnd="200"

SegmentAxisName="secondaryAxis"

Start="{Binding Minimum, Source={x:Reference primaryAxis}}"/>

<syncfusion:DateTimeStripLine FillColor="Green"

Width="4"

WidthType="Hour"

IsSegmented="True"

SegmentStart="200"

SegmentEnd="400"

SegmentAxisName="secondaryAxis"

Start="{Binding Minimum, Source={x:Reference primaryAxis}}"/>

<syncfusion:DateTimeStripLine FillColor="Yellow"

Width="4"

WidthType="Hour"

IsSegmented="True"

SegmentStart="400"

SegmentEnd="600"

SegmentAxisName="secondaryAxis"

Start="{Binding Minimum, Source={x:Reference primaryAxis}}"/>

</syncfusion:DateTimeAxis.StripLines>

</syncfusion:DateTimeAxis>

</syncfusion:SfChart.PrimaryAxis>

<syncfusion:SfChart.SecondaryAxis>

<syncfusion:NumericalAxis x:Name="secondaryAxis" Minimum="0" Maximum="600">

<syncfusion:NumericalAxis.AxisLineStyle>

<syncfusion:ChartLineStyle StrokeWidth="0"/>

</syncfusion:NumericalAxis.AxisLineStyle>

</syncfusion:NumericalAxis>

</syncfusion:SfChart.SecondaryAxis>

DateTime dateTime = new DateTime(2020, 01, 01);

primaryAxis.Minimum = dateTime;

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

Sample: https://www.syncfusion.com/downloads/support/forum/158818/ze/ChartSample_StripLine-1796354751

For more details please refer the below link.

https://help.syncfusion.com/xamarin/charts/striplines#segmented-stripline

Please let us know if you have any concern.

Regards,

Yuvaraj

Marked as answer

DE Deus October 21, 2020 05:21 PM UTC

Thanks for the help, the second solution worked for me.

YP Yuvaraj Palanisamy Syncfusion Team October 22, 2020 06:11 AM UTC

Hi Deus,

Thanks for your update.

Regards,

Yuvaraj.

Need More Help?

Get personalized assistance from our support team.

Contact Support

5 Replies
2 Participants
Marked answer
Want to subscribe?
SIGN IN
Created by
DE Deus
Platform
Xamarin.Forms
Control
SfChart
Created On
Oct 17, 2020 05:42 PM UTC
Last Activity On
Oct 22, 2020 06:11 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support