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="container3" style="min-width: 310px; max-with: 700px; height: 600px; margin: 0 auto;"></div>
<br><p align="center" style="font-weight: bold; font-size: 12px; fontFamily: Trebuchet MS;">Source: World Bank, CIA World Fact Book, OECD, World Income Inequality Database
</p>

CSS

body {
  background-color: #fff;
}

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

JavaScript

$(function () {
    $('#container3').highcharts({
				chart: {
            type: 'column', 
            style: {fontFamily: 'Trebuchet MS'},
        				},
        title: {
            text: 'Trends in Income Distribution Over the Last Decade  (Gini Index)', 
            style: {
            	color: '#9dcc58', 
              fontWeight: 'bold', 
              'font-size': '2em',}
        				},
        subtitle: {
            text: '– 0 = perfect equality, 100 = perfect inequality –',
              style: {
            	color: '#8da073', 
              fontWeight: 'bold', 
              paddingBottom: '15px'}
        					},
        xAxis: {
            categories: ['Argentina', 'Australia', 'Brazil', 'China', 'Germany', 'EU-28', 'France', 'India',  'Indonesia', 'Italy', 'Japan', 'Canada', 'Mexico', 'Russia', 'Saudi Arabia', 'South Africa', 'South Korea', 'Turkey', 'United States', 'United Kingdom',],
            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 in {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,
            data: [
            {y:...