I’m working with LightningchartJS and have set up two charts side-by-side. I am syncing their yAxis to align them vertically. I’ve made the yAxis of the right chart invisible. However, this causes the yAxis grid lines on the right chart to also disappear, which misaligns the grid lines between the two charts.

How can I hide the yAxis on the right chart but keep its grid lines visible to maintain alignment with the left chart?

Here’s an example image of the issue:

code

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

function App() {
  useEffect(() => {
    const lc = lightningChart({
      license:
        "license",
    });
    const chart = lc.ChartXY({ container: "chart1" });
    chart.setTitle("");
    const axisX = chart.getDefaultAxisX();
    const axisY = chart.getDefaultAxisY();
    axisY.setVisible(true);

    const chart2 = lc.ChartXY({ container: "chart2" });
    chart2.setTitle("");
    const axisX2 = chart2.getDefaultAxisX();
    const axisY2 = chart2.getDefaultAxisY();
    axisY2.setVisible(false);

    synchronizeAxisIntervals(axisY, axisX2);
  }, []);

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

export default App;

Thanks for your help!