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 categories = [];
    var series = [{
        data: [],
        name: "Data",
        pointInterval: 24 * 3600 * 1000
    }];
        
    for (var i = 0; i < 200; i++) {
        var date = new Date();
        date.setDate(date.getDate() + i);
        categories.push(date);
        series[0].data.push(Math.floor((Math.random() * 10) + 1));
    }
    
    series[0].pointStart = categories[0].getTime();
    
    $('#container').highcharts({
        xAxis: {
            categories: categories,
            type: 'datetime',
            labels: {
                rotation: -90,
                formatter: function(){
                    var date = new Date(this.value);
                    var day = date.getDate();
                    var month = date.getMonth();
                    var year = date.getFullYear();
                	return day + "-" + month + "-" + year;
                }
            },
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)',
                minTickInterval: 1,
                tickInterval: 1
            }
        },
        series: series
    });
});