JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width: 100%;
height: 200px;
}
JavaScript
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "mm:ss";
var colorSetAgent = new am4core.ColorSet();
colorSetAgent.saturation = 0.4;
var colorSetCustomer = new am4core.ColorSet();
colorSetCustomer.saturation = 0.4;
chart.data = [ {
"category": "Module #1",
"start": "0",
"end": "10",
"color": colorSetAgent.getIndex(2),
"task": "Agent",
"value": 4500
}, {
"category": "Module #1",
"start": "12",
"end": "17",
"color": colorSetCustomer.getIndex(1),
"task": "Customer",
"value": 2690
}, {
"category": "Module #1",
"start": "25",
"end": "38",
"color": colorSetAgent.getIndex(2),
"task": "Agent",
"value": 3370
}, {
"category": "Module #1",
"start": "42",
"end": "50",
"color": colorSetCustomer.getIndex(1),
"task": "Customer",
"value": 4510
}];
chart.dateFormatter.dateFormat = "ss";
chart.dateFormatter.inputDateFormat = "ss";
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 70;
dateAxis.baseInterval = { count: 1, timeUnit: "second" };
dateAxis.renderer.tooltipLocation = 0;
chart.cursor = new am4charts.XYCursor();
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.height = am4core.percent(70);
series1.columns.template.tooltipText = "{task}";
series1.dataFields.openDateX = "start";
series1.dataFields.dateX = "end";
series1.dataFields.categoryY = "category";
series1.columns.template.propertyFields.fill = "color"; // get color from data
series1.columns.template.propertyFields.stroke =...