Fishbone timeline

Fishbone timeline (also known as Fishbone diagram, Ishikawa diagram, herringbone diagrams, cause-and-effect diagrams, or Fishikawa) is generally used to show the causes of a specific event. Fishbone diagrams are commonly used in product design, defect detection and prevention, and displaying factors causing a specific effect. This demo uses amCharts 4 <a href="http://www.amcharts.com/timeline-chart/">TimeLine</a> add-on. [amb href="https://www.amcharts.com/docs/v4/chart-types/timeline/"]Add-on docs[/amb]

by metaxos

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/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

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

var chart = am4core.create("chartdiv", am4plugins_timeline.CurveChart);
chart.curveContainer.padding(0, 100, 0, 120);
chart.maskBullets = false;
chart.background.fill = '#6ea743';

//var colorSet = new am4core.ColorSet();

chart.data = [{
  "category": "",
  "year": "2022",
  "size": 80,
  "text": "Baubewilligung beantragt",
  "yearLabel": "Heute",
  "yearLabelColor": am4core.color("#395038"),
  "fill": am4core.color("white")
}, {
  "category": "",
  "year": "2023",
  "size": 70,
  "text": "Baubeginn",
  "yearLabel": "Q2 2023",
  "yearLabelColor": am4core.color("#395038"),
  "fill": am4core.color("#dfdd48")
}, {
  "category": "",
  "size": 80,
  "year": "2025",
  "text": "Fertigstellung",
  "yearLabel": "Q3 2025",
  "yearLabelColor": am4core.color("white"),
  "fill": am4core.color("#395038")
}];

chart.dateFormatter.inputDateFormat = "yyyy";

chart.fontSize = 24;
chart.tooltipContainer.fontSize = 24;

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.disabled = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.labels.template.disabled = true;
dateAxis.renderer.line.strokeOpacity = 0;
/*dateAxis.renderer.points = [{
  x: -400,
  y: 0
}, {
  x: 0,
  y: 0
}, {
  x: 400,
  y: 0
}]
dateAxis.renderer.polyspline.tensionX = 0.8;
dateAxis.renderer.line.strokeDasharray = "8,4,2,4";
dateAxis.baseInterval = {
  period: "day",
  count: 1
};
dateAxis.renderer.line.strokeOpacity = 1;
dateAxis.renderer.line.strokeWidth = 2;
dateAxis.renderer.line.stroke = am4core.color("#3787ac");*/

//dateAxis.line.propertyFields.stroke = "lineColor";
//dateAxis.line.propertyFields.fill = "lineColor";


var series = chart.series.push(new am4plugins_timeline.CurveLineSeries());
series.strokeOpacity = 1;
series.dataFields.dateX =...