Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Depth chart: overlapping x-axis labels #1021

Closed
runeksvendsen opened this Issue Mar 1, 2019 · 4 comments

Comments

Projects
None yet
2 participants
@runeksvendsen
Copy link

runeksvendsen commented Mar 1, 2019

Using this data for the depth chart, the price labels on the x-axis overlap each other:
screenshot 2019-03-01 at 13 47 51

Here's the Codepen example: https://codepen.io/anon/pen/rRxKjE (taken from the chart demo site and modified to use the data that causes the issue).

@martynasma martynasma added the question label Mar 1, 2019

@runeksvendsen

This comment has been minimized.

Copy link
Author

runeksvendsen commented Mar 2, 2019

Thank you for the quick reply!

If I increase minGridDistance to 100 for the x-axis, the labels no longer overlap:
screenshot 2019-03-02 at 09 24 01

However, the reason the labels overlap in the first place is that the precision of the x-axis labels is way too high (e.g. 3,981.2083). Is there a way to adjust the precision of the labels, so that e.g. 3,981.2083 is displayed as 3,981 (ie. with four significant digits?).

A nice interface to this would being able to supply a function that's applied to each a label value before it's displayed. Like:

var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
xAxis.renderer.labelFormatFn = function (x) {
    return Number.parseFloat(x).toPrecision(4);
};

As far as I can see from reading the formatting numbers article, I can't adjust the number of significant digits, so that the number formatter makes sense both for input like 0.23432447292743 and 6384.324234 (which would become 0.2343 and 6384, respectively.

@martynasma

This comment has been minimized.

Copy link
Collaborator

martynasma commented Mar 4, 2019

Well, since this particular demo uses CategoryAxis, no formatting on labels is applied. Category axis treats all labels as strings, not numbers.

I suppose you could add an adapter to category axis' labels to round those numbers.

xAxis.renderer.labels.template.adapter.add("textOutput", function(text, target) {
  return Math.round(target.dataItem.category).toString();
});
@runeksvendsen

This comment has been minimized.

Copy link
Author

runeksvendsen commented Mar 5, 2019

Wonderful! Thanks a lot. This was exactly what I was looking for.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.