JSFiddle - React, Tailwind, and code Playground

by Chitkala More

HTML

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

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

CSS

#container {
  width: 640px;
  height: 360px;
}

JavaScript

const options = {
	chart: {
  	type: 'column',
    panning: true,
    events: {
    	load: function () {
      	const chart = this
        const moveLeft = () => {
          let {min, max, dataMin} = chart.xAxis[0].getExtremes()
          if (min - 3 >= dataMin) {
          	min -= 3
            max -= 3
          }
        	chart.xAxis[0].setExtremes(min, max)
        }
        const moveRight = () => {
          let {min, max, dataMax} = chart.xAxis[0].getExtremes()
          if (max + 3 <= dataMax) {
          	min += 3
            max += 3
          }
        	chart.xAxis[0].setExtremes(min, max)
        }
        const leftArrowUrl = 'https://egiveusa.com/appdev/images/icons/icomoon/svg/arrow-left3.svg'
        const rightArrowUrl = 'http://egiveusa.com/appdev/images/icons/icomoon/svg/arrow-right3.svg'
        const leftArrow = chart.renderer.image(leftArrowUrl, 0, 150, 30, 30).attr({ zIndex: 10 })
        const rightArrow = chart.renderer.image(rightArrowUrl, 600, 150, 30, 30).attr({ zIndex: 10 })
        leftArrow.on('click', moveLeft).add()
        rightArrow.on('click', moveRight).add()
      }
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    max: 2
  },
  yAxis: {
  	title: {
    	text: '·'
    }
  },
  series: [...Array(5)].map(() => {
    return {
      data: [...Array(12)].map(() => Math.round(Math.random() * 300))
    };
  })
}

const chart = Highcharts.chart('container', options);