JSFiddle - React, Tailwind, and code Playground

by Elio Bischof

HTML

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

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

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

$(function () {

    /**
     * Experimental Highcharts plugin to implement chart.alignThreshold option. This primary axis
     * will be computed first, then all following axes will be aligned to the threshold.
     * Author: Torstein Hønsi
     * Last revision: 2015-05-18
     */
(function (H) {
    var Axis = H.Axis,
        inArray = H.inArray,
        wrap = H.wrap;


    wrap(Axis.prototype, 'adjustTickAmount', function (proceed) {
        var chart = this.chart,
            primaryAxis,
            primaryThreshold,
            primaryIndex,
            index,
            newTickPosLow,
            threshold,
            newTickPositionsHigh,
            max,
            nextStep;

        // Find the index and return boolean result
        function isAligned(axis) {
            index = inArray(threshold, axis.tickPositions); // used in while-loop
            return axis.tickPositions.length === axis.tickAmount && index === primaryIndex;
        }


        for(var i = chart[this.coll].length - 1; i >= 0; i--){

            chart[this.coll][i].removePlotLine('zero-point-plotline');

            if(chart[this.coll][i].hasVisibleSeries){
                primaryAxis = chart[this.coll][i];
            }
        }

        primaryThreshold = (primaryAxis.series[0] && primaryAxis.series[0].options.threshold) || 0;

        threshold = 0;
        for(var i = 0; i < this.series.length; i++){
            if(this.series[i].visible){
                threshold = this.series[i].options.threshold;
                break;
            }
        }

        primaryIndex = primaryAxis.tickPositions && inArray(primaryThreshold, primaryAxis.tickPositions);

        if(primaryIndex > 0 && primaryIndex < primaryAxis.tickPositions.length - 1){
            primaryAxis.addPlotLine({
                color: 'black',
                value: 0,
                width: 3,
                id: 'zero-point-plotline',
                zIndex: 3
            })
        }

        if...