JSFiddle - React, Tailwind, and code Playground

by sqren

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

$(function() {
    var chart;

    function calculateMatchesFromPoints(points, matchType) {
        if (matchType == "Won") {
            return points / 3;
        } else if (matchType == "Tie") {
            return points;
        } else {
            return points * -1
        }
    }

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'bar'

            },

            title: {

                text: 'Stacked column chart'

            },

            xAxis: {

                categories: ['Arsenal', 'Manchester', 'City', 'Spurs', 'Liverpool'],


            },

            yAxis: {

                min: -10,

                labels: {
                    enabled: false
                },

                title: {

                    text: 'Number of points'

                },

                stackLabels: {

                    enabled: true,

                    formatter: function() {
                        if (this.total > 0) {
                            return this.total + ' points';
                        }
                    },

                    style: {

                        fontWeight: 'bold',

                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'

                    }

                }

            },

            legend: {

                reversed: true

            },

            tooltip: {

                formatter: function() {
                    var points = this.y;
                    var matchType = this.series.name;
                    var matches = calculateMatchesFromPoints(points, matchType);

                    return '<b>' + this.x + '</b><br/>' +

                    matchType + ' ' + matches + ' matches (' + this.y + ' points)<br/>';

                    //'Total: '+ this.point.stackTotal;
                }

            },

            plotOptions: {
                series:...