Graduation scale using split line

[Deus]

Hi,

How can i do this color graduation scale? 

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

[Yuvaraj Palanisamy]

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 

[Deus]

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>

[Yuvaraj Palanisamy]

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> 

 

C# 

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> 

 

 

C# 

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 

[Deus]

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

[Yuvaraj Palanisamy]

Hi Deus, 

Thanks for your update. 

Regards,  

Yuvaraj.