Serpentine Timeline

This demo uses amCharts 4 TimeLine add-on. [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 DugSohn

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

.demo-theme-dark .demo-background {
  background: #000;
}

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.SerpentineChart);
chart.curveContainer.padding(50, 20, 50, 20);
chart.levelCount = 6;
chart.yAxisRadius = am4core.percent(25);
chart.yAxisInnerRadius = am4core.percent(-25);
chart.maskBullets = false;

var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.5;

chart.data = [{
    "category": "Module #1",
    "start": "2019-01-10",
    "end": "2019-01-13",
    "color": colorSet.getIndex(0),
    "task": "Gathering requirements"
}, {
    "category": "Module #1",
    "start": "2019-02-05",
    "end": "2019-04-18",
    "color": colorSet.getIndex(0),
    "task": "Development"
}, {
    "category": "Module #2",
    "start": "2019-01-08",
    "end": "2019-01-10",
    "color": colorSet.getIndex(5),
    "task": "Gathering requirements"
}, {
    "category": "Module #2",
    "start": "2019-01-12",
    "end": "2019-01-15",
    "color": colorSet.getIndex(5),
    "task": "Producing specifications"
}, {
    "category": "Module #2",
    "start": "2019-01-16",
    "end": "2019-02-05",
    "color": colorSet.getIndex(5),
    "task": "Development"
}, {
    "category": "Module #2",
    "start": "2019-02-10",
    "end": "2019-02-18",
    "color": colorSet.getIndex(5),
    "task": "Testing and QA"
}, {
    "category": ""
}, {
    "category": "Module #3",
    "start": "2019-01-01",
    "end": "2019-01-19",
    "color": colorSet.getIndex(9),
    "task": "Gathering requirements"    
}, {
    "category": "Module #3",
    "start": "2019-02-01",
    "end": "2019-02-10",
    "color": colorSet.getIndex(9),
    "task": "Producing specifications"
}, {
    "category": "Module #3",
    "start":...