CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

by Dwza

HTML

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

<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,
	title:{
		text: "24 Hours price tracking"
	},
	axisX: {
		valueFormatString: "HH"
	},
	axisY: {
		title: "Price (in €)",
		includeZero: false,
		suffix: " €"
	},
	legend:{
		cursor: "pointer",
		fontSize: 14,
		itemclick: toggleDataSeries
	},
	toolTip:{
		shared: true
	},
	data: [{
		name: "APONEO",
		type: "spline",
		yValueFormatString: "#0.## €",
		showInLegend: true,
		dataPoints: [
		  { x: new Date('2019-10-09 00:00:00 GMT +02:00'), y: 18.23 },
      { x: new Date('2019-10-09 00:45:00 GMT +02:00'), y: 18.24 },
		  { x: new Date('2019-10-09 01:00:00 GMT +02:00'), y: 18.23 },
      { x: new Date('2019-10-09 01:45:00 GMT +02:00'), y: 18.23 },
          { x: new Date('2019-10-09 02:00:00 GMT +02:00'), y: 18.22 },
          { x: new Date('2019-10-09 03:00:00 GMT +02:00'), y: 18.24 },
          { x: new Date('2019-10-09 03:45:00 GMT +02:00'), y: 18.24 },
          { x: new Date('2019-10-09 04:00:00 GMT +02:00'), y: 18.24 },
          { x: new Date('2019-10-09 04:45:00 GMT +02:00'), y: 18.21 },
          { x: new Date('2019-10-09 05:00:00 GMT +02:00'), y: 18.21 },
          { x: new Date('2019-10-09 06:00:00 GMT +02:00'), y: 18.20 },
          { x: new Date('2019-10-09 07:00:00 GMT +02:00'), y: 18.21 },
          { x: new Date('2019-10-09 08:00:00 GMT +02:00'), y: 18.18 },
          { x: new Date('2019-10-09 09:00:00 GMT +02:00'), y: 18.17 },
          { x: new Date('2019-10-09 10:00:00 GMT +02:00'), y: 18.14 },
          { x: new Date('2019-10-09 11:00:00 GMT +02:00'), y: 18.11 },
          { x: new Date('2019-10-09 12:00:00 GMT +02:00'), y: 18.06 },
          { x: new Date('2019-10-09 13:00:00 GMT +02:00'), y: 18.05 },
          { x: new Date('2019-10-09 14:00:00 GMT +02:00'), y: 18.05 },
          { x: new Date('2019-10-09 15:00:00 GMT +02:00'), y: 18.04 },
          { x: new Date('2019-10-09 16:00:00 GMT +02:00'), y: 18.00 },
          { x: new...