JSFiddle - React, Tailwind, and code Playground

by subramh

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
    Highcharts.setOptions({
        chart: {
            style: {
                fontFamily: 'Roboto Condensed'
            }
        },
        lang: {
            thousandsSep: ',',
            numericSymbols: [" k" , " M" , " B" , " T" , "P" , "E"]
        }
    });
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015']
    },
    yAxis: {
      labels: {
        formatter: function() {
          return '$' + this.axis.defaultLabelFormatter.call(this);
        }
      },
      title: {
        text: 'Dollars'
      }
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br />',
      shared: true
    },
    plotOptions: {
      column: {
        stacking: 'percent'
      }
    },
    series: [{
      name: 'Profits',
      data: [2207200680, 275867075, 160807076, 215339308, 573350303, 2169057688, 2156735646, 2139162591, 1992848000],
      tooltip: {
        valuePrefix: '$'
      }
    }, {
      name: 'Losses',
      data: [-29566187, -7691799120, -3484627956, -704701601, -1831253456, -36590135, -26981524, -8266872, -8066000],
      tooltip: {
        valuePrefix: '$'
      }
    }]
  });
});