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>
<div id="container3"></div>

JavaScript

let chart1,
    chart2,
    chart3;

  chart1 = Highcharts.chart('container1', {

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

    },

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

  chart2 = Highcharts.chart('container2', {

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

    series: [{
      data: [10, 20, 30, 40, 50, 60, 70]
    }]
  });
chart3 = Highcharts.chart('container3', {

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

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


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

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

    chart2.scrollingContainer.scrollLeft = chart1.scrollingContainer.scrollLeft
     chart3.scrollingContainer.scrollLeft = chart1.scrollingContainer.scrollLeft
  })
  scroll[1].addEventListener('scroll', () => {
    chart1.scrollingContainer.scrollLeft = chart2.scrollingContainer.scrollLeft
    chart1.scrollingContainer.scrollLeft = chart3.scrollingContainer.scrollLeft
  })
  scroll[2].addEventListener('scroll', () => {
    chart3.scrollingContainer.scrollLeft = chart2.scrollingContainer.scrollLeft
    chart3.scrollingContainer.scrollLeft = chart1.scrollingContainer.scrollLeft
  })