JSFiddle - React, Tailwind, and code Playground

by jeffgw

HTML

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

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

JavaScript

// Now create the chart
Highcharts.chart('container', {
yAxis:{
title:null,
gridLineColor: 'transparent'
},
  annotations: [{
		draggable: false,
    zIndex:0,
    shapes: [{
      points: [{
				x: 1635255000000,
				y: 12,
				xAxis: 0, // xAxis reference used, use xAxis value
				yAxis: 0  // yAxis reference used, use xAxis value
			}, {
				x: 1635255000000,
				y: 16,
				xAxis: 0,
				yAxis: 0
			}, {
				x: 3,
				y: 16,
				xAxis: 0,
				yAxis: 0
			}, {
				x: 3,
				y: 12,
				xAxis: 0,
				yAxis: 0
			}],
      fill:'#FAA0A0',
      stroke:'#FAA0A0',
      type: 'path'
    }]
  }],

  series: [{
    data: [5, 10, 15, 4, 16, 25]
  }]

});