Test

Advanced capabilities of amCharts 4 enable you to break out of the dated paradigms of UI and data visualization. Now you can implement beautiful map drill-down charts without any additional UI elements. For an extensive tutorial make sure you check out this <a href="https://css-tricks.com/making-movies-with-amcharts/#article-header-id-5">article on CSS-tricks</a>.

by amcharts

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: 100%;
}

JavaScript

am4core.ready(function() {
  var chart = am4core.create("chartdiv", am4charts.XYChart);

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

  var series = chart.series.push(new am4charts.StepLineSeries());
  series.yAxis = valueAxis;
  series.name = "Test";
  series.baseAxis = dateAxis;

  series.dataFields.valueY = "value";
  series.dataFields.dateX = "timestamp";

  chart.data = [{
      timestamp: 0,
      value: 9,
    },
    {
      timestamp: 100,
      value: "-",
    },
    {
      timestamp: 200,
      value: 3
    }
  ];

});

chart.events.on("beforedatavalidated", function(ev) {
console.log("a")
	for(var i = 0; chart.data.length; i++) {
    chart.data[i].value = Number(chart.data[i].value) || 0;
  }
});