JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" ></div>

JavaScript

(function() {
    var eventFlag = false,
        options = {
        chart: {
            renderTo: 'container'
        },

        xAxis: {
                minPadding: 0.02,
                maxPadding: 0.02,
                events: {
                    afterSetExtremes: function (e) {
                        var length = (e.max - e.min) || 1;
                        minPadding = 0.02,
                        maxPadding = 0.02;
                        eventFlag = !eventFlag;
                        if (eventFlag == true) {
                            e.min -= length * minPadding;
                            e.max += length * maxPadding;
                            this.setExtremes(e.min, e.max); 
                        }
                    }
                }
            },
        
        series: [{
            id: 'pnl',
            type: 'line',
            name: 'ProfitLoss',
            data: [[1276290000000,0],[1276549200000,-0.0566666666666666666666666700],[1276635600000,0.4900],[1276722000000,0.5166666666666666666666666700],[1276808400000,0.6266666666666666666666666700],[1276894800000,0.6800],[1277154000000,0.5766666666666666666666666700],[1277240400000,-0.0366666666666666666666666700],[1277326800000,-0.1500]]
        },
        {
            type: 'flags',
            name: 'Entries',
            onSeries: 'pnl',
            data: [{"color":"#000000","text":"Portfoliocreated","title":"E","x":1276290000000,"y":null}]           
    },{
            type: 'flags',
            name: 'Exists',
            onSeries: 'pnl',
            data: [{"color":"#FF0000","text":"Portfolio closed at -0.02 % loss","title":"X","x":1277326800000,"y":null}]          
    }]
    };
    
    window.chart = new Highcharts.StockChart(options);
})();