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 2020 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:

    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:

  2. Martin
    Martin avatar
    280 posts

    Posted 02 Sep 2020 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:

    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;

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

    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

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

    Posted 02 Sep 2020 in reply to Martin Link to this post

    It worked. Thanks for the help!
Back to Top