JSFiddle - React, Tailwind, and code Playground

by arjunasuresh3

HTML

<script type="text/javascript" src="https://code.highcharts.com/stock/4.2.7/highstock.js"></script>

<div id="container" style="height: 600px"></div>


<div id="data.csv" style="display: none"> Sexo; < 5; 5 a 9; 10 a 14; 15 a 19; 20 a 24; 25 a 29; 30 a 34; 35 a 39; 40 a 44; 45 a 49; 50 a 54; 55 a 59; 60 a 64; 65 a 69; 70 a 74; 75 a 79; 80 a 84; + 84
  Homens;-42;-45;-54;-68;-67;-69;-54;-66;-79;-67;-97;-76;-58;-71;-55;-49;-27;-22
Mulheres;40;46;65;66;78;67;60;82;86;83;98;69;89;82;82;64;46;45</div>

JavaScript

$(document).ready(function() {
  var chart, categories = [];
  var options = {
    chart: {
      renderTo: 'container',
      type: 'bar',
      marginLeft: 150,
      marginRight: 150
    },
    title: {
      text: 'Population pyramid for Germany, midyear 2010'
    },
    xAxis: [{
        categories: categories,
        reversed: false,
        min: 0,
        max: 5,
        scrollbar: {
          enabled: true
        },
      },
      { // mirror axis on right side
        opposite: true,
        reversed: false,
        categories: categories,
        linkedTo: 0,
        min: 0,
        max: 5,
        
      }
    ],
    yAxis: {
      type: 'category',
      title: {
        text: null
      },
      labels: {
        formatter: function() {
          return (Math.abs(this.value) / 10) + 'M';
        }
      }
    },
    plotOptions: {
      series: {
        stacking: 'normal',
        showFull: false
      }
    },

    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
      }
    },

    series: []
  }; //end options
  $.get('data.csv', function(data) {

    var lines = data.split('\n');
    $.each(lines, function(lineNo, line) {

      var items = line.split(';');

      // header line containes categories
      if (lineNo === 0) {
        $.each(items, function(itemNo, item) {
          if (itemNo > 1) {
            categories.push(item);
          }
        });
      }
      // the rest of the lines contain data with their name in the first position
      else {
        options.series.push({
          name: [],
          data: []
        });

        $.each(items, function(itemNo, item) {
          if (itemNo === 0) {
            options.series[lineNo - 1].name = item;
          } else {
            options.series[lineNo - 1].data.push(parseFloat(item));
          }
        });
      }
    });

   ...