JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id='div-impactTolerance'>

</div>

JavaScript

var chart;
chart = Highcharts.chart('div-impactTolerance', {
    chart: {
        type: 'line',
        inverted: true,
        events: {
            load: function() {
                console.log(this)
                var check = $('#div-impactTolerance').highcharts();
                var min = check.yAxis[0].min;
                var max = check.yAxis[0].max;
                var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
                if (pLine > max) {
                    check.yAxis[0].setExtremes(null, pLine);
                }
                if (pLine < min) {
                    check.yAxis[0].setExtremes(pLine, null);
                }
            }
        }
    },
    tooltip: {
        formatter: function() {
            var formatter = this.y > 1 ? ' days' : ' day';
            var header = '<span style="font-size: 10px">' + this.key + '</span><br/>';
            var point = this.series.name + ': <b>' + this.y + formatter + '</b><br/>';
            return header + point;
        }
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Impact Tolerance'
    },

    xAxis: [{
            title: {
                text: "Severity"
            },
            gridLineWidth: 1,
            categories: ['Very High', 'High', 'Medium', 'Low']
        },


        {
            visible: true,
            title: {
                text: "T"
            },
            gridLineWidth: 1,
            categories: [1, 2, 3, 4],
            opposite: true
        },
    ],
    yAxis: {
        tickInterval: 1,
        allowDecimals: false,
        title: {
            text: "Time (days)"
        },

        min: 0,
        gridLineWidth: 0,
        minPadding: 0.30,
        plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 6,
            dashStyle: 'longdashdot',
            label: {
                text: 'Impact Tolerance ',
                verticalAlign: 'middle',
               ...