Label not appearing when there are not enough space

[Julien Barach]

Hi,

I've a dynamic chart with a dynamic number of columns and where there are too much columns with long labels, the labels disappears.

Please see the repro here and play with the splitter to make the last labels disappearing : https://blazorplayground.syncfusion.com/rZrfNwMESnXvVutL

Regards,

Julien

[Durga Gopalakrishnan]

Hi Julien,

Greetings from Syncfusion.

We have ensured your reported scenario with attached sample. By default, when current data label overlaps with another data label then it will be hidden automatically. It is the default behavior. You can customize the data label text based on your requirement using OnDataLabelRender event.

<SfChart>   

    <ChartEvents OnDataLabelRender="LabelRender"></ChartEvents>

</SfChart>

UG : https://blazor.syncfusion.com/documentation/chart/events#ondatalabelrender

Regards,

Durga Gopalakrishnan.

[Julien Barach]

Hi,

Thanks for you answer.

I don't know what to do with that event. Some labels are not rendered, how do I identify those that are not rendered and how do I render them ?

The component is able to detect overlaps and decides to hide labels but what if we still want to display labels (e.g. with a gap or a top/bottom margin) ?

Regards.

[Durga Gopalakrishnan]

Julien,

#1 : how do I identify those that are not rendered and how do I render them ?

You can change the data label by checking its width with the current column rectangle width. If data label width is more, then you can customize it as per your need. For an example, we have converted the large number to readable format using OnDataLabelRender event. Please check with the below snippet and screenshot.

@using System;

@using System.Drawing;

@using System.Globalization;

<SfChart>  

    <ChartEvents OnDataLabelRender="LabelRender"></ChartEvents>

</SfChart>

public void LabelRender(TextRenderEventArgs args)

{

    double width;

    int fontSize = Convert.ToInt16(args.Font.Size.Replace("px", "").Trim());

    Font font = new Font(args.Font.FontFamily, fontSize);

    using (Bitmap bitmap = new Bitmap(1, 1))

    {

        using (Graphics graphics = Graphics.FromImage(bitmap))

        {

            SizeF size = graphics.MeasureString(args.Text,font);

            width = size.Width;

        }

    }

    if(width> args.Point.Regions[0].Width)

    {

        string text = args.Text;

 

        string numberString = text.Replace("%", "");

        double result = Convert.ToDouble(numberString, CultureInfo.InvariantCulture);

        string formattedNumber = ConvertToReadableFormat(result);

        args.Text = formattedNumber+"%";

    }

 

}

static string ConvertToReadableFormat(double number)

{

     if (number >= 1_000_000_000_000)

         return (number / 1_000_000_000_000.0).ToString("0.##") + "T";

     else if (number >= 1_000_000_000)

         return (number / 1_000_000_000.0).ToString("0.##") + "B";

     else if (number >= 1_000_000)

         return (number / 1_000_000.0).ToString("0.##") + "M";

     else if (number >= 1_000)

         return (number / 1_000.0).ToString("0.##") + "K";

     else

         return number.ToString();

}

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

#2 : The component can detect overlaps and decides to hide labels but what if we still want to display labels (e.g. with a gap or a top/bottom margin) ?

You can use different data label position to view the labels, but in this case, if it overlaps with another label, it will be hidden automatically. So, we suggest you to enable rotation for data label to view whole text.

<ChartDataLabel EnableRotation="true" Angle="90"></ChartDataLabel>

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

Please let us know if you have any concerns.

[Julien Barach]

Hi,

That's a workaround that certainly works but I'm not going to implement that each time I have charts.

Furthermore I don't know in advance what the labels are so I cannot shorten them this way.

Is it possible to provide more feedback and utilities about overlapping ?

The labels are hidden by default but maybe we could decide with a settings property if we want to hide or display overlaps ?

And in the TextRenderEventArgs we could have a bool property "IsHidden" that gives feedback so we can decide what to do about the label, change it or move its position and then set IsHidden to false.

Is this possible to add that ?

Regards.

[Durga Gopalakrishnan]

Julien,

#1 : The labels are hidden by default but maybe we could decide with a settings property if we want to hide or display overlaps ?

We have the LabelIntersectAction property which is used to hide the overlapped labels or display all labels with overlap. Currently it is not working properly. So, we have considered this case as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 6th August 2024. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback : https://www.syncfusion.com/feedback/59844/chart-datalabel-labelintersectaction-none-is-not-working

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.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

#2 : In the TextRenderEventArgs we could have a bool property "IsHidden" that gives feedback so we can decide what to do about the label, change it or move its position and then set IsHidden to false.

Adding a boolean property isHidden in TextRenderEventArgs is not required after resolving the above case.

Please let us know if you have any concerns.

[Durga Gopalakrishnan]

Julien,

We are glad to announce that our v26.2.8 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.Charts NuGet package.

Root Cause:

The data label is not calculated properly when the LabelIntersectAction is set to "None".

Fix:

Checked the LabelIntersectAction property value and then calculated the data label using the appropriate overlapping method.

NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.Charts/

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

Feedback : https://www.syncfusion.com/feedback/59844/chart-datalabel-labelintersectaction-none-is-not-working

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.