JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Number of sailed vessels'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: [{
            title: {
                text: 'number of vessels'
            },
            min: 0
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: [{
            name: 'Bahia Blanca',
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, monthsSnow depth at Vikjafjellet, Norway start at 0 for January, 1 for February etc.
            data: [
                [Date.UTC(1970, 9, 21),12],
                [Date.UTC(1970, 10, 4), 16],
                [Date.UTC(1970, 10, 9), 14],
                [Date.UTC(1970, 10, 27), 34],
                [Date.UTC(1970, 11, 2), 23],
                [Date.UTC(1970, 11, 26), 21],
                [Date.UTC(1970, 11, 29), 20],
                [Date.UTC(1971, 0, 11), 19],
               ...