JSFiddle - React, Tailwind, and code Playground

by Krn Prz

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

JavaScript

// Data gathered from http://populationpyramid.net/germany/2015/
(function($){ // encapsulate jQuery

	$(function () {
		var chart,
			categories = ['18-19',
            '20-24', '25-29', '30-34', '35-39', '40-44',
            '45-49', '50-54', '55-59', '60-64', '65 y más'];
		$(document).ready(function() {
			$('#container').highcharts({
				chart: {
					type: 'bar'
				},
				credits :{
					text: "Fuente: IEDF/DEOyGE. Con base en los cortes estadísticos proporcionados por el IFE.",
					position: {
								align: 'right',
								x: -10,
								verticalAlign: 'bottom',
								y: -5
							},
					href: "#"
				},				
				title: {
					text: 'Lista nominal por sexo y grupos de edad'
				},
				subtitle: {
					text: 'Sección 1, 29 de febrero de 2000'
				},
				xAxis: [{
					categories: categories,
					reversed: false
				}, { // mirror axis on right side
					opposite: true,
					reversed: false,
					categories: categories,
					linkedTo: 0
				}],
				yAxis: {
					title: {
						text: null
					},
					labels: {
						formatter: function(){
							return (Math.abs(this.value) / 1);
						}
					},
					/*min: -4000000,
					max: 4000000*/
				},
		
				plotOptions: {
					series: {
						stacking: 'normal'
					}
				},
		
				tooltip: {
					formatter: function(){
						return '<b>'+ this.series.name + ' ' + this.point.category+' años ' +'</b><br/>'+
							'Ciudadanos: '+ Highcharts.numberFormat(Math.abs(this.point.y), 0);
					}
				},
		
            series: [{
                name: 'Lista nominal hombres',
				color: '#797d7e',
				stack: '0',
                data: [ -18, -53, -74, -66, -51, -33, -33, -28, -25, -18, -47]
            }, {
                name: 'Lista nominal mujeres',
				color: '#522959',
				stack: '0',
                data: [12, 46, 70, 71, 58, 36, 40, 35, 26, 23, 63]
            }]
			});
		});
		
	});

})(jQuery);