JSFiddle - React, Tailwind, and code Playground

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() {
					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: false,
	     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',
					textAlign: 'center',
					
					x: -15
				},
			}]
		},
		series: [
		{
			name: 'Scenario Testing',
			states: {
				hover: {
					enabled: false
				}
			},
			//data: [5,7,9,11,12,14,17,18],
      data:[
      [1,1],
      [2,1],
      [3,1],
      [4,1],
      [5,1],
      [6,1],
      ],
      xAxis: 1,
			lineWidth: 0,
			showInLegend: true,
			marker: {
				radius: 10
			},
			threshold: 6,
			negativeColor: 'green',
			color: 'red',
			tooltip: {
				valueDecimals: 2
			}
		},
					{
			name: 'Outage Duration',
			states: {
				hover: {
					enabled:...