Showing Date-Time values on a Chart Axis - 1 | JSFiddle Sample Code

Showing Date-Time values on a Chart Axis - 1 | JSFiddle Sample Code

by der_robert

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/date-time-axis/" target="_blank" title="Showing Date-Time values on a Chart Axis ">https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/date-time-axis/</a></div>

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      zoomEnabled: true,      
      
      title:{
       text: "Chart With Date-Time Stamps Inputs"       
     },

     data: [
     {        
      type: "area",
      xValueType: "dateTime",
      valueFormatString: "hh", 
      dataPoints: [{"y":0.2591667,"x":1615453501000},{"y":0.1571667,"x":1615449901000},{"y":0.2058333,"x":1615446241000},{"y":0.2891667,"x":1615442701000},{"y":0.3136667,"x":1615439101000},{"y":0.3598333,"x":1615435442000},{"y":0.1705000,"x":1615431901000},{"y":0.2865000,"x":1615428361000},{"y":0.3346667,"x":1615424762000},{"y":0.2574286,"x":1615420802000},{"y":0.1721250,"x":1615417321000},{"y":0.3121250,"x":1615413841000},{"y":0.2695000,"x":1615410301000},{"y":0.1888750,"x":1615406762000},{"y":0.2531250,"x":1615403221000},{"y":0.2080000,"x":1615399261000},{"y":0.1764286,"x":1615395722000},{"y":0.2632857,"x":1615392481000},{"y":0.2053750,"x":1615388642000},{"y":0.1387143,"x":1615385221000},{"y":0.2384444,"x":1615381321000},{"y":0.2237500,"x":1615377842000},{"y":0.2062500,"x":1615374421000},{"y":0.0965556,"x":1615370702000}]
    }
    ]
  });

    chart.render();
  }