JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type:'bar',
    },
    
    xAxis: {
       categories: ['CITY1', 'CITY2','CITY3','CITY4'],
        min:2,
    },
     yAxis: {
              title: {
            text: 'Total fruit consumption'
        },
    },
     plotOptions: {
        series: {
             grouping: false,
            stacking: 'normal'
        }
    },
    legend: {
        verticalAlign: 'top',
        y: 100,
        align: 'right'
    },
    
    scrollbar: {
        enabled: true
    },

    series: [{
         name: 'Q1',
        data: [50, 70,0,35]
    }, {
   name: 'Q2',
        data: [20, 0,50,0]
    }, {
      name: 'Q3',
        data: [0, 0,40,20]
    },{
      name: 'Q4',
        data: [0, 30,0,20]
    }]
});