Place label between intervals and not at start of interval for IntervalType.Days in Syncfusion Blazor Charts

[Ashish Khanal]

When using IntervalType="Days" on the primary x-axis of Syncfusion Blazor Charts, the axis labels are rendered at the start of each interval (i.e., at midnight of each day). This makes it visually confusing, as the label appears to belong to the left edge of the interval rather than being centered between the tick marks.

I have tried setting `LabelPlacement="BetweenTicks"` and `EdgeLabelPlacement="Shift"`, but the labels still appear at the start of the interval, not in the middle.

Required Behavior:

- Labels for each day should be centered within the interval (between tick marks), so it's clear which interval the label refers to.

Actual Behavior:

- Labels are rendered at the start of the interval, making it unclear which day the label is representing.

- It sits awkwardly at the very left, even left from the Y-Axis line

Runnable Minimal Repro:

https://blazorplayground.syncfusion.com/BZLIsCVRHHbddIZn

Screenshot:

It should show like the green label above sitting in the middle of the intervals.

Please help me achieve this.

[Durga Gopalakrishnan]

Hi Ashish,

We have reviewed your scenario using the shared sample and would like to explain the behavior of the DateTime axis. For line-type charts, when using a DateTime axis, the initial axis label starts at the edge of the X-axis. This is because the path calculation begins from the first point and connects sequentially to the next points until the last. If the labels were centered, it would create empty spaces before and after the points, and the axis labels would not align with the data points in the series. Therefore, starting from the edge is the default behavior for DateTime axes. The LabelPlacement property works for Category axes because it is based on index positions.

In your sample, there are 24 points for one date (11/25/2025) and another 24 points for the next date (11/26/2025), with hourly intervals. As a result, the axis labels start from the first point (new DateTime(2025, 11, 25, 00, 0, 0)) and end at the last point (new DateTime(2025, 11, 26, 23, 0, 0)). For your reference, we have enabled markers in the sample to highlight this difference.

Category

DateTime

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Ashish Khanal]

Hi Durga,

I understand that starting from the edge is the default behavior for DateTime axes.

But there should be a workaround for this issue, right?

I mean the customers don't want to see x-axis label extending beyond y-axis line. It just creates a bad UX which is unacceptable in most cases.

A "hacky" and incomplete solution seems to be adding this line which at least pulls the label inside the y-axis line.

LabelRotation="0.01"

Runnable sample: https://blazorplayground.syncfusion.com/rNhICBNzxGZqUByJ

Please suggest a robust workaround for this issue. Thank you!

[Durga Gopalakrishnan]

Ashish,

We regret to inform you that there’s no built-in support to shift edge labels inward at this time. However, you can achieve the desired result using one of the following approaches:

1) PlotOffset

Add padding to the plot area in pixels. Setting PlotOffset on the X-axis adds padding to both left and right sides, while PlotOffsetLeft targets only the left side. We’ve attached a modified sample for reference.

<ChartPrimaryXAxis PlotOffset="35" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">

</ChartPrimaryXAxis>

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

2) Adjust the first label via DOM (JavaScript interop)

Use Blazor’s JS interop to reposition the first axis label after the chart loads. In the Loaded event, call a JS function (e.g., shiftFirstLabel) with the label’s DOM ID (chart0_AxisLabel_0). The function reads the current x position and shifts the label 35px to the right to improve readability with the chart edge.

Home.razor

@inject IJSRuntime JS

<SfChart ID="chart">

    <ChartEvents Loaded="OnChartLoaded"></ChartEvents>

</SfChart>

 

@code {

    private void OnChartLoaded(LoadedEventArgs args)

    {

        JS.InvokeVoidAsync("shiftFirstLabel", "chart1_AxisLabel_0");

    }

App.razor

<script>

   window.shiftFirstLabel = function (id) {             

    const firstLabel = document.getElementById(id);

    if (!firstLabel) return;

    let x = parseFloat(firstLabel.getAttribute("x"));

    // Shift right by 35px

    firstLabel.setAttribute("x", x + 35);

    };

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LabelShift.zip

Please let us know if you have any concerns.