JSFiddle - React, Tailwind, and code Playground

by dkrotts

HTML

<script src="https://github.com/highslide-software/highcharts.com/raw/master/js/highcharts.src.js"></script>
<div id="dashboard-chart" style="width: 980px; height: 400px; margin: 0 auto"></div>

JavaScript

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'dashboard-chart',
            type: 'column'
        },

        title: {
            text: 'Categories by task and status'
        },

        xAxis: {
            title: {
                text: 'Category'
            },
            categories: ['New Business', 'Renewal', 'Endorsement', 'Cancellation', 'Reinstatement', 'Non-Renewal', 'Other']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Count'
            }
        },

        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'Open',
            data: [4, 6, 4, 3, 0, 1, 10],
            stack: 'Open'
        }, {
            name: 'Rated',
            data: [5, 2, 5, 0, 0, 0, 0],
            stack: 'rated'
        }, {
            name: 'Quoted',
            data: [1, 12, 4, 5, 0, 0, 0],
            stack: 'quoted'
        }, {
            name: 'Bound',
            data: [3, 2, 3, 1, 2, 0, 1],
            stack: 'bound'
        }]
    });
});