XY chart with date-based axis

<h2>Date axis</h2> There's no special requirements for axis type. Any axis can be of any type, including date, so that you can plot scatter charts of date-based data. <h2>Two-way zoom cursor</h2> Cursor's <code>behavior</code> setting can be set to <code>"zoomXY"</code> so that you can zoom in on any specific part of the chart. [amb href="https://www.amcharts.com/docs/v4/concepts/chart-cursor/#Cursor_behavior"]More about cursor behaviors[/amb] <h2>Heat rules</h2> Heat rules allow tying relative size of any value in data to any property of the element. Like for instance radius of the circle bullet or scale of the rectangle. [amb href="https://www.amcharts.com/docs/v4/concepts/series/#Heat_maps"]More about heat rules[/amb]

by navinleon

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

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

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "date": "2015-01-01",
  "ay": 6.5,
  "by": 2.2,
  "aValue": 15,
  "bValue": 10,
}, {
  "date": "2015-1-4",
  "ay": 12.3,
  "by": 4.9,
  "aValue": 8,
  "bValue": 3,
  components:["aa","bb"]
}, {
  "date": "2015-01-03",
  "ay": 12.3,
  "by": 5.1,
  "aValue": 16,
  "bValue": 4,
  components:["aa","bb"]
}, {
  "date": "2015-01-04",
  "ay": 2.8,
  "by": 13.3,
  "aValue": 9,
  "bValue": 13,
  components:["aa","bb"]
}, {
  "date": "2015-01-05",
  "ay": 3.5,
  "by": 6.1,
  "aValue": 5,
  "bValue": 2,
  components:["aa","bb"]
}, {
  "date": "2015-01-06",
  "ay": 5.1,
  "by": 8.3,
  "aValue": 10,
  "bValue": 17,
  components:["aa","bb"]
}, {
  "date": "2015-01-07",
  "ay": 6.7,
  "by": 10.5,
  "aValue": 3,
  "bValue": 10,
  components:["aa","bb"]
}, {
  "date": "2015-01-08",
  "ay": 8, 
  "by": 12.3,
  "aValue": 5,
  "bValue": 13,
  components:["aa","bb"]
}, {
  "date": "2015-01-09",
  "ay": 8.9,
  "by": 4.5,
  "aValue": 8,
  "bValue": 11,
  components:["aa","bb"]
}, {
  "date": "2015-01-10",
  "ay": 9.7,
  "by": 15,
  "aValue": 15,
  "bValue": 10,
  components:["aa","bb"]
}, {
  "date": "2015-01-11",
  "ay": 10.4,
  "by": 10.8,
  "aValue": 1,
  "bValue": 11,
  components:["aa","bb"]
}, {
  "date": "2015-01-12",
  "ay": 1.7,
  "by": 19,
  "aValue": 12,
  "bValue": 3,
  components:["aa","bb"]
}];


// Create axes
var xAxis = chart.xAxes.push(new am4charts.DateAxis());
xAxis.dataFields.category = "category";
xAxis.renderer.grid.template.location = 0;
xAxis.renderer.minGridDistance = 30;

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