JSFiddle - React, Tailwind, and code Playground

by Chitkala More

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: '#fff',
      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: 'Sales',

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

    }, {
      name: 'Profit',

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

    }, {
      name: 'Loss',

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

    }]
  }, function(chart) { // on complete
  function noop(){};
    chart.renderer.button('<', chart.plotLeft - 60, chart.plotHeight-135 + chart.plotTop, noop).addClass('left').add();


    chart.renderer.button('>', chart.plotLeft + chart.plotWidth + 10, chart.plotHeight + chart.plotTop-135, noop).addClass('right').add();

    $('.left').click(function() {
      chart.xAxis[0].setExtremes(0, 5);
    });
   ...