JSFiddle - React, Tailwind, and code Playground

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() {
  $('#container').highcharts({
    chart: {
      backgroundColor: '#3f3b53',
      type: 'column',
      marginLeft: 100,
      marginRight: 100
    },
    legend: {
      symbolHeight: 8,
      symbolWidth: 8,
      symbolRadius: 4,
      margin: 15,
      backgroundColor: '#FFFFFF',
      layout: 'horizontal',
      itemDistance: 25,
      symbolMargin: 10,
      itemStyle: {
        color: 'black',
        fontWeight: 'normal'
      }
    },
    title: {
      text: ''
    },
    xAxis: {
      categories: [
        'JAN',
        'FEB',
        'MAR',
        'APR',
        'MAY',
        'JUN',
        'JUL',
        'AUG',
        'SEP',
        'OCT',
        'NOV',
        'DEC'
      ],
      labels: {
        style: {
          color: '#FFFFFF'
        }
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      }
    },
    tooltip: {
      backgroundColor: '#FFFFFF',
      borderColor: '#FFFFFF',
      borderRadius: 0,
      borderWidth: 5,
      formatter: function() {
        return ' <b>' + this.y + '</b><br><b>' + this.series.name + '</b>';
      }
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },
    series: [{
      name: 'Physical Medicine',

      color: '#0099ff',
      data: [90, 80, 85, 70, 80, 50, 88, 85, 20, 30, 40, 50]

    }, {
      name: 'Phychiatry',

      color: '#ff3399',
      data: [80, 70, 85, 60, 50, 70, 38, 89, 70, 40, 20, 50]

    }, {
      name: 'Otrhopedic Surgery',

      color: '#cc0000',
      data: [88, 79, 81, 50, 40, 76, 31, 81, 65, 30, 29, 59]

    }, {
      name: 'Nephrology',

      color: '#ff5c33',
      data: [88, 89, 61, 60, 70, 36, 21, 51, 69, 39, 21, 51]

    }, {
      name: 'Cardiology',

      color: '#ffa64d',
      data: [18, 29, 31, 50, 40, 46, 81, 31, 89, 39, 81, 31]

    }, {
      name: 'General Surgery',

      color: '#ffe066',
      data: [28, 59, 61, 59, 49, 41, 31, 41, 81, 31, 87, 38]

    }, {
     ...