Chart

HTML

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

window.onload = function () {
     
    var chart = new CanvasJS.Chart("chartContainer", {
	    animationEnabled: true,
		animationDuration: 2000,   //change to 1000, 500 etc
		//backgroundColor: "#F5DEB3",
		//width: 320, 
		theme: "light1", // Default: “light1” Options: “light1″,”light2”, “dark1”, “dark2” 
		title:{
        text: "Nombre de signalements", 
        fontWeight: "bolder",
        fontColor: "#008B8B",
        fontFamily: "tahoma",        
        
        fontSize: 25,
        padding: 10        
      },
	 axisX:{
      //valueFormatString: "YYYY-MM-DD HH:mm:ss",
	  valueFormatString: "HH:mm",
      interval: 1,
      intervalType: "hour",
      labelFontSize: 9,
	  labelFormatter: function(e){
      return CanvasJS.formatDate(e.value, "HH:mm");
    }
    },
    	axisY: {
    		title: "Nombre de signalements"
    	},
    	data: [{
    		type: "splineArea",
		color: "#FF0000",
		markerSize: 5,
            indexLabelPlacement: 'outside',
            indexLabelOrientation: 'horizontal',
    		dataPoints: [{"y":1,"z":1,"label":"19:09"},{"y":1,"z":1,"label":"20:09"},{"y":1,"z":1,"label":"06:09"},{"y":4,"z":4,"label":"07:09"},{"y":3,"z":3,"label":"09:09"},{"y":1,"z":1,"label":"08:09"},{"y":1,"z":1,"label":"13:09"}]    	}]
    });
    chart.render();
     
    }