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="container2" 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;">Quelle Gender Pay Gap: IAO (aktuellste Daten, 2008-2015); Quelle Erwerbsbeteiligungsquote: Weltbank (2014)<br>
Für die mit Sternchen markierten Länder waren keine Daten zur Gender Pay Gap bei der IAO verfügbar. Hier wurden abweichende Quellen verwendet.<br>
Australien (Regierungszahlen), China (CNBC unter Verweis auf Euromonitor), EU, Italien (Europäische Kommission), Saudi-Arabien (The National)
</p>

CSS

body {
  background-color: #fff;
}

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

JavaScript

$(function () {
    $('#container2').highcharts({
				chart: {
            type: 'column', 
            style: {fontFamily: 'Trebuchet MS'},
        				},
        title: {
            text: 'Gender Pay Gap und Anteil erwerbstätiger Frauen', 
            style: {
            	color: '#9dcc58', 
              fontWeight: 'bold', 
              'font-size': '2em',}
        				},
        subtitle: {
            text: '– So hoch ist der Anteil der Frauen an der erwerbstätigen Bevölkerung und so viel verdienen sie weniger als Männer –',
              style: {
            	color: '#8da073', 
              fontWeight: 'bold', 
              paddingBottom: '15px'}
        					},
        xAxis: {
            categories: [
               'China*', 'Vereinigtes Königreich', 'Südkorea', 'Argentinien', 'Indien', 'Japan', 'Russland', 'Kanada', 'Brasilien', 'USA', 'Indonesien', 'Südafrika', 'Saudi-Arabien*', 'Deutschland', 'Australien*', 'Mexiko', 'EU*', 'Frankreich', 'Italien*', 'Türkei'],
            crosshair: true
        				},
            exporting: {
            sourceWidth: 1200,
            sourceHeight: 800},
        yAxis: {
            min: -45,
            plotLines: [{
                    value: 50, 
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {text: 'Gleichheit erreicht bei 50%', style: {color: 'red'}}
                    }],        
            title: {
                text: 'in Prozent'
            				}
        				},
        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}:...