[X] bug report - search github for a similar issue or PR before submitting
[x] feature request
[ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions
Current behavior
As of today , when the xAxis trim is false and xAxis labels are more than a specified width, xAxis labels are roated and are shown at an angle(60 deg or so). But i could not find a way to display the full label without rotating the labels.
Expected behavior
Should be able to display label without rotated labels and with text wrap as shown.
Reproduction of the problem
Any charts in the demo site , change the label with a lengthy label.
What is the motivation / use case for changing the behavior?
I have a UX requirement where i cannot show the ellipsis on the chart xAxis label. Since the size of my container is very small , if the labels are rotated, the chart will not have sufficient space to display the data as shown.
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
I'm submitting a ... (check one with "x")
ngx-charts
tag) or the gitter chat for support questionsCurrent behavior
As of today , when the xAxis trim is false and xAxis labels are more than a specified width, xAxis labels are roated and are shown at an angle(60 deg or so). But i could not find a way to display the full label without rotating the labels.
Expected behavior
Should be able to display label without rotated labels and with text wrap as shown.![image](https://user-images.githubusercontent.com/8450434/54086795-b3008800-4372-11e9-8805-127a11175585.png)
Reproduction of the problem
Any charts in the demo site , change the label with a lengthy label.
What is the motivation / use case for changing the behavior? I have a UX requirement where i cannot show the ellipsis on the chart xAxis label. Since the size of my container is very small , if the labels are rotated, the chart will not have sufficient space to display the data as shown.
WIth ticks trimmed
With rotated labels![image](https://user-images.githubusercontent.com/8450434/54086821-1985a600-4373-11e9-8adf-21a5de7d9550.png)
Please tell us about your environment:
ngx-charts version: x.x.x 10.1.0
Angular version: x.x.x "@angular/animations": "~7.1.0", "@angular/common": "~7.1.0", "@angular/compiler": "~7.1.0", "@angular/core": "~7.1.0", "@angular/forms": "~7.1.0", "@angular/http": "~7.1.0", "@angular/platform-browser": "~7.1.0", "@angular/platform-browser-dynamic": "~7.1.0", "@angular/router": "~7.1.0", "@swimlane/ngx-charts": "^10.1.0", "bootstrap": "^4.1.3", "core-js": "^2.5.4", "crypto-js": "^3.1.9-1", "node-sass": "^4.10.0", "rxjs": "~6.3.3", "zone.js": "~0.8.26"
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Language: [all | TypeScript X.X | ES6/7 | ES5]