JSFiddle - React, Tailwind, and code Playground

by TimNew

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: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Dashboard Chart Spike'
    },
    subtitle: {
        text: 'SFP Metrics 2.0'
    },
    xAxis: {
        categories: [
        '2010',
        '2011',
        '2012'
        ]
    },
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: 'Percentage'
        }
    },
    legend: {
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        shadow: true
    },
    tooltip: {
        formatter: function() {
            return '' + this.x + ': ' + this.y + ' %';
        }
    },
    plotOptions: {
        series: [{
            name: '*',
            data: [10, 20, 5]
        }, {
            name: '**',
            data: [20, 20, 30]

        }, {
            name: '***',
            data: [30, 20, 10]

        }, {
            name: '****',
            data: [40, 20, 30]
        }, {
            name: '*****',
            data: [10, 20, 25]
        }]
    }
});