JSFiddle - React, Tailwind, and code Playground

by akaimo

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

var series = [];
    series[0] = [
      { name:'Banana', data:[ 5,2,4,6,2,4,5,10], type:'Tropical' },
      { name:'Coconut', data:[ 4,8,7,5,2,3,2,6], type:'Tropical' },
      { name:'Mango', data:[ 5,2,4,6,2,4,5,10], type:'Tropical' },
      { name:'Chirimoya', data:[ 4,8,7,5,2,3,2,6], type:'Tropical' },
      { name:'Blueberry', data:[ 6,5,3,7,4,4,3,7], type:'Temperate' },
      { name:'Strawberry', data:[ 8,5,7,6,2,2,5,8], type:'Temperate' }
    ];
    series[1] = [
      { name:'Tropical', data:[ 7,8,6,2,4,8,5,6] },
      { name:'Temperate', data:[ 5,5.5,6,6.5,7,6,6.7,8] }
    ];
var monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var tropical = [];
for ( var index=0; index<series.length; index++ ) {
    if ( series[index].type == 'Tropical' ) {
        tropiNames.push( name );
        tropical.push( data );
    }
}
$(function () {
    $('#container').highcharts({
        chart: {
				    type: 'area',
				    zoomType: 'x'
				},
        title: {
            text: 'Average Monthly Temperature and Rainfall in Tokyo'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            categories: monthArr,
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout:...