nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Trouble in making a simple timeseries chart look nice by default

Hi,
See this reproducer - https://jsfiddle.net/rq1x9c8e/3/

Issues -

- The last x-axis label is cut-off and is shown with ellipses, is there a way to show it? I tried labels.overflow=allow still it cuts off labels. I could rotate the labels, but checking if there is a better and generic solution.

- If I add yAxis title - https://jsfiddle.net/rq1x9c8e/2, then only 3 ticks are shown, which is very different than the first reproducer, even though everything is exactly the same. I could turn off ordinal or set ticks at custom positions but wanted to check for generic solution that can be used to make this simple chart look nicer in both cases.

Thanks!
nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Re: Trouble in making a simple timeseries chart look nice by default

I am looking for a solution in the direction where we know beforehand that chart will be rendered with abnormal ticks (depending upon width and nature of data), so we can pass ticks or other options appropriately.
User avatar
dawid.d
Posts: 828
Joined: Thu Oct 06, 2022 11:31 am

Re: Trouble in making a simple timeseries chart look nice by default

Hello,

Thanks for contacting us with your question!

1. The problem is that the SVG text element cannot extend beyond the container. This can be easily circumvented by adding a margin to the right so that the label fits. See: https://jsfiddle.net/BlackLabel/7tLzbsj9/

2. The option that causes this behavior is ordinal set to true (this is the default in stock charts). You can turn it off as you said or find a workaround, e.g. a specific `tickInterval` value: https://jsfiddle.net/BlackLabel/njyd5uot/

It's a matter of the fact that in the case of the ordinal option enabled, ticks on xAxis may not be evenly distributed and this causes some problems - https://jsfiddle.net/BlackLabel/6q37bk01/.
If you think this shouldn't be the case, please report it to our GitHub here: https://github.com/highcharts/highchart ... new/choose

​If you have further inquiries, you may reach out to me at any time.
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Stock”