JSFiddle - React, Tailwind, and code Playground

by Barbara Laird

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var options = {
    "chart": {
        'renderTo': 'container',
            "type": "column"
    },
        "title": {
        "text": "",
            "style": {
            "display": "none"
        }
    },
        "xAxis": {
        labels: {
            enabled: false
        },
            "categories": [
            "Average",
            "Your value"],
            "title": {
            enabled: false,
                "text": "x label",
                "style": {
                "font": "bold 16px Verdana",
                    "color": "#000"
            }
        }
    },
        "yAxis": {

        stackLabels: {
            verticalAlign: 'bottom',
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: 'gray'
            },
            formatter: function () {
                return this.stack;
            }
        },
            "min": 0,
            "title": {
            "text": "y label",
            enabled: false,
                "style": {
                "font": "bold 16px Verdana",
                    "color": "#000"
            }
        }
    },
        "legend": {
        "align": "center",
            "itemDistance": 20,
            "verticalAlign": "top",
            "margin": 25,
            "floating": false,
            "borderColor": "#CCC",
            "borderWidth": 1,
            "shadow": false,
            "borderRadius": 0
    },
        "series": [{
        stack: "Your Value",

            "name": "Your Value",

            "color": "#372A4B",

            "data": [{
            "y": 50

        }]
    }, {
        stack: "Average Value",

            "name": "Average Value",
            "color": "#1EC37A",
            "data": [{
            "y": 30
        }]
    }],

    plotOptions: {
        series: {
            dataLabels: {
                verticalAlign: top,
                y: -20,
                enabled: true,
                formatter: function () {
               ...