On zoom, axis number line should round off 2 decimal precision.

[kunalrjain]

Hi,

I found few issues or enhancements in this component.

Actual Behavior

• On Zooming, numbers on scale are overlapping with axis.
• If value is huge it will overlap with axis label (for Y axis) and adjacent value (for X axis).
• Data points are getting clipped at edges.

Expected behavior

• We can round off values to 2 decimal precision to fix this issue.
• If value is huge, we can dynamically translate it to more readable format. For ex 10,000 can be converted to 10k, 10,00,000 can be converted to 1M. This will be more readable
• We can have padding so that entire data point can be visible to user.

Click on zoom icon.

Environment

All environments.

Screenshots

Issue 1 and Issue 2

Issue 3

[benoitjchevalier]

1 and 2 can be done through tickFormat in axisConfig. You can find more information in the API of px-vis-axis in the vis framework guide: https://www.predix-ui.com/#/components/px-vis/ (select px-vis-axis in the dropdown at the top).

I'm not sure what we want to do about 3, this is done on purpose for different reasons, mostly that the chart might be drawing some things on the right (in the case of a multi Y axis chart for example). It would be possible to add a feature to pass some kind of clippath padding but I'm not sure how useful that would be and how much we would prioritize it.

[kunalrjain]

"tickFormat": Px.d3.format(".2s") in axisConfig fixed my issue. It would be great if we can have this as part of demo page.

Thank you !!