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="container1" 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;">Quellen: Weltbank, CIA World Fact Book, OECD, World Income Inequality Database
</p>

CSS

body {
  background-color: #fff;
}

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

JavaScript

$(function () {
    $('#container1').highcharts({
				chart: {
            type: 'column', 
            style: {fontFamily: 'Trebuchet MS'},
        				},
        title: {
            text: 'Entwicklung der Einkommensverteilung im letzten Jahrzehnt (Gini Index)', 
            style: {
            	color: '#9dcc58', 
              fontWeight: 'bold', 
              'font-size': '2em',}
        				},
        subtitle: {
            text: '– 0 = vollkommene Gleichheit, 100 = vollkommene Ungleichheit –',
              style: {
            	color: '#8da073', 
              fontWeight: 'bold', 
              paddingBottom: '15px'}
        					},
        xAxis: {
            categories: ['Argentinien', 'Australien', 'Brasilien', 'China', 'Deutschland', 'EU-28', 'Frankreich', 'Indien',  'Indonesien', 'Italien', 'Japan', 'Kanada', 'Mexiko', 'Russland', 'Saudi-Arabien', 'Südafrika', 'Südkorea', 'Türkei', 'USA', 'Vereinigtes Königreich',],
            crosshair: true
        				},
                exporting: {
            sourceWidth: 1200,
            sourceHeight: 800},
        yAxis: {
            min: 0,
            title: {
                text: ''
            				}
        				},

         credits: {
            enabled: false
        					},
        legend: {
            enabled: false
        					},
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:#969696;padding:0">Gini im Jahr {point.z:.0f}: </td>' + 
            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.15,
                borderWidth: 0,
                groupPadding: 0.85,
            }, 
        },
       
        series: [ 
            {name: 'späterer GINI',
            color: '#C4AF9A',
            pointWidth: 11,
  ...