VISX avoid floats on Y axis

Question

How to avoid floats on Y axis?

Note: I dont want to use Math.round since it breaks the axis. Is there anything in VISX similar to CHART.js precision?

Answer 1

You can format axis ticks without modifying the underlying data and breaking the axis, using tickFormat. tickFormat can consume any function that controls how ticks are labeled.

VisX is built on d3.js, you can read about its tickFormat function here: https://github.com/d3/d3-scale/blob/main/README.md#continuous_tickFormat

Here is an example axis:

// function, that controls tick format

const formatValue = (value) => Math.round(value)

// Axis code in you component <SVG /> container

<AxisLeft
    tickTextFill={'#EDF2F7'}
    stroke={'#EDF2F7'}
    tickStroke={'#EDF2F7'}
    scale={yourScale}
    tickFormat={formatValue}
/>