JSFiddle - React, Tailwind, and code Playground

by Sascha

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 {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

function addPointBetween (twoPoints) {
	const newPoint = {
  	x: (twoPoints[0].x + twoPoints[1].x) / 2,
  	y: (twoPoints[0].y + twoPoints[1].y) / 2
  }
	const threePoints = [twoPoints[0], newPoint, twoPoints[1]]
  return threePoints
}

function addPointsBetween (points) {
	let ret = []
  for (let i = 1; i < points.length; i += 1) {
    ret = [...ret, ...addPointBetween([points[i-1], points[i]])]
  }
  return ret
}

const options = {
  chart: {
    type: 'line',
    events: {
    	load () {
      	const chart = this
        const series = chart.series[0]
        const data = series.data.map(o => ({x: o.x, y: o.y}))
        const newData = addPointsBetween(data)
        series.setData(newData)
      }
    }
  },
  series: [{
    data: [...Array(10)].map(() => Math.round(Math.random() * 300))
  }]
}

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