JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>

<div id="wrapper">
    <ul class="idTabs"> 
        <li><a href="#vpPointsGraphWrapper">Points</a></li> 
        <li><a href="#vpKillsDeathsGraphWrapper">Kills and deaths</a></li>
    </ul> 
    <div id="vpPointsGraphWrapper"><div id="vpPointsGraph"></div></div>
    <div id="vpKillsDeathsGraphWrapper"><div id="vpKillsDeathsGraph"></div></div>
</div>

CSS

#wrapper {
    width:80%;
    margin:0 auto;
}
#vpPointsGraph, #vpKillsDeathsGraph, #vpDamageGraph, #vpBombsGraph {
    width: 100%;
}

JavaScript

//Get width
 var width = $('#wrapper').width()
//Points Graph
       var pointsChart = new Highcharts.Chart({
            chart: {
	    renderTo: 'vpPointsGraph',
                type: 'line'
            },
            title: {
                text: 'Points'
            },
            xAxis: {
                title: {
                    text: 'Match'
                },
                categories: [1,2,3,4,5,6,7],
	    reversed: true
            },
            yAxis: {
                title: {
                    text: 'Points'
                },
            },
            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: ''
            },
            plotOptions: {
                line: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            }, 
	credits: {
            	enabled: false
        	},
            series: [{
                name: 'Points',
                data: [5,6,7,8,3,6,8]
            }]
        });

    
//KillsDeaths Graph
        var killsDeathsChart = new Highcharts.Chart({
            chart: {
	    renderTo: 'vpKillsDeathsGraph',
                type: 'line',
	    width: width
            },
            title: {
                text: 'Kills and Deaths per match'
            },
            xAxis: {
                title: {
                    text: 'Match'
                },
                categories: [1,2,3,4,5],
	            reversed: true
            },
            yAxis: {
                title: {
                    text: 'Number'
                },
            },
            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: ''
            },
            plotOptions: {
                line: {
                    marker: {
                        radius: 4,
                       ...