Radar with date axis

by raju r

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

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:  500px;
}

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", am4charts.RadarChart);

chart.data = [
    {
        duration: "One",
        startDate1: 60,
        endDate1: 600
    },
    {
        duration: "One",
        startDate1: 630,
        endDate1: 1170
    },
    {
        duration: "Two",
        startDate2: 560,
        endDate2: 1020
    },
    {
        duration: "Two",
        startDate2: 240,
        endDate2: 720
    },
    {
        duration: "Three",
        startDate3: 720,
        endDate3: 180
    },
    {
        duration: "Four",
        startDate4: 560,
        endDate4: 1080
    },
    /*{
        duration: "Four",
        startDate4: 5,
        endDate4: 8
    },
    
    {
        duration: "Five",
        startDate5: 15,
        endDate5: 16
    }*/
];

chart.padding(20, 20, 20, 20);
chart.colors.step = 2;
chart.durationFormatter.durationFormat = "H"
chart.innerRadius = am4core.percent(40);

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "duration";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.grid.template.strokeOpacity = 0.07;
categoryAxis.renderer.minGridDistance = 10;
categoryAxis.mouseEnabled = false;
categoryAxis.tooltip.disabled = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.labels.template.horizontalCenter = "left";
dateAxis.strictMinMax = true;
dateAxis.renderer.maxLabelPosition =...