Category axis label visual function doesn't work as expected

3 posts, 0 answers
  1. Pedro
    Pedro avatar
    2 posts
    Member since:
    Aug 2020

    Posted 31 Aug Link to this post

    I'm using a RadarChart to display some data that can have long category labels. These labels happen to overlap because of their width. Using the following tips:

    https://www.telerik.com/kendo-angular-ui/components/charts/how-to/axis-labels-tooltip/

    https://www.telerik.com/forums/show-ellipsis-in-chart-labels-for-long-texts

    I tried using an ellipsis with a tooltip for the labels. It works but the placement of the category labels is off. The following stackblitz shows the problem:

    https://stackblitz.com/edit/angular-hpn8at-duj2f1?file=app/app.component.ts

  2. Martin
    Admin
    Martin avatar
    252 posts

    Posted 02 Sep Link to this post

    Hi Pedro,

    Thank you for the provided feedback.

    Indeed this is an issue on our side. That is why I logged a bug report in our public GitHub repository, that can be tracked at the following link:

    https://github.com/telerik/kendo-angular/issues/3053

    Once fixed the issue status will be updated. As a small token of gratitude for reporting the bug, I have updated your Telerik points.

    As a workaround, add a little padding by following this approach:

    public visual = (e: AxisLabelVisualArgs): any => {
        const visual = e.createVisual();
        const padding = new Rect(e.rect, { stroke: { width: 0 } });
        const group = new Group();
        group.append(padding, visual);
    
        if (e.value.length > 3) {
          // Remove the if-condition if you want to show the tooltip for all the labels
          (<any>visual).tooltip = e.value;
        }
    
        return group;
      };
     

    https://stackblitz.com/edit/angular-hpn8at-z3bsp8?file=app/app.component.ts

    Please accept our apologies for the caused inconvenience until the issue is resolved.

    Regards,
    Martin
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Pedro
    Pedro avatar
    2 posts
    Member since:
    Aug 2020

    Posted 02 Sep in reply to Martin Link to this post

    It worked. Thanks for the help!
Back to Top