Vertical date line separator

[Jorge Valenzuela]

Hi there, Sync team!
I'm looking to create a vertical separator for my chart like  this:

Is that possible?

[Yuvaraj Palanisamy]

Hi Jorge Valenzuela,  

   

Greetings from Syncfusion.  

  

This update is mainly to get the confirmation of your requirement whether is to get the separate line for each day. If then, you can achieve this by adding the XAxis property of Series.  

    

<chart:SfChart.PrimaryAxis>  

    <chart:DateTimeAxis Interval="1"  

                        Minimum="{Binding MinimumDate}"  

                        Maximum="{Binding MaximumDate}"  

                        IntervalType="Days"  

                        OpposedPosition="True"  

                        ShowMajorGridLines="True"  

                        ShowMinorGridLines="False"  

                        EdgeLabelsDrawingMode="Fit">  

        <chart:DateTimeAxis.LabelStyle>  

            <chart:ChartAxisLabelStyle TextColor="Black" FontSize="12" LabelAlignment="End" Margin="10, 0, 0, 0" LabelFormat="MMM dd"/>  

        </chart:DateTimeAxis.LabelStyle>  

        <chart:DateTimeAxis.MajorGridLineStyle>  

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

        </chart:DateTimeAxis.MajorGridLineStyle>  

        <chart:DateTimeAxis.MajorTickStyle>  

            <chart:ChartAxisTickStyle StrokeColor="Black" StrokeWidth="2" TickSize="10"/>  

        </chart:DateTimeAxis.MajorTickStyle>  

    </chart:DateTimeAxis>  

</chart:SfChart.PrimaryAxis>  

   

. . .  

   

<chart:FastLineSeries x:Name="lineSeries"  

                  ItemsSource="{Binding Data}"  

                  XBindingPath="XValue"  

                  YBindingPath="Height">  

    <chart:FastLineSeries.XAxis>  

        <chart:DateTimeAxis x:Name="xAxis" ShowTrackballInfo="True"  EdgeLabelsDrawingMode="Shift">  

            <chart:DateTimeAxis.LabelStyle>  

                <chart:ChartAxisLabelStyle LabelFormat="HH:mm"/>  

            </chart:DateTimeAxis.LabelStyle>  

        </chart:DateTimeAxis>  

    </chart:FastLineSeries.XAxis>  

    <chart:FastLineSeries.DataMarker>  

        <chart:ChartDataMarker ShowLabel="False" ShowMarker="True"/>  

    </chart:FastLineSeries.DataMarker>  

    <chart:FastLineSeries.ColorModel>  

        <chart:ChartColorModel Palette="Custom"/>  

    </chart:FastLineSeries.ColorModel>  

</chart:FastLineSeries>  

   

   

   

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/160605/ze/SimpleSample_modified-1085903602 

  

Output:  

In case of misunderstanding your query, please explain that in detailed to ensure at our end and provide a proper solution at earlier.  

 

Regards, 

Yuvaraj. 

[Jorge Valenzuela]

Hi Jorge Valenzuela,  

   

Greetings from Syncfusion.  

  

This update is mainly to get the confirmation of your requirement whether is to get the separate line for each day. If then, you can achieve this by adding the XAxis property of Series.  

    

<chart:SfChart.PrimaryAxis>  

    <chart:DateTimeAxis Interval="1"  

                        Minimum="{Binding MinimumDate}"  

                        Maximum="{Binding MaximumDate}"  

                        IntervalType="Days"  

                        OpposedPosition="True"  

                        ShowMajorGridLines="True"  

                        ShowMinorGridLines="False"  

                        EdgeLabelsDrawingMode="Fit">  

        <chart:DateTimeAxis.LabelStyle>  

            <chart:ChartAxisLabelStyle TextColor="Black" FontSize="12" LabelAlignment="End" Margin="10, 0, 0, 0" LabelFormat="MMM dd"/>  

        </chart:DateTimeAxis.LabelStyle>  

        <chart:DateTimeAxis.MajorGridLineStyle>  

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

        </chart:DateTimeAxis.MajorGridLineStyle>  

        <chart:DateTimeAxis.MajorTickStyle>  

            <chart:ChartAxisTickStyle StrokeColor="Black" StrokeWidth="2" TickSize="10"/>  

        </chart:DateTimeAxis.MajorTickStyle>  

    </chart:DateTimeAxis>  

</chart:SfChart.PrimaryAxis>  

   

. . .  

   

<chart:FastLineSeries x:Name="lineSeries"  

                  ItemsSource="{Binding Data}"  

                  XBindingPath="XValue"  

                  YBindingPath="Height">  

    <chart:FastLineSeries.XAxis>  

        <chart:DateTimeAxis x:Name="xAxis" ShowTrackballInfo="True"  EdgeLabelsDrawingMode="Shift">  

            <chart:DateTimeAxis.LabelStyle>  

                <chart:ChartAxisLabelStyle LabelFormat="HH:mm"/>  

            </chart:DateTimeAxis.LabelStyle>  

        </chart:DateTimeAxis>  

    </chart:FastLineSeries.XAxis>  

    <chart:FastLineSeries.DataMarker>  

        <chart:ChartDataMarker ShowLabel="False" ShowMarker="True"/>  

    </chart:FastLineSeries.DataMarker>  

    <chart:FastLineSeries.ColorModel>  

        <chart:ChartColorModel Palette="Custom"/>  

    </chart:FastLineSeries.ColorModel>  

</chart:FastLineSeries>  

   

   

   

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/160605/ze/SimpleSample_modified-1085903602 

  

Output:  

In case of misunderstanding your query, please explain that in detailed to ensure at our end and provide a proper solution at earlier.  

 

Regards, 

Yuvaraj. 

Yeah, this seems nice, but can I decide which lines show?
My chart only shows the information from 24 hours, so I need to show only one line that will be indicated the 12 am.

[Yuvaraj Palanisamy]

Hi Jorge Valenzuela, 

 

#Solution 1 - Chart have only 24 hours 

 

As per your requirement “Line shows at 12.AM with chart have only 24 hours data” we have achieved by using Interval and Interval type property of DateTimeAxis. Also, we have modified the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/160605/ze/Chart_24HoursData242083242  

  

Output: 

 

 

#Solution 2 – Chart have more DataPoints and Shows only 24 hours. 

 

We have achieved your requirement with more number of datapoints and chart shows only 24 hours data by using AutoScrollingDelta and AutoScrollingDeltaType property of DateTimeAxis. And scroll the chart to view the previous datapoints by adding ChartZoomPanbehavior. 

 

Also, please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/160605/ze/Chart_MoreData792706711  

  

Output: 

 

 

For more details, please refer the below link. 

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

 

https://help.syncfusion.com/xamarin/charts/axis#common-axis-features  

 

Regards, 

Yuvaraj.