Make X axis labels rotation angle more customizable

Hey guys,

We are enjoying using ngx-charts and we’d like to contribute a couple of things that would make charts more configurable.

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior The labels of the x axis are rotated automatically, and cannot be adjusted.

Expected behavior We would like to define the rotation angle only if it is necessary. For this reason, we would expect the possibility to use the rotation by default, but have the option of disabling it if needed based on input to the XAxisTickComponent.

Reproduction of the problem If the width of the chart changes, the rotation angle of the labels change as well.

What is the motivation / use case for changing the behavior? The motivation for this feature is to be able to customize the style of the axis in a lower level.

• ngx-charts version: x.x.x 6.1.0

• Angular version: 2.x.x 4.3.1

• Browser: Chrome XX

• Language: TypeScript 2.3.4

If possible, we would gladly make a PR to your project to enable this feature.

[marjan-georgiev]

Sounds good, let’s do it!

Are you using the axis components in a custom chart? Or do you plan to add this change to all charts that have axes?

[michaelbanck]

Maybe I am overlooking something, but isn’t that quite easy to achieve with CSS? So as a workaround something like that:

::ng-deep .tick text { transform: rotate(-40deg); }