Syncfusion Blazor Chart Axis Label Rotation - How to do -90 degrees for LabelIntersectAction?

[Ashish Khanal]

I want to control the X axis label rotation based on label crowding.

Desired behavior

  - When labels are not crowded, they should remain horizontal.

  - When labels overlap (LabelIntersectAction triggers), I want the labels to rotate -90° (vertical, bottom-to-top, top pointing left).

Current limitation:

  - The only built-in option is `LabelIntersectAction.Rotate90`, which rotates labels +90° (top pointing right, vertical but hard to read). I don't want this.

  - There is no `LabelIntersectAction.RotateNegative90` which would solve this problem for me perfectly.

  - Manually setting `LabelRotation = -90` works, but I want this to happen only when labels are crowded, not always.

Current workaround:

  - I'm manually checking the number of chart points and setting `LabelRotation = -90`, but this feels hacky and I don't want to do this.

Minimal Repro:

https://blazorplayground.syncfusion.com/BjhSDECcHuoAckvV

Question

How can I achieve automatic -90° label rotation (bottom-to-top, top pointing left) only when X axis labels are crowded/overlapping, similar to how `LabelIntersectAction.Rotate90` works for +90°?

Please help with a built-in way or a good workaround for this scenario.

Thank you!

[Ashish Khanal]

Repro code (for future reference): 

@using Syncfusion.Blazor.Charts

<SfChart Title="Label Rotation Demo" Width="700px" Height="400px">

    <ChartPrimaryXAxis

        ValueType="Syncfusion.Blazor.Charts.ValueType.Category"

        Interval="1"

        LabelIntersectAction="@ChartLabelIntersectAction"

        LabelRotation="@ChartLabelRotation" />

    <ChartPrimaryYAxis Title="Value" />

    <ChartSeriesCollection>

        <ChartSeries DataSource="@ChartPoints"

                     XName="Category"

                     YName="Value"

                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

<button class="e-btn" @onclick="AddMorePoints">Add More Points</button>

@code {

    public Syncfusion.Blazor.Charts.LabelIntersectAction ChartLabelIntersectAction { get; set; } = Syncfusion.Blazor.Charts.LabelIntersectAction.None;

    public double ChartLabelRotation { get; set; } = 0;

    private List<DataPoint> ChartPoints = new()

    {

        new DataPoint("Alpha", 10),

        new DataPoint("Beta", 15),

        new DataPoint("Gamma", 20),

        new DataPoint("Delta", 25),

        new DataPoint("Epsilon", 30)

    };

    private int extraPointCount = 0;

    private void AddMorePoints()

    {

        extraPointCount++;

        ChartPoints.Add(new DataPoint($"Extra{extraPointCount}", 10 + extraPointCount * 5));

        // Simulate label crowding: rotate if more than 7 points

        if (ChartPoints.Count > 7)

        {

            ChartLabelRotation = -90;

        }

        else

        {

            ChartLabelRotation = 0;

        }

    }

    public class DataPoint

    {

        public DataPoint(string category, double value)

        {

            Category = category;

            Value = value;

        }

        public string Category { get; set; }

        public double Value { get; set; }

    }

}

[Durga Gopalakrishnan]

Hi Ashish,

Thank you for reaching out.

We have analyzed your reported scenario. As of now, we don’t have support to rotate axis labels in -90 degree based on LabelIntersectAction. So, we have considered your requirement as improvement and logged a feature request on “Support for rotating chart axis labels to -90° when overlapping”. Based on other logged tasks priority, we will include this improvement in any of our upcoming release. You can keep track of an improvement from the feedback portal below. 

Feedback Link :  https://www.syncfusion.com/feedback/70140/support-for-rotating-chart-axis-labels-to-90-when-overlapping

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,

Durga Gopalakrishnan.