JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$(function () {

    var linechart = {
        title: {
            text: "Monthly Downtimes Duration"
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "December"],
            title: {
                text: null
            },
            labels: {
            autoRotation: false
 //               rotation: 0
                //autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90]
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            },
            labels: {
                overflow: 'justify'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '',
            pointFormat: '{series.name}: <b>{point.y: .1f}</b>'
        },
        legend: {
            borderWidth: 0,
            enabled: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: "Duration",
            data: [302, 241, 145, 283, 251, 246, 234, 276, 199, 131, 249]
        }],
        colors: ["#00BCD4", "#E91E63", "#FF7043", "#FFC107", "#2196F3", "#8BC34A", "#9C27B0", "#009688", "#4CAF50", "#F44336"]
    };


    $('#container').highcharts(linechart);
});