JSFiddle - React, Tailwind, and code Playground

by shruti patil

HTML

<script src="http://highcharts.com/highslide/highslide-full.min.js"></script>
<script src="http://highcharts.com/highslide/highslide.config.js"></script>
<link rel="stylesheet" href="http://highcharts.com/highslide/highslide.css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
<div id="container1" style="width: 600px; height: 300px; margin: 0 auto"></div>

JavaScript

// two (or more) Highcharts in the same page opened in Highslide

createGraph({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'line',
        margin: [50, 150, 60, 80],
        events: {}
    },
    title: {
        text: 'FIRST - Monthly Average Temperature',
        style: {
            margin: '10px 100px 0 0' // center it
        }
    },
    subtitle: {
        text: 'Click the chart for larger view',
        style: {
            margin: '0 100px 0 0' // center it
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        title: {
            text: 'Month'
        }
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: 100
    },
    series: [{
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});

createGraph({
    chart: {
        renderTo: "container1",
        defaultSeriesType: 'line',
        margin: [50, 150, 60, 80],
        events: {}
    },
    title: {
        text: 'SECOND - Monthly Average Temperature',
        style: {
            margin: '10px 100px 0 0' // center it
        }
    },
    subtitle: {
        text: 'Click the chart for larger view',
        style: {
            margin: '0 100px 0 0' // center it
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep',...