CODEWITHSUNDEEP
javascriptchartslightningchart
monkey-0001
monkey-0001

Reputation: 482

How to enable default browser scroll behavior for lightningChartJs?

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/[email protected]/dist/lcjs.iife.js"></script>

Upvotes: 0

Views: 109

Answers (1)

Snekw
Snekw

Reputation: 2620

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/[email protected]/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/[email protected]/dist/lcjs.iife.js"></script>

<div class="wrapper">
  <h1>Please scroll down!</h1>
  <div id="chart"></div>
</div>

Upvotes: 1

Related Questions