JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 750px; margin: 0 auto"></div>

JavaScript

$(function() {
    
/* Create sample data */
var messagesData = [], connectionsData = [];
  
function fabricateInterval(start, end, interval, periodAdjuster) {
    for (var time = start; time < end; time += interval) {
        var messageVal = Math.round(Math.random()*100000);
        if (periodAdjuster) { messageVal = Math.round(messageVal / periodAdjuster); }
        messagesData.push([time, messageVal]);
        connectionsData.push([time, Math.round(Math.random()*10000)]);
    }
}
    
var now = new Date().getTime(),
    minuteInMs = 60 * 1000,
    hourInMs = 60 * minuteInMs,
    dayInMs = 24 * hourInMs,
    fromTime = now - 720 * dayInMs;

/* Intervals by day until 14 days ago */
fabricateInterval(fromTime, now - 15 * dayInMs, dayInMs, 1);
    
/* By hour until 8 hours ago */
fabricateInterval(now - 15 * dayInMs, now - (8 * hourInMs), hourInMs, 60);

/* By minute until now */
fabricateInterval(now - (8 * hourInMs), now, minuteInMs, 3600);
/* End of create sample data */
    
var getUnitFromRangeStart = function(startTime) {
    var hourInMs = 60 * 60 * 1000;
    if (startTime < now - 14 * 24 * hourInMs) {
        return 'day';        
    } else if (startTime < now - 8 * hourInMs) {
        return 'hour';
    } else {
        return 'minute';
    }
};

var initializedData = false;
    
var chart = new Highcharts.StockChart({
    chart: {
        renderTo: $('#container')[0],
        events: {
            redraw: function() {
                if (!initializedData) { return; }
                if (!chart.series[0]) { return; }
                
                var currentUnits = chart.series[0].options.dataGrouping.units[0][0],
                    extremes = chart.xAxis[0].getExtremes(),
                    targetUnit = getUnitFromRangeStart(extremes.min);
                              
                if (currentUnits !== targetUnit) {
                    console.log('Changing interval from ' + currentUnits + ' to ' + targetUnit);
                    /* Change...