JSFiddle - React, Tailwind, and code Playground

by sanjshah

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

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    credits: false,
    title: {
      text: 'Permits per Property'
    },
    xAxis: {
      categories: ['99 Bishopsgate', '20 Canada Square', 'Moor Place']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Number of Permits'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    tooltip: {
      headerFormat: '<b>{point.x}</b><br/>',
      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
          style: {
            textShadow: '0 0 3px black'
          }
        }
      }
    },
    series: [{
      name: 'Hot Works',
      color: '#FF7C5B',

      data: [1500, 1300, 1400]
    }, {
      name: 'Access Eq.',
      color: '#B3D8EC',

      data: [1200, 1200, 1300]
    }, {
      name: 'Access Eq. & Cradles',
      color: '#F9BFE0',

      data: [1300, 1400, 1400]
    }, {
      name: 'Pressurised Systems',
      color: '#DD9CF5',

      data: [1350, 1420, 1440]
    }]
  });
});