JSFiddle - React, Tailwind, and code Playground

by cvoll

HTML

<script src="http://journovationsu.org/libraries/Highcharts-3.0.7/js/highcharts.js"></script>
<script src="http://journovationsu.org/libraries/Highcharts-3.0.7/js/exporting.js"></script>

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

JavaScript

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'areaspline'
            },
            title: {
                text: 'Average High Temperatures'
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 55,
                y: 29,
                floating: true,
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ],
                plotBands: [{ 
                    from: 8,
                    to: 9,
                    color: 'rgba(68, 170, 213, .2)'
                }]
            },
            yAxis: {
                min: 20,
                title: {
                    text: 'Degrees Fahrenheit'
                }
            },
            tooltip: {
                shared: true,
                valueSuffix: '°F'
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                areaspline: {
                    fillOpacity: 0.5
                }
            },
            series: [{
                name: 'New York City',
                data: [
                    38.3,
                    41.6,
                    49.7,
                    61.2,
                    70.8,
                    79.3,
                    84.1,
                    82.6,
                    75.2,
                    63.8,
                    53.8,
                    43.0
                ]
            }, {
                name: 'Syracuse',
                data: [
                    31.5,
                    34.2,
          ...