Overlapping vertical axis custom labels

4 posts, 0 answers
  1. Viollier
    Viollier avatar
    4 posts
    Member since:
    Jul 2016

    Posted 27 Oct Link to this post

    Hi there,

    i have a line chart with custom labels on the vertical axis. Sometimes, the labels values are very close to each other, so the text overlaps (please see the attached file). Is there any way to solve this automatically?

     

    Thanks!

  2. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 01 Nov Link to this post

    Hello Viollier,

    Could you, please, send us a code snippet of your chart setup, that will ease us greatly in finding the cause of the issue.

    Looking forward to hearing from you. 

    Regards,
    Sophi
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. Viollier
    Viollier avatar
    4 posts
    Member since:
    Jul 2016

    Posted 03 Nov Link to this post

    Hi Sophi,

    thanks for the reply! The issue appears when the custom labels' values are too close to each other. Here is how i customize the vertical axis:

     

    void AddChartBandAnnotation()
    {
        var range = GetChartBandRange();
        var fillColor = new UIColor(0.83f, 0.92f, 0.88f, 0.6f);
        var strokeColor = new UIColor(0.6f, 0.85f, 0.76f, 0.8f);
        var fill = new TKSolidFill(fillColor);
        var stroke = new TKStroke(strokeColor, 1.5f);
        var annotation = new TKChartBandAnnotation(range, Chart.YAxis, fill, stroke);
        Chart.RemoveAllAnnotations();
        Chart.AddAnnotation(annotation);
     
        //apparently, by not clearing the labels before, the new ones don't show up correctly
        Chart.BeginUpdates();
        Chart.YAxis.CustomLabels = new NSDictionary();
        Chart.EndUpdates();
     
     
        var labels = GetVerticalAxisLabels();
        if (labels.Count > 0)
        {
            Chart.YAxis.CustomLabels = labels;
            Chart.YAxis.Style.LabelStyle.TextAlignment = TKChartAxisLabelAlignment.Left;
            Chart.YAxis.Style.LabelStyle.FirstLabelTextAlignment = TKChartAxisLabelAlignment.Left;
            Chart.YAxis.Style.LabelStyle.TextOffset = new UIOffset(2, 0);
            Chart.YAxis.Style.LabelStyle.FirstLabelTextOffset = new UIOffset(2, 0);
            Chart.YAxis.Style.LabelStyle.TextHidden = false;
     
        }
        else
        {
            Chart.YAxis.Style.LabelStyle.TextHidden = true;
        }
     
     
        Chart.YAxis.AllowPan = false;
        Chart.YAxis.AllowZoom = false;
     
        Chart.Update();
     
    }
     
     
    NSDictionary GetVerticalAxisLabels()
    {
        NSMutableDictionary dictionary = new NSMutableDictionary();
        var labels = ChartModel.Labels;
     
        foreach (KeyValuePair<double, ValueType> entry in labels)
        {
            UIColor color = UIColor.Black;
            dictionary.Add(new NSNumber(entry.Key), color);
        }
     
        return dictionary;
    }
  5. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 08 Nov Link to this post

    Hi Violler,

    If the values are too close to each other(the difference between the is very small) it is expected to observe some overlapping. 

    You can try setting different offset values or rotation angle of the labels (these all are properties of the labelStyle you have used to style the axis), or maybe smaller font size. 

    If that doesn't work maybe you should consider showing less labels or changing the range of the axis.


    Regards,
    Sophi
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner