JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

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

JavaScript

$(function () {
    var chart,
    categories = ['0-4', '5-9', '10-14', '15-19',
        '20-24', '25-29', '30-34', '35-39', '40-44',
        '45-49', '50-54', '55-59', '60-64', '65-69',
        '70-74', '75-79', '80-84', '85-89', '90-94',
        '95-99', '100 +'];
    $(document).ready(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar',
                width: 800,
                marginLeft: 25,
                marginRight: 25
            },
            title: {
                text: 'Population pyramid for Germany, midyear 2010'
            },
            subtitle: {
                text: 'Source: www.census.gov'
            },
            xAxis: {
                categories: categories,
                reversed: false,
                labels: {
                    step: 1,
                    style: {
                        whiteSpace: 'nowrap'
                    }
                },
                left: 425,
                tickWidth: 0
            },
            yAxis: [{
                title: {
                    text: null
                },
                min: 0,
                max: 4000000,
                left: 425,
                width: 350,
                offset: 0
            }, {
                title: {
                    text: null
                },
                min: 0,
                max: 4000000,
                reversed: true,
                width: 350,
                offset: 0
            }],

            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                }
            },

            series: [{
                name: 'Male',
                data: [1746181, 1884428, 2089758, 2222362, 2537431, 2507081, 2443179, 2664537, 3556505, 3680231, 3143062, 2721122, 2229181, 2227768,...