Make X axis labels rotation angle more customizable

[augusten]

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?

[amejiarosario]

@augusten @marjan-georgiev any news on this? This will greatly help my chart with overlapping labels

[ramya0311]

@augusten @marjan-georgiev I am in need of this feature as well. Would be helpful if you could provide a timeline for this feature.

[popoleeMaster]

Bump for this very usefull request

[supunvindula]

Really useful request

[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); }

[ZeeshanIbrahim1]

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); }

I found this very useful, but the issue with it is that it rotates both the x-label and y-label. What if someone only wants to target one label?

[SeymourRu]

I found this very useful, but the issue with it is that it rotates both the x-label and y-label. What if someone only wants to target one label?

I was able to fix with the following css style rule:

::ng-deep .tick text[text-anchor='middle'] { transform: rotate(-90deg); }