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"></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: [{color: "#dde1e7", y: 180}, {color: "#dde1e7", y: 140}, {color: "#dde1e7", y: 180}, 140, 180, 140, 180, 140, 180, 140, 180],
color: '#b2dbff',
},
{
name: 'Current',
data: [{color: "#a0b0b9", y: 99}, {color: "#a0b0b9", y: 197}, {color: "#a0b0b9", y: 165}, 80, 144, 80, 144, 80, 144, 80, 144],
color: '#1d94fa'}
],
}
)