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

var chart = am4core.create("chartdiv", am4charts.RadarChart);

chart.data = [
    {
        category: "One",
        startTime1: "0",
        endTime1: "9"
    },
   
    {
        category: "Two",
        startTime2: "9:30",
        endTime2: "18"
    },
   
    {
        category: "Three",
        startTime3: "15",
        endTime3: "9"
    },
   
    {
        category: "Four",
        startTime4: "15",
        endTime4: "4"
    },
    
    {
        category: "Five",
        startTime5: "8",
        endTime5: "17"
    }
];

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

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
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.DurationAxis());
dateAxis.renderer.labels.template.horizontalCenter = "left";
dateAxis.strictMinMax = true;
dateAxis.renderer.maxLabelPosition = 0.99;
dateAxis.renderer.grid.template.strokeOpacity = 0.07;
dateAxis.min = 0;
dateAxis.max = 23;
dateAxis.mouseEnabled = false;
dateAxis.tooltip.disabled = true;
dateAxis.baseInterval = {count:1, timeUnit:"day"};

var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.name = "Series...