JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container"></div>

CSS

#container {
  width: 800px;
  height: 500px;
}

JavaScript

const random = (min, max) => Math.round(Math.random() * (max - min) + min)
const noise = (arr) => arr.map((v) => random(v - 2, v + 2))

// Number of points
const n = 18
const data = [10, 20, 30, 40, 30, 20, 10]

const options = {
  plotOptions: { spline: { animation: false } },
  legend: { enabled: false },
  credits: { enabled: false },
  chart: { type: 'spline', height: 550 },
  title: { text: 'Scroll to show or hide series', x: 70 },
  yAxis: [...Array(n)].map((u, i) => ({ min: 0, max: 60, gridLineColor: 'transparent', visible: false, top: 50 + i * 15, left: 50 + (n-i) * 10, height: 197})),
  xAxis: [...Array(n)].map((u, i) => ({visible: false, left: 50 + (n-i) * 10, top: i*15 -200, width: 500 })),
  series: [...Array(n)].map((u, i) => ({ xAxis: i, yAxis: i, data: noise(data) }))
}

// Display x and y axis for last series
options.xAxis[options.xAxis.length - 1].visible = true
options.yAxis[options.yAxis.length - 1].visible = true

// Create chart
const chart = Highcharts.chart('container', options)

// Update series on mousewheel event
let index = n - 1
window.addEventListener('mousewheel', function(e) {
  if (e.deltaY < 0 && index > 0) {
    // xAxis
    chart.xAxis[index].update({ visible: false }, false)
    index > 0 && chart.xAxis[index - 1].update({ visible: true, }, false)
    // yAxis
    chart.yAxis[index].update({ visible: false }, false)
    index > 0 && chart.yAxis[index - 1].update({ visible: true }, false)

    chart.series[index].hide()
    index--
  }
  if (e.deltaY > 0 && index < n) {
    // xAxis
    index > 0 && chart.xAxis[index - 1].update({ visible: false }, false)
    chart.xAxis[index].update({ visible: true }, false)
    // yAxis
    index > 0 && chart.yAxis[index - 1].update({ visible: false }, false)
    chart.yAxis[index].update({ visible: true }, false)

    chart.series[index].show()
    index + 1 < n && index++
  }
});