JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 400px;
}

JavaScript

let chart = am4core.create("chartdiv", am4charts.XYChart)

chart.dateFormatter.dateFormat = "yyyy-MM-dd"
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd"

let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis())
categoryAxis.dataFields.category = "category"
categoryAxis.renderer.grid.template.location = 0
categoryAxis.renderer.inversed = true
categoryAxis.renderer.minGridDistance = 20

let dateAxis = chart.xAxes.push(new am4charts.DateAxis())
dateAxis.renderer.minGridDistance = 50
dateAxis.renderer.opposite = true
dateAxis.baseInterval = {
  count: 1,
  timeUnit: "day"
}

// create activity chart series
let activitySeries = chart.series.push(new am4charts.ColumnSeries())
activitySeries.name = "Activities"

// assign data
activitySeries.dataFields.openDateX = "start"
activitySeries.dataFields.dateX = "end"
activitySeries.dataFields.categoryY = "category"

// color bars
activitySeries.columns.template.propertyFields.fill = "color" // get color from data
activitySeries.columns.template.fillOpacity = 0.5
activitySeries.columns.template.propertyFields.stroke = "color" // get color from data
activitySeries.columns.template.strokeOpacity = 1

activitySeries.columns.template.height = am4core.percent(70)
activitySeries.columns.template.tooltipText = "{task}: \n[bold]{openDateX}[/] - [bold]{dateX}[/]"

const valueLabel = activitySeries.bullets.push(new am4charts.LabelBullet())
valueLabel.label.text = "{task}"
valueLabel.label.fontSize = 15
valueLabel.locationX = 0.5

chart.scrollbarX = new am4core.Scrollbar()
chart.scrollbarX.parent = chart.bottomAxesContainer

chart.scrollbarY = new am4core.Scrollbar()

chart.zoomOutButton.disabled = true

const event = dateAxis.axisRanges.create()
event.date = new Date()
event.bullet = new am4core.Triangle()
event.bullet.dx = 10
event.bullet.width = 20
event.bullet.height = 10
event.bullet.rotation = 180
event.bullet.fill = am4core.color("#FB8C00")

chart.data = [{
  "id": 55,
  "category": "testhub",
  "start": "2020-12-03",
...