Do MultiLevelLabels work with a DateTimeCategory axis?

[Soeren Kuklau]

I have a DateTimeCategory axis formatted to show hours and minutes:

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" />

The data is from the past 24 hours (so it will span portions of two days), with one data point for each hour. What I'd like is for each hour to have a tick with HH:mm formatting on the x axis (I can do that), but also an additional label each time the date changes. So, something like

    9 PM      10 PM      11 PM      12 AM      1 AM      2 AM      3 AM // etc.

2021-06-24                       2021-06-25

However, the Start/End properties on ChartCategories don't seem to support DateTime values right now. This, for example, doesn't work:

<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory">

    <ChartMultiLevelLabels>

        <ChartMultiLevelLabel>

            <ChartCategories>                    

                <ChartCategory Start="2021-06-23" End="2021-06-23 23:59" Text="2021-06-23" />                  

                <ChartCategory Start="2021-06-24" End="2021-06-24 23:59" Text="2021-06-24" />                  

            </ChartCategories>

        </ChartMultiLevelLabel>     

    </ChartMultiLevelLabels>   

</ChartPrimaryXAxis>


[Srihari Muthukaruppan]

Hi Soeren, 

 

Based on the provided code snippet we suspect the reported scenario occurs since the start and end values of multiLevelLabel is not provided properly. And also we suggest you to use DateTime axis as shown in the below code snippet to achieve your requirement. Please find the sample, code snippet and screenshot. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiLevelLabel19.1.69_1317476820.zip 

 

Code Snippet: 

// add your additional code here 

 

<SfChart @ref="Chart"> 

    <ChartPrimaryXAxis RangePadding="ChartRangePadding.Additional" LabelPlacement="LabelPlacement.BetweenTicks" EdgeLabelPlacement="EdgeLabelPlacement.Hide" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Interval="1" IntervalType="IntervalType.Days" LabelFormat="yyyy-MM-dd"> 

            <ChartMultiLevelLabels> 

                <ChartMultiLevelLabel> 

                    <ChartCategories> 

                        <ChartCategory Start="new DateTime(2021, 6, 01)" End="new DateTime(2021, 6, 01, 23, 59, 00)" Text="2021-06-23" /> 

                        <ChartCategory Start="new DateTime(2021, 6, 02)" End="new DateTime(2021, 6, 02, 23, 59, 00)" Text="2021-06-24" /> 

                    </ChartCategories> 

                    <ChartAxisMultiLevelLabelBorder Type="BorderType.Auto" Color="blue" Width=0></ChartAxisMultiLevelLabelBorder> 

                </ChartMultiLevelLabel> 

            </ChartMultiLevelLabels> 

    </ChartPrimaryXAxis> 

    <ChartPrimaryYAxis Minimum="40" /> 

    <ChartSeriesCollection> 

        @foreach (var series in Data) 

        { 

            <ChartSeries DataSource="@series.Value" XName="Category" YName="Value" Type="ChartSeriesType.Line" Name="@series.Key" /> 

        } 

    </ChartSeriesCollection> 

</SfChart> 

 

// add your additional code here 

 

 

Screenshot: 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M