[SOLVED] How to Restrict Axis Scrolling Beyond Specific Values in LightningChartJS?

How to Restrict Axis Scrolling Beyond Specific Values in LightningChartJS?

I am working with LightningChartJS in a React application and am trying to limit the y-axis scrolling range so that the chart does not allow scrolling above or below specified values. I have already checked a similar solution here: Limit scrollable range in LightningChartJS and attempted to apply but without success.

Despite following the example in the documentation, the y-axis does not restrict the user from scrolling to any value they desire. Here is the code snippet I am working with:

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

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

    // Attempt to set minimum zoom level
    axisY.setIntervalRestrictions({ intervalMin: -10 });
    // Attempt to set maximum zoom level
    axisY.setIntervalRestrictions({ intervalMax: 40 });
  }, []);

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

export default App;

Solution