JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container4" style="min-width: 310px; max-with: 700px; height: 600px; margin: 0 auto;"></div>
<p align="center" style="font-weight: bold; font-size: 12px; fontFamily: Trebuchet MS;">Source: ILO (most current data, 2008-2015); Source Female Labor Force: World Bank (2014)<br>
For countries marked with stars no data on the gender pay gap was available at the ILO. For these, different sources were used.<br>
Australia (government data), China (CNBC referencing Euromonitor), EU, Italy (European Commission), Saudi Arabia (The National)
</p>

CSS

body {
  background-color: #fff;
}

#container {
  margin-top: 20px !important;
  
}

JavaScript

$(function () {
    $('#container4').highcharts({
				chart: {
            type: 'column', 
            style: {fontFamily: 'Trebuchet MS'},
        				},
        title: {
            text: 'Gender Pay Gap & Share of Women in Labor Force', 
            style: {
            	color: '#9dcc58', 
              fontWeight: 'bold', 
              'font-size': '2em',}
        				},
        subtitle: {
            text: '– This shows the share of women in the labor force and how much less they earn compared to men –',
              style: {
            	color: '#8da073', 
              fontWeight: 'bold', 
              paddingBottom: '15px'}
        					},
        xAxis: {
            categories: [
               'China*', 'United Kingdom', 'South Korea', 'Argentia', 'India', 'Japan', 'Russia', 'Canada', 'Brazil', 'United States', 'Indonesia', 'South Africa', 'Saudi Arabia*', 'Germany', 'Australia*', 'Mexico', 'EU*', 'France', 'Italy*', 'Turkey'],
            crosshair: true
        				},
                exporting: {
            sourceWidth: 1200,
            sourceHeight: 800},
        yAxis: {
            min: -45,
            plotLines: [{
                    value: 50, 
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {text: 'Gender Equality at 50 Percent', style: {color: 'red'}}
                    }],
            title: {
                text: 'in percent'
            				}
        				},
        plotOptions: {
            'Gender Pay Gap': {
                colorByPoint: true, 
                color: '#ffd366',
            },
        }, 
         credits: {
            enabled: false
        					},
        legend: {
            enabled: true
        					},
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:#969696;padding:0">{series.name}: </td>' +
                '<td...