Category axis label visual function doesn't work as expected

[Pedro]

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

[Martin]

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

[Pedro]

It worked. Thanks for the help!