How to show granular axis labels within chart intervals in Syncfusion Blazor Charts?

6 Replies
2 Participants
Marked answer

Created by
AK Ashish Khanal

Platform
Blazor

Platform
Blazor

Control
Charts

Created On
Nov 25, 2025 11:38 PM UTC

Last Activity On
Dec 5, 2025 08:15 AM UTC

Want to subscribe?
SIGN IN

Context:

I’m trying to create a Syncfusion Blazor chart that shows custom labels on the X-axis. It should show up like explained below:

- First: Spacing between days.

- Second: Spacing between hours. Show granular hour ending labels (e.g., 1, 5, 9, 13, 17, 21) for each day. (I have provided all hour ending sample data for 2 days for you to play with.)

- Third: Show the day of the week (e.g., Mon, Tue) and date (e.g., 11/25/2025) centered under each day below granular hour ending labels.

Here’s a screenshot of the desired result. See how days are separated and labeled and also the hours are labeled with Date and Day of the week centered.

Image_2940_1764112656003

Runnable Minimal Repro:

https://blazorplayground.syncfusion.com/VjLSMCLIFpsYwXtR

Image_7026_1764113926366

Request:

- Please help me achieve this. You can use the above runnable repro to work on it.

Thank you!

6 Replies 1 reply marked as answer

AK Ashish Khanal November 25, 2025 11:46 PM UTC

Repro code (for future reference):

@using Syncfusion.Blazor.Charts

<SfChart Title="Oil Price Chart" Height="500px" Width="100%">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"
                       IntervalType="Syncfusion.Blazor.Charts.IntervalType.Days">

    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis Title="Price" LabelFormat="N0" />

    <ChartSeriesCollection>
        <ChartSeries DataSource="@OilPrices" XName="TRADE_DATETIME" YName="MAXIMUM_PRICE" Name="Max" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Area" Fill="#b3d8f7" Opacity="0.3" />
        <ChartSeries DataSource="@OilPrices" XName="TRADE_DATETIME" YName="MINIMUM_PRICE" Name="Min" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Area" Fill="#f7b3b3" Opacity="0.3" />
        <ChartSeries DataSource="@OilPrices" XName="TRADE_DATETIME" YName="AVERAGE_PRICE" Name="Average" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" Width="2" DashArray="5,2" Fill="#888" />
    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true" />
    <ChartTooltipSettings Enable="true" />
</SfChart>

@code {
    public class HistoricalOilPrice
    {
        public DateTime TRADE_DATE { get; init; }
        public int HOUR_ENDING { get; init; }
        public double MAXIMUM_PRICE { get; init; }
        public double MINIMUM_PRICE { get; init; }
        public double AVERAGE_PRICE { get; init; }
        public DateTime MAXIMUM_PRICE_DATE { get; set; }
        public DateTime MINIMUM_PRICE_DATE { get; set; }
        public DateTime TRADE_DATETIME => TRADE_DATE.Date.AddHours(HOUR_ENDING - 1);
    }

    List<HistoricalOilPrice> OilPrices = new()
    {
        // 11/25/2025
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 1, MAXIMUM_PRICE = 13719.931, MINIMUM_PRICE = 7489, AVERAGE_PRICE = 10445 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 2, MAXIMUM_PRICE = 13712.913, MINIMUM_PRICE = 7180, AVERAGE_PRICE = 10289 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 3, MAXIMUM_PRICE = 13868.483, MINIMUM_PRICE = 7081, AVERAGE_PRICE = 10328 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 4, MAXIMUM_PRICE = 14141.359, MINIMUM_PRICE = 7057, AVERAGE_PRICE = 10487 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 5, MAXIMUM_PRICE = 14627.613, MINIMUM_PRICE = 7287.071, AVERAGE_PRICE = 10912 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 6, MAXIMUM_PRICE = 15450.165, MINIMUM_PRICE = 7954.41, AVERAGE_PRICE = 11760 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 7, MAXIMUM_PRICE = 16605.839, MINIMUM_PRICE = 9120.22, AVERAGE_PRICE = 12919 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 8, MAXIMUM_PRICE = 17028.84, MINIMUM_PRICE = 9957, AVERAGE_PRICE = 13349 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 9, MAXIMUM_PRICE = 16230.217, MINIMUM_PRICE = 9905, AVERAGE_PRICE = 12904 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 10, MAXIMUM_PRICE = 15310.13, MINIMUM_PRICE = 9881, AVERAGE_PRICE = 12294 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 11, MAXIMUM_PRICE = 14736.132, MINIMUM_PRICE = 9853, AVERAGE_PRICE = 11878 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 12, MAXIMUM_PRICE = 14433.803, MINIMUM_PRICE = 9764, AVERAGE_PRICE = 11595 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 13, MAXIMUM_PRICE = 14354.362, MINIMUM_PRICE = 9761, AVERAGE_PRICE = 11389 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 14, MAXIMUM_PRICE = 14313.819, MINIMUM_PRICE = 9724.755, AVERAGE_PRICE = 11255 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 15, MAXIMUM_PRICE = 14276.803, MINIMUM_PRICE = 9629.095, AVERAGE_PRICE = 11185 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 16, MAXIMUM_PRICE = 14782.532, MINIMUM_PRICE = 9636.309, AVERAGE_PRICE = 11352 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 17, MAXIMUM_PRICE = 15834.431, MINIMUM_PRICE = 9938, AVERAGE_PRICE = 11912 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 18, MAXIMUM_PRICE = 17075.608, MINIMUM_PRICE = 10637, AVERAGE_PRICE = 12750 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 19, MAXIMUM_PRICE = 17338.311, MINIMUM_PRICE = 10668, AVERAGE_PRICE = 12843 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 20, MAXIMUM_PRICE = 17408.959, MINIMUM_PRICE = 10447, AVERAGE_PRICE = 12763 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 21, MAXIMUM_PRICE = 17286.683, MINIMUM_PRICE = 10154, AVERAGE_PRICE = 12553 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 22, MAXIMUM_PRICE = 16925.582, MINIMUM_PRICE = 9553, AVERAGE_PRICE = 12121 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 23, MAXIMUM_PRICE = 16426.471, MINIMUM_PRICE = 8874, AVERAGE_PRICE = 11537 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25), HOUR_ENDING = 24, MAXIMUM_PRICE = 16010.116, MINIMUM_PRICE = 8160, AVERAGE_PRICE = 10984 },

        // 11/26/2025
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 1, MAXIMUM_PRICE = 15769.147, MINIMUM_PRICE = 7641, AVERAGE_PRICE = 10630 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 2, MAXIMUM_PRICE = 15769.39, MINIMUM_PRICE = 7325, AVERAGE_PRICE = 10494 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 3, MAXIMUM_PRICE = 15929.102, MINIMUM_PRICE = 7173, AVERAGE_PRICE = 10505 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 4, MAXIMUM_PRICE = 16234.075, MINIMUM_PRICE = 7132, AVERAGE_PRICE = 10674 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 5, MAXIMUM_PRICE = 16800.84, MINIMUM_PRICE = 7286, AVERAGE_PRICE = 11068 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 6, MAXIMUM_PRICE = 17767.443, MINIMUM_PRICE = 7864, AVERAGE_PRICE = 11874 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 7, MAXIMUM_PRICE = 18970.799, MINIMUM_PRICE = 8928, AVERAGE_PRICE = 12903 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 8, MAXIMUM_PRICE = 19317.352, MINIMUM_PRICE = 9511, AVERAGE_PRICE = 13347 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 9, MAXIMUM_PRICE = 18431.998, MINIMUM_PRICE = 9667, AVERAGE_PRICE = 13038 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 10, MAXIMUM_PRICE = 17100.629, MINIMUM_PRICE = 9908, AVERAGE_PRICE = 12548 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 11, MAXIMUM_PRICE = 16069.225, MINIMUM_PRICE = 9998, AVERAGE_PRICE = 12145 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 12, MAXIMUM_PRICE = 15372.109, MINIMUM_PRICE = 9983, AVERAGE_PRICE = 11845 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 13, MAXIMUM_PRICE = 14870.324, MINIMUM_PRICE = 9866.058, AVERAGE_PRICE = 11582 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 14, MAXIMUM_PRICE = 14496.068, MINIMUM_PRICE = 9753, AVERAGE_PRICE = 11403 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 15, MAXIMUM_PRICE = 14334.454, MINIMUM_PRICE = 9711.327, AVERAGE_PRICE = 11340 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 16, MAXIMUM_PRICE = 14741.784, MINIMUM_PRICE = 9772.789, AVERAGE_PRICE = 11485 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 17, MAXIMUM_PRICE = 15747.976, MINIMUM_PRICE = 10188.038, AVERAGE_PRICE = 12005 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 18, MAXIMUM_PRICE = 16763.222, MINIMUM_PRICE = 10928, AVERAGE_PRICE = 12834 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 19, MAXIMUM_PRICE = 17065.315, MINIMUM_PRICE = 10846, AVERAGE_PRICE = 12880 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 20, MAXIMUM_PRICE = 17009.487, MINIMUM_PRICE = 10668, AVERAGE_PRICE = 12758 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 21, MAXIMUM_PRICE = 16843.302, MINIMUM_PRICE = 10515, AVERAGE_PRICE = 12575 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 22, MAXIMUM_PRICE = 16385.782, MINIMUM_PRICE = 10154, AVERAGE_PRICE = 12206 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 23, MAXIMUM_PRICE = 15774.06, MINIMUM_PRICE = 9634, AVERAGE_PRICE = 11659 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26), HOUR_ENDING = 24, MAXIMUM_PRICE = 15204.069, MINIMUM_PRICE = 9038, AVERAGE_PRICE = 11122 }
    };
}

DG Durga Gopalakrishnan Syncfusion Team November 26, 2025 11:56 AM UTC

Hi Ashish,

Thank you for reaching out. Your requirement can be achieved using the multi-level labels feature. In our implementation, the default X-axis displays hours, while the first and second levels show days and dates using the defined start and end ranges. For your reference, we have attached a modified sample.

<ChartPrimaryXAxis>

<ChartMultiLevelLabels>

<ChartMultiLevelLabel>

<ChartAxisMultiLevelLabelTextStyle Size="12px"></ChartAxisMultiLevelLabelTextStyle>

<ChartCategories>

<ChartCategory Start="new DateTime(2025, 11, 25, 01, 0, 0)"

End="new DateTime(2025, 11, 25, 12, 0, 0)"

Text="Mon">

</ChartCategory>

<ChartCategory Start="new DateTime(2025, 11, 25, 12, 0, 0)"

End="new DateTime(2025, 11, 25, 23, 0, 0)"

Text="Tue">

</ChartCategory>

</ChartCategories>

</ChartMultiLevelLabel>

<ChartMultiLevelLabel>

<ChartAxisMultiLevelLabelTextStyle Size="12px"></ChartAxisMultiLevelLabelTextStyle>

<ChartCategories>

<ChartCategory Start="new DateTime(2025, 11, 25, 01, 0, 0)"

End="new DateTime(2025, 11, 25, 12, 0, 0)"

Text="2/26/2024">

</ChartCategory>

<ChartCategory Start="new DateTime(2025, 11, 25, 12, 0, 0)"

End="new DateTime(2025, 11, 25, 23, 0, 0)"

Text="2/27/2024">

</ChartCategory>

</ChartCategories>

</ChartMultiLevelLabel>

</ChartMultiLevelLabels>

</ChartPrimaryXAxis>

Sample : https://blazorplayground.syncfusion.com/VDheiWhxTWxTnvmX

UG : https://blazor.syncfusion.com/documentation/chart/axis-labels#multilevel-labels

Online Demo : https://blazor.syncfusion.com/demos/chart/multiple-level?theme=fluent2

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

AK Ashish Khanal November 26, 2025 05:53 PM UTC

Hi Durga,

Thank you for the response.

I see few issues with your solution, and I have addressed them below:

Issue 1: Incorrect DateTime and HE mapping

Looks like you populated the data incorrectly (for hour and HE mapping) so I have fixed it in the new iteration:

Basically, it's DATE.AddHours(1) = Hour Ending For eg:

new DateTime(2025, 11, 25, 00, 0, 0), HOUR_ENDING = 1

new DateTime(2025, 11, 25, 01, 0, 0), HOUR_ENDING = 2

Issue 2: Hardcoding data

I put effort into creating a runnable sample so you wouldn't have to use any hardcoded values, and that way I get to see a useful sample.

So, I have used the actual data source to derive day of the week (e.g., Mon, Tue) and date (e.g., 11/25/2025) for the multi-level labels.

Issue 3: Incorrect hour labels

Your solution shows 05, 10, 15, 20 hours. I can't show that.

I need to show Hour Ending (HE) labels for 1, 5, 9, 13, 17, 21 as shown below or in my requirement screenshot in the original post.

Runnable Sample: Iteration 2

https://blazorplayground.syncfusion.com/BjBIMsrxxKGcrGSx

Request: Please show HE on the axis labels with day separated as shown below

- Please don't use hardcoded anything. Just use the data source provided to generate axis categories and labels

- Please replicate the requirement exactly as shown in my screenshot, with all data present and axis labels as described. I need vertical separators only between days, and sub hour ending labels for 1, 5, 9, 13, 17, 21. 1, 5, 9, 13, 17, 21 are HE not hours. HE 1 is hour 00.

Check out below screenshot of the requirement.

Image_3641_1764179032219

Thank you!

DG Durga Gopalakrishnan Syncfusion Team November 27, 2025 02:59 PM UTC

Ashish,

The DateTime axis displays the datetime values in linear intervals. In the data source, the range starts from new DateTime(2025, 11, 25, 00, 0, 0) and ends at new DateTime(2025, 11, 26, 23, 0, 0). When the interval is set to 4, the axis labels will appear as 00, 04, 08, .... Since your requirement is to display labels like 1, 5, 9, ..., we recommend customizing the labels using the OnAxisLabelRender event.

Additionally, when LabelFormat is set to HH, labels will display as 00, 05, 10, 15, .... You can adjust the format using H for 24-hour format or h for 12-hour format as needed.

AK Ashish Khanal December 4, 2025 06:20 PM UTC

Thank you so much for your help, Durga.

Just documenting the full final code here for reference so future readers can benefit from it.

Image_9700_1764872282368

Runnable sample for above illustration

Link: https://blazorplayground.syncfusion.com/BXLSihZfdoOmBqkr

@using Syncfusion.Blazor.Charts
<SfChart Title="Oil Price Chart" Height="500px" Width="100%">
    <ChartEvents OnAxisLabelRender="AxisLabelRender"></ChartEvents>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"
    IntervalType="Syncfusion.Blazor.Charts.IntervalType.Hours" Interval="4"
    LabelFormat="HH">
        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
        <ChartStriplines>
            @foreach (var g in OilPrices.GroupBy(x => x.TRADE_DATE.Date))
            {
                var first = g.First().TRADE_DATE;
 
                if (first != OilPrices.First().TRADE_DATE.Date)
                {
                    <ChartStripline Start="first"
                                    SizeType="SizeType.Pixel"
                                    Size="1"
                                    DashArray="4,4"
                                    Color="black"
                                    Opacity="1"
                                    ZIndex="ZIndex.Over"
                                    Visible="true" />
                }
            }
        </ChartStriplines>
        <ChartMultiLevelLabels>
            <!-- Day of week -->
            <ChartMultiLevelLabel>
                <ChartAxisMultiLevelLabelTextStyle Size="12px"></ChartAxisMultiLevelLabelTextStyle>
                <ChartCategories>
                    @{
                        var grouped = OilPrices.GroupBy(x => x.TRADE_DATE.Date).ToList();
                        for (int i = 0; i < grouped.Count; i++)
                        {
                            var group = grouped[i];
                            var start = group.Min(x => x.TRADE_DATE);
                            var end = group.Max(x => x.TRADE_DATE).AddHours(1);
                            // For the last group, don't extend to avoid clipping
                            if (i == grouped.Count - 1)
                                end = end.AddHours(-1);
                            var dayName = start.ToString("ddd");
                            <ChartCategory Start="start" End="end" Text="@dayName"></ChartCategory>
                        }
                    }
                </ChartCategories>
            </ChartMultiLevelLabel>
            <!-- Date -->
            <ChartMultiLevelLabel>
                <ChartAxisMultiLevelLabelTextStyle Size="12px"></ChartAxisMultiLevelLabelTextStyle>
                <ChartCategories>
                    @{
                        var grouped = OilPrices.GroupBy(x => x.TRADE_DATE.Date).ToList();
                        for (int i = 0; i < grouped.Count; i++)
                        {
                            var group = grouped[i];
                            var start = group.Min(x => x.TRADE_DATE);
                            var end = group.Max(x => x.TRADE_DATE).AddHours(1);
                            if (i == grouped.Count - 1)
                                end = end.AddHours(-1);
                            var dateText = start.ToString("M/d/yyyy");
                            <ChartCategory Start="start" End="end" Text="@dateText"></ChartCategory>
                        }
                    }
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>

    </ChartPrimaryXAxis>

    <ChartPrimaryYAxis Title="Price" LabelFormat="N0" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@OilPrices" XName="TRADE_DATE" YName="MAXIMUM_PRICE" Name="Max" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Area" Fill="#b3d8f7" Opacity="0.3" />
        <ChartSeries DataSource="@OilPrices" XName="TRADE_DATE" YName="MINIMUM_PRICE" Name="Min" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Area" Fill="#f7b3b3" Opacity="0.3" />
        <ChartSeries DataSource="@OilPrices" XName="TRADE_DATE" YName="AVERAGE_PRICE" Name="Average" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" Width="2" DashArray="5,2" Fill="#888" />
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true" />
    <ChartTooltipSettings Enable="true" />
</SfChart>

@code {
    // Only show HE labels for 1, 5, 9, 13, 17, 21
    public void AxisLabelRender(Syncfusion.Blazor.Charts.AxisLabelRenderEventArgs args)
    {
        if (args.Axis.Name == "PrimaryXAxis")
        {
            long milliseconds = (long)args.Value;
            DateTimeOffset dateTimeOffset = DateTimeOffset.FromUnixTimeMilliseconds(milliseconds);
            int hour = dateTimeOffset.UtcDateTime.Hour;

            // If the calculated hour is 0 (midnight), display it as 1 instead.
            if (hour == 0)
            {
                args.Text = "1";
            }
            else
            {
                // The other labels (5, 9, 13, 17, 21) are already correct.
                args.Text = Convert.ToString(hour + 1);
            }
        }
    }


    public class HistoricalOilPrice
    {
        public DateTime TRADE_DATE { get; set; }
        public int HOUR_ENDING { get; set; }
        public double MAXIMUM_PRICE { get; init; }
        public double MINIMUM_PRICE { get; init; }
        public double AVERAGE_PRICE { get; init; }
        public DateTime MAXIMUM_PRICE_DATE { get; set; }
        public DateTime MINIMUM_PRICE_DATE { get; set; }
        // public DateTime TRADE_DATETIME => TRADE_DATE.Date.AddHours(HOUR_ENDING - 1);
    }

    public List<HistoricalOilPrice> OilPrices = new List<HistoricalOilPrice>()
    {
        // 11/25/2025
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 00, 0, 0), HOUR_ENDING = 1, MAXIMUM_PRICE = 13719.931, MINIMUM_PRICE = 7489, AVERAGE_PRICE = 10445 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 01, 0, 0), HOUR_ENDING = 2, MAXIMUM_PRICE = 13712.913, MINIMUM_PRICE = 7180, AVERAGE_PRICE = 10289 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 02, 0, 0), HOUR_ENDING = 3, MAXIMUM_PRICE = 13868.483, MINIMUM_PRICE = 7081, AVERAGE_PRICE = 10328 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 03, 0, 0), HOUR_ENDING = 4, MAXIMUM_PRICE = 14141.359, MINIMUM_PRICE = 7057, AVERAGE_PRICE = 10487 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 04, 0, 0), HOUR_ENDING = 5, MAXIMUM_PRICE = 14627.613, MINIMUM_PRICE = 7287.071, AVERAGE_PRICE = 10912 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 05, 0, 0), HOUR_ENDING = 6, MAXIMUM_PRICE = 15450.165, MINIMUM_PRICE = 7954.41, AVERAGE_PRICE = 11760 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 06, 0, 0), HOUR_ENDING = 7, MAXIMUM_PRICE = 16605.839, MINIMUM_PRICE = 9120.22, AVERAGE_PRICE = 12919 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 07, 0, 0), HOUR_ENDING = 8, MAXIMUM_PRICE = 17028.84, MINIMUM_PRICE = 9957, AVERAGE_PRICE = 13349 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 08, 0, 0), HOUR_ENDING = 9, MAXIMUM_PRICE = 16230.217, MINIMUM_PRICE = 9905, AVERAGE_PRICE = 12904 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 09, 0, 0), HOUR_ENDING = 10, MAXIMUM_PRICE = 15310.13, MINIMUM_PRICE = 9881, AVERAGE_PRICE = 12294 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 10, 0, 0), HOUR_ENDING = 11, MAXIMUM_PRICE = 14736.132, MINIMUM_PRICE = 9853, AVERAGE_PRICE = 11878 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 11, 0, 0), HOUR_ENDING = 12, MAXIMUM_PRICE = 14433.803, MINIMUM_PRICE = 9764, AVERAGE_PRICE = 11595 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 12, 0, 0), HOUR_ENDING = 13, MAXIMUM_PRICE = 14354.362, MINIMUM_PRICE = 9761, AVERAGE_PRICE = 11389 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 13, 0, 0), HOUR_ENDING = 14, MAXIMUM_PRICE = 14313.819, MINIMUM_PRICE = 9724.755, AVERAGE_PRICE = 11255 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 14, 0, 0), HOUR_ENDING = 15, MAXIMUM_PRICE = 14276.803, MINIMUM_PRICE = 9629.095, AVERAGE_PRICE = 11185 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 15, 0, 0), HOUR_ENDING = 16, MAXIMUM_PRICE = 14782.532, MINIMUM_PRICE = 9636.309, AVERAGE_PRICE = 11352 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 16, 0, 0), HOUR_ENDING = 17, MAXIMUM_PRICE = 15834.431, MINIMUM_PRICE = 9938, AVERAGE_PRICE = 11912 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 17, 0, 0), HOUR_ENDING = 18, MAXIMUM_PRICE = 17075.608, MINIMUM_PRICE = 10637, AVERAGE_PRICE = 12750 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 18, 0, 0), HOUR_ENDING = 19, MAXIMUM_PRICE = 17338.311, MINIMUM_PRICE = 10668, AVERAGE_PRICE = 12843 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 19, 0, 0), HOUR_ENDING = 20, MAXIMUM_PRICE = 17408.959, MINIMUM_PRICE = 10447, AVERAGE_PRICE = 12763 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 20, 0, 0), HOUR_ENDING = 21, MAXIMUM_PRICE = 17286.683, MINIMUM_PRICE = 10154, AVERAGE_PRICE = 12553 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 21, 0, 0), HOUR_ENDING = 22, MAXIMUM_PRICE = 16925.582, MINIMUM_PRICE = 9553, AVERAGE_PRICE = 12121 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 22, 0, 0), HOUR_ENDING = 23, MAXIMUM_PRICE = 16426.471, MINIMUM_PRICE = 8874, AVERAGE_PRICE = 11537 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 25, 23, 0, 0), HOUR_ENDING = 24, MAXIMUM_PRICE = 16010.116, MINIMUM_PRICE = 8160, AVERAGE_PRICE = 10984 },

        // 11/26/2025
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 00, 0, 0), HOUR_ENDING = 1, MAXIMUM_PRICE = 15769.147, MINIMUM_PRICE = 7641, AVERAGE_PRICE = 10630 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 01, 0, 0), HOUR_ENDING = 2, MAXIMUM_PRICE = 15769.39, MINIMUM_PRICE = 7325, AVERAGE_PRICE = 10494 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 02, 0, 0), HOUR_ENDING = 3, MAXIMUM_PRICE = 15929.102, MINIMUM_PRICE = 7173, AVERAGE_PRICE = 10505 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 03, 0, 0), HOUR_ENDING = 4, MAXIMUM_PRICE = 16234.075, MINIMUM_PRICE = 7132, AVERAGE_PRICE = 10674 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 04, 0, 0), HOUR_ENDING = 5, MAXIMUM_PRICE = 16800.84, MINIMUM_PRICE = 7286, AVERAGE_PRICE = 11068 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 05, 0, 0), HOUR_ENDING = 6, MAXIMUM_PRICE = 17767.443, MINIMUM_PRICE = 7864, AVERAGE_PRICE = 11874 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 06, 0, 0), HOUR_ENDING = 7, MAXIMUM_PRICE = 18970.799, MINIMUM_PRICE = 8928, AVERAGE_PRICE = 12903 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 07, 0, 0), HOUR_ENDING = 8, MAXIMUM_PRICE = 19317.352, MINIMUM_PRICE = 9511, AVERAGE_PRICE = 13347 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 08, 0, 0), HOUR_ENDING = 9, MAXIMUM_PRICE = 18431.998, MINIMUM_PRICE = 9667, AVERAGE_PRICE = 13038 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 09, 0, 0), HOUR_ENDING = 10, MAXIMUM_PRICE = 17100.629, MINIMUM_PRICE = 9908, AVERAGE_PRICE = 12548 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 10, 0, 0), HOUR_ENDING = 11, MAXIMUM_PRICE = 16069.225, MINIMUM_PRICE = 9998, AVERAGE_PRICE = 12145 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 11, 0, 0), HOUR_ENDING = 12, MAXIMUM_PRICE = 15372.109, MINIMUM_PRICE = 9983, AVERAGE_PRICE = 11845 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 12, 0, 0), HOUR_ENDING = 13, MAXIMUM_PRICE = 14870.324, MINIMUM_PRICE = 9866.058, AVERAGE_PRICE = 11582 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 13, 0, 0), HOUR_ENDING = 14, MAXIMUM_PRICE = 14496.068, MINIMUM_PRICE = 9753, AVERAGE_PRICE = 11403 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 14, 0, 0), HOUR_ENDING = 15, MAXIMUM_PRICE = 14334.454, MINIMUM_PRICE = 9711.327, AVERAGE_PRICE = 11340 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 15, 0, 0), HOUR_ENDING = 16, MAXIMUM_PRICE = 14741.784, MINIMUM_PRICE = 9772.789, AVERAGE_PRICE = 11485 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 16, 0, 0), HOUR_ENDING = 17, MAXIMUM_PRICE = 15747.976, MINIMUM_PRICE = 10188.038, AVERAGE_PRICE = 12005 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 17, 0, 0), HOUR_ENDING = 18, MAXIMUM_PRICE = 16763.222, MINIMUM_PRICE = 10928, AVERAGE_PRICE = 12834 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 18, 0, 0), HOUR_ENDING = 19, MAXIMUM_PRICE = 17065.315, MINIMUM_PRICE = 10846, AVERAGE_PRICE = 12880 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 19, 0, 0), HOUR_ENDING = 20, MAXIMUM_PRICE = 17009.487, MINIMUM_PRICE = 10668, AVERAGE_PRICE = 12758 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 20, 0, 0), HOUR_ENDING = 21, MAXIMUM_PRICE = 16843.302, MINIMUM_PRICE = 10515, AVERAGE_PRICE = 12575 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 21, 0, 0), HOUR_ENDING = 22, MAXIMUM_PRICE = 16385.782, MINIMUM_PRICE = 10154, AVERAGE_PRICE = 12206 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 22, 0, 0), HOUR_ENDING = 23, MAXIMUM_PRICE = 15774.06, MINIMUM_PRICE = 9634, AVERAGE_PRICE = 11659 },
        new HistoricalOilPrice { TRADE_DATE = new DateTime(2025, 11, 26, 23, 0, 0), HOUR_ENDING = 24, MAXIMUM_PRICE = 15204.069, MINIMUM_PRICE = 9038, AVERAGE_PRICE = 11122 }
    };
}

Marked as answer

DG Durga Gopalakrishnan Syncfusion Team December 5, 2025 08:15 AM UTC

Ashish,

Thank you for sharing the complete code. This will definitely help others looking for a similar solution. Appreciate you documenting it for future readers.

Need More Help?

Get personalized assistance from our support team.

Contact Support

6 Replies
2 Participants
Marked answer
Want to subscribe?
SIGN IN
Created by
AK Ashish Khanal
Platform
Blazor
Control
Charts
Created On
Nov 25, 2025 11:38 PM UTC
Last Activity On
Dec 5, 2025 08:15 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support