Highcharts Demo

author(s): Torstein Hønsi

by Nhi Nguyen

HTML

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

<div id="container1"></div>
<!-- <div id="container2"></div> -->

JavaScript

let chart1,
    chart2,
    chartObj;

  chartObj = Highcharts.chart('container1', {

    chart: {
      scrollablePlotArea: {
        minWidth: 2500,
      },

    },

    series: [{
      data: [1, 2, 3, 4, 5, 6, 7]
    }]
  });

  chartObj2 = Highcharts.chart('container1', {

    chart: {
      scrollablePlotArea: {
        minWidth: 2500,
      },
    },

    series: [{
      data: [10, 20, 30, 40, 50, 60, 70]
    }]
  });



  let scroll = document.getElementsByClassName("highcharts-scrolling");

  scroll[0].addEventListener('scroll', () => {

    chartObj1.scrollingContainer.scrollLeft = chartObj1.scrollingContainer.scrollLeft
  })
  scroll[1].addEventListener('scroll', () => {
    chartObj2.scrollingContainer.scrollLeft = chartObj2.scrollingContainer.scrollLeft
  })