JSFiddle - React, Tailwind, and code Playground

by Shobhit Sharma

HTML

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

<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

var chart = null,
    options = {
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Some title'
        },
        subtitle: {
            text: 'subtitle'
        },
        xAxis: {
            categories: [],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'y-Axis',
                align: 'high'
            }
        },
        tooltip: {
            formatter: function() {
                return '' + this.series.name + ': ' + this.y + ' ';
            }
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -100,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: []
    };
$(document).ready(function() {
    updateChart();
});

function updateChart() {
    //$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?',
    //function(data) {
    var data = [
        {
        name: 'name1',
        data: [32.6, 16.6, 1.5]},
    {
        name: 'name2',
        data: [6.7, 0.2, 0.6]},
    {
        name: 'name3',
        data: [1, 3.7, 0.7]},
    {
        name: 'name4',
        data: [20.3, 8.8, 9.5]},
    {
        name: 'name5',
        data: [21.5, 10, 7.2]},
    {
        name: 'name6',
        data: [1.4, 1.8, 3.7]},
    {
        name: 'name7',
        data: [8.1, 0, 0]},
    {
        name: 'name8',
        data: [28.9, 8.9, 6.6]}
    ];
    // check if the chart's already rendered
    if (!chart) {
        // if it's not rendered you have to...