JSFiddle - React, Tailwind, and code Playground

by andrea75

HTML

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

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

JavaScript

$(function () {
        $('#container5').highcharts({
            chart: {
						renderTo: 'container5',
						type: 'area',
                        zoomType: 'x',
						marginBottom: 50
					},
            title: {
						text: 'Pioggia',
						x: -20 //center
					},
            subtitle: {
						text: '',
						x: -20
					},
            credits: {
						text: 'Stazione di Cafasse (TO) © Rete Linea Meteo',
						href: 'http://www.lineameteo.it'
					},
            xAxis: {
                type: 'datetime',
						tickInterval: 3600 * 2000, // one hour
						tickWidth: 0,
						gridLineWidth: 1,
						labels: {
							align: 'center',
							x: -3,
							y: 20,
							formatter: function() {
								return Highcharts.dateFormat('%H', this.value);
							}
						}
					},
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value} mm/h',
                    style: {
                        color: '#89A54E'
                    }
                },
                title: {
                    text: 'Rain Rate',
                    style: {
                        color: '#89A54E'
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Totale',
                    style: {
                        color: '#4572A7'
                    }
                },
                labels: {
                    format: '{value} mm',
                    style: {
                        color: '#4572A7'
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
						enabled: false,
						layout: 'orizzontal',
						align: 'center',
						verticalAlign: 'bottom',
						x: 0,
						y: 10,
						borderWidth: 0,
                                                color: '#89A54E'
					},
            plotOptions: {
						area: {
							lineWidth:...