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: 200px; margin: 0 auto"></div>

JavaScript

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: ['Bla bla bla label, bla bla Bla bla bla label, bla bla Bla bla bla label Bla bla bla label, bla ', 'Bla bla bla label, bla bla', 'Bla bla bla label, bla bla', 'Bla bla bla label Bla bla bla label, bla bla Bla bla bla label, bla bla, bla bla', 'Bla bla bla label, bla bla', 'Bla bla bla label, bla bla']
            },
            yAxis: {
                title: {
                    text: 'Temperature'
                },
                labels: {
                    formatter: function() {
                        return this.value +'°'
                    }
                }
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: [{
                name: 'Tokyo',
                marker: {
                    symbol: 'square'
                },
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
    
            }, {
                name: 'London',
                marker: {
                    symbol: 'diamond'
                },
                data: [4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
            }]
        });
    });