I am integrating LightningChartJS with ReactJS for a project where the precision of measurements is crucial. We require precision to whole numbers, one decimal digit, or two decimal digits, depending on the scenario. I need to prevent users from zooming in to a level where the chart displays more decimal places than supported, such as showing a value like 1.234 when we can only ensure precision to two decimal places.

I am looking to implement a function in React that limits the zoom level based on the required precision. Here’s a conceptual function I have in mind:

const limitDigits = (axis, limitDigitAfterDecimal) => {
  // Implementation needed here
  // 'limitDigitAfterDecimal' could be 0, 1, 2, etc.
}

Below is the basic setup of my chart in React:

import { useEffect } from "react";
import { lightningChart } from "@arction/lcjs";

function App() {
  useEffect(() => {
    const lc = lightningChart({
      license:
        "license",
    });
    const chart = lc.ChartXY({ container: "chart1" });
    chart.setTitle("");

  }, []);

  return (
    <div style={{ display: "flex" }}>
      <div id={"chart1"} style={{ width: "200px", height: "500px" }}></div>
    </div>
  );
}

export default App;

What I need help with:

• How can I implement the limitDigits function to control the zoom level based on the precision limit?

• How do I apply this function to the axis of the chart to enforce the maximum allowed decimals?

Here’s an example of how the chart looks when it’s zoomed in too much: