JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

HTML

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

<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
<div id="container2" style="min-width: 300px; height: 300px; margin: 1em"></div>

JavaScript

$(document).ready(function() {

    Highcharts.setOptions({
        chart: {
            backgroundColor: 'silver',
            borderWidth: 3,
            plotBackgroundColor: 'white',
            plotShadow: true,
            plotBorderWidth: 2,
            plotBorderColor: 'black',
            type: 'bellcurve'
        },
        tooltip: {
            followPointer: true
        },
        xAxis: {
            crosshair: true,
        }
    });


    var options1 = {
        title: {
                text: 'first graph'
        },
        chart: {
            renderTo: 'container'
        },
    series: [{
         data: [0,2,3,4,5,1],
         name: 'first data',
         color: 'orange'
    }]
    };

     var options2 = {
            title: {
                text: 'second graph'
            },
        chart: {
            renderTo: 'container2'
        },
    series: [{
         data: [1,5,18,4,15,12],
         name: 'first data',
         color: 'green'
    },{
    	 data: [15,12,10,20,2,18],
         name: 'second data',
         color: 'blue'
    }]
    };

/* var chart=new Highcharts.Chart(options1); */
var chart=new Highcharts.Chart(options2);

});