Timeline

This demo uses amCharts 4 TimeLine add-on. This type of chart is sometimes called a linear process diagram. [amb href="https://www.amcharts.com/timeline-chart/"]More info about TimeLine addon[/amb] [amb href="https://www.amcharts.com/docs/v4/chart-types/timeline/"]Add-on docs[/amb]

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>
<script src="https://cdn.amcharts.com/lib/4/plugins/timeline.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/bullets.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.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: 600px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4plugins_timeline.CurveChart);
chart.curveContainer.padding(100, 20, 50, 20);
chart.levelCount = 3;
chart.yAxisRadius = am4core.percent(20);
chart.yAxisInnerRadius = am4core.percent(2);
chart.maskBullets = false;

var colorSet = new am4core.ColorSet();
console.log(colorSet)
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
chart.dateFormatter.dateFormat = "yyyy";
chart.data = [{
    "category": "",
    "start": "2015-12-23 06:00",
    "end": "2021-01-15 07:00",
    "color": colorSet.getIndex(15),
    "text": "unc460",
    "textDisabled": false,
    "icon": "/wp-content/uploads/assets/timeline/timeline0.svg"
}, {
    "category": "",
    "start": "2015-12-29 07:00",
    "end": "2021-01-15 07:00",
    "color": colorSet.getIndex(1),
    "text": "unc381",
    "icon": "/wp-content/uploads/assets/timeline/timeline1.svg"
},
 {
    "category": "",
    "start": "2015-12-29 21:51",
    "end": "2021-01-15 07:00",
    "color": colorSet.getIndex(5),
    "text": "unc6",
    "icon": "/wp-content/uploads/assets/timeline/timeline1.svg"
},
{
    "category": "",
    "start": "2015-12-30 02:46",
    "end": "2021-01-15 07:00",
    "color": colorSet.getIndex(7),
    "text": "unc77",
    "icon": "/wp-content/uploads/assets/timeline/timeline1.svg"
},
{
    "category": "",
    "start": "2019-12-02 02:46",
    "end": "2021-01-15 07:00",
    "color": colorSet.getIndex(9),
    "text": "unc315",
    "icon": "/wp-content/uploads/assets/timeline/timeline1.svg"
}
];

chart.fontSize = 10;
chart.tooltipContainer.fontSize = 10;

var categoryAxis = chart.yAxes.push(new...