How to enable default browser scroll behavior for lightningChartJs?

Question

I'm using LightningChartJs v. 1.3.1. and have a chart on a page that is scrollable.

When the mouse pointer is over the chart, the page is no longer scrollable.

I tried with chart.setMouseInteractions(false) without success.

Tried on a Mac with touchpad. Not sure if it is the same behavior with a mouse wheel.

Please see the example below:

 const { lightningChart, AxisTickStrategies } = lcjs const chart = lightningChart().ChartXY({ containerId: "chart", defaultAxisXTickStrategy: Object.assign({}, AxisTickStrategies.Numeric) }); chart.setMouseInteractions(false);

 .wrapper { with: 100%; height: 1000px; background: #FFFFF0; } h1 { text-align: center; margin-bottom: 200px; padding: 20px; }

 <div class="wrapper"> <h1>Please scroll down!</h1> <div id="chart"></div> </div> <script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>

Answer 1

This is a known issue in LightningChart JS v1.3.1 and lower. It has been fixed in v2.0.0 and higher.

I copied the example you used but switched it to use LightningChart JS v2.0.2 and the page can be scrolled. The mouse and touch events are passed through the chart for default browser behavior when the mouse/touch event didn't raise any action inside the chart. If the chart does an action with the event, then the event is stopped inside the chart. This makes the usage easy and intuitive.

 const { lightningChart, AxisTickStrategies } = lcjs const chart = lightningChart().ChartXY({ container: "chart" }); chart.setMouseInteractions(false);

 .wrapper { with: 100%; height: 1000px; background: #FFFFF0; } h1 { text-align: center; margin-bottom: 200px; padding: 20px; }

 <div class="wrapper"> <h1>Please scroll down!</h1> <div id="chart"></div> </div> <script src="https://unpkg.com/@arction/lcjs@2.0.2/dist/lcjs.iife.js"></script>

Alternatively you could attach a listener to the chart container div and simulate scrolling when a wheel event is received. I don't think that is a good solution but if upgrading to LightningChart JS v2.0.2 isn't an option then this would be the only way to do this.

 const { lightningChart, AxisTickStrategies } = lcjs const chart = lightningChart().ChartXY({ containerId: "chart" }); chart.setMouseInteractions(false); const container = document.getElementById('chart') container.addEventListener('wheel', (ev) => { if (ev.deltaMode === 1 && window.scrollByLines) { window.scrollByLines(ev.deltaY) } else { window.scrollBy(ev.deltaX, ev.deltaY) } })

 .wrapper { with: 100%; height: 1000px; background: #FFFFF0; } h1 { text-align: center; margin-bottom: 200px; padding: 20px; }

 <script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script> <div class="wrapper"> <h1>Please scroll down!</h1> <div id="chart"></div> </div>