JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button class="btn">
  redrawChart
</button>

JavaScript

$(function() {
  var drawLines = function(chart) {
    $('.path').remove();
    var x, lowY, highY,
      plotLeft = chart.plotLeft,
      plotTop = chart.plotTop;
    if (chart.series[0].visible && chart.series[1].visible) {
      Highcharts.each(chart.series[2].data, function(p, i) {
        x = chart.series[0].data[i].plotX;
        highY = chart.series[0].data[i].plotY;
        lowY = chart.series[1].data[i].plotY;
        chart.renderer.path(['M', x + plotLeft, highY + plotTop, 'L', x + plotLeft, lowY + plotTop])
          .attr({
            'stroke-width': 1,
            stroke: 'green',
            //dashstyle: 'LongDash'
          }).addClass('path')
          .add();
      });
    }
  };
  $('#container').highcharts({
    chart: {
      events: {
        load: function() {
          drawLines(this);
        },
        redraw: function() {
          drawLines(this);
        },
      }
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul'
      ]
    },
    series: [{
      name: 'High',
      type: 'scatter',
      data: [5, 7, 9, 5, 6, 10, 9]
    }, {
      name: 'Low',
      type: 'scatter',
      data: [1, 3, 5, 3, 2, 4, 7]
    }, {
      name: 'Average',
      data: [3, 5, 7, 4, 4, 7, 8]
    }]
  }, function(chart) {
    $('.btn').click(function() {
      chart.setSize(500, 300);
    })
  });
});