I have 5 different line charts being rendered in my React app. Below is one of the methods to create those charts.

` function createEcgHeartRateChart(
response: any,
startInterval: string,
endInterval: string
) {
response?.sort(
(a, b) =>
new Date(a.resource.effectiveDateTime).getTime() –
new Date(b.resource.effectiveDateTime).getTime()
);

const chart = lc
  .ChartXY({
    theme: Themes.darkGold,
  })
  .setTitle("ECG Heart Rate")
  .setMouseInteractions(false);

chart
  .getDefaultAxisX()
  .setInterval({
    start: new Date(subtractUTC530(startInterval)).getTime(),
    end: new Date(subtractUTC530(endInterval)).getTime(),
  })
  .setTickStrategy(AxisTickStrategies.DateTime)
  .setMouseInteractions(false);

chart
  .getDefaultAxisY()
  .setInterval({ start: 60, end: 100 })
  .setMouseInteractions(false);

let ecgHeartRate: any[] = [];

response?.forEach((item) => {
  item?.resource?.component?.forEach((pastData) => {
    if (pastData?.code?.coding[0]?.code === "ecgHeartRate") {
      ecgHeartRate.push({
        x: new Date(
          subtractUTC530(item?.resource?.effectiveDateTime)
        ).getTime(),
        y: parseInt(pastData?.valueString),
      });
    }
  });
});

chart.addPointLineSeries().setName("").setPointSize(10).add(ecgHeartRate);
// .setCursorResultTableFormatter(
//   (tableBuilder, series, x, y, dataPoint) => {
//     return tableBuilder
//       .addRow(series.getName())
//       .addRow(`Time:`, "", dataPoint.x.toFixed(1))
//       .addRow(`Value:`, "", dataPoint.y.toFixed(1));
//   }
// );

ecgHeartRate?.map((item) => {
  return chart
    .addUIElement(UIElementBuilders.TextBox, {
      x: chart.getDefaultAxisX(),
      y: chart.getDefaultAxisY(),
    })
    .setPosition({ x: item?.x, y: item?.y })
    .setVisible(true)
    .setText(item.y.toString())
    .setMouseInteractions(false);
});

const ecgChartContainer = document.getElementById("ecg-heart-rate-chart");
if (ecgChartContainer) {
  ecgChartContainer.replaceChildren(chart.engine.container);
  ecgChartContainer.onscroll = () => {
    chart.engine.layout();
  };
}

}
`

JSX:

The issue I am facing is the the charts become uninteractable when scrolling on the page. Came around this: chart-is-not-interactable/

Added the logic as per doc, but still the charts are uninteractable.

Lightnintchart JS Version: "@arction/lcjs": "^5.0.5"

Is there a way to fix these?

I tried adding the logic to tell the chart that the page is scrolling as per docs. But didn’t work.