JSFiddle - React, Tailwind, and code Playground

by Kagebi

HTML

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

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column',
    },
    plotOptions: {
        column: {           
          grouping: false
        }
    },
    tooltip: {
        shared: true // true breaks series highliting on hover
    },

    xAxis: {
        categories: ['24-02', '25-02', '26-02', '27-02', '28-02', '29-02', '01-03', '02-03', '03-03', '04-03', '05-03']
    },
    series: [
    	{
      name: 'Expected',
      data: [180, 140, 180, 140, 180, 140, 180, 140, 180, 140, 180],
      color: '#b2dbff',
      },
      
    	{
      name: 'Current',
      data: [99, 197, 165, 80, 144, 80, 144, 80, 144, 80, 144],
      color: '#1d94fa'}
      ],
      
    }
)