JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div style="position:relative">
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;background:white"></div>
</div>

CSS

.marker-big { color: #fff;font-family: Arial;font-size: 20px;font-weight: 400; margin-left: -5px; padding: 3px 12px;}
.marker{ color: #fff;font-family: Arial;font-size: 14px;font-weight: 400; margin-left: -5px; padding: 2px 5px;}
.marker.big {padding: 7px 10px;margin-left: -10px;}
.marker-big.big- {margin-left: -10px; padding: 6px 18px;}
.marker.dashed, .marker-big.dashed {background:#fff!important;color:#000!important}

.marker-grey {background:#ededed!important;border-color:#ededed!important}
.marker-big.dashed.marker-grey {background:#ededed!important;border-color:#ededed!important;color:#fff!important}
.highcharts-data-labels {
  z-index: 800!important;
}
.highcharts-tooltip {
  z-index: 9999!important;
}
.highcharts-tooltip span {z-index: 9999!important;}

.popup {display:none;position:absolute; top:0; background:#fff;opacity:0.9;height:100%}
.pleft {left:0;}
.pright {right:0;}
.pcenter {left:0;border-bottom:2px solid orange; pacity:0;height:1px;top:100%}

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        events: {
        } ,
        backgroundColor: "transparent"
    },
    title: {
            text: ''
        },
    exporting: {
		enabled: false
    },
    credits: {
        enabled:false
    },
    xAxis: {
        categories: ['2001', '2002', '2003', '2004', '2005', '2006'],
        tickWidth: 0,
        gridLineWidth: 0,
        labels: {
            style: {
                'font-family': 'Arial',
                'font-size': '14px'
            }
        },
        
    },
    yAxis: {
        title: {
            enabled:false
        },
        gridLineWidth: 1,
        labels: {
            enabled: false
        },  
        startOnTick: false,
        minPadding: 0.05,
    },
    legend: {
         enabled: false
    },
    tooltip: {
        formatter: function() {
            return this.y;
        },
        backgroundColor: "rgba(255,255,255,1)",
        useHTML: true,
        style: {
            "z-index": 9999   
        }
    },    
    plotOptions: {
        line: {
             marker: {
                symbol: 'square',
                lineColor: null,
                lineWidth:6,
                 
                states: {
                    hover: {
                        enabled: false
                    }
                }
             },
            dataLabels: {
                enabled: true,
                align: 'left',
                x: -10,
                y: 15,
                useHTML: true,
                formatter: function () {
                    var big="", dashed ="";          
                    if (this.series.name == "big") big ="big";
                    if (this.series.name == "dashed") dashed ="dashed";
                    if (this.point.x == this.series.data.length - 1) {
                        return '<div class="marker-big '+big+' '+dashed+' " style="background:'+ this.series.color + ';border:1px solid '+...