CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

by details212

HTML

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

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

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
    zoomEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	exportEnabled: true,
	title:{
		text: "Facebook Stock Price - 2016"
	},
	subtitles: [{
		text: "All Prices are in USD"
	}],
	axisX: {
		valueFormatString: "hh:mm",
       ticks: {
            stepSize: 1,
            min: 0,
            autoSkip: true
        }
	},
	axisY: {
		includeZero:false, 
		prefix: "$",
		title: "Price"
	},
	axisY2: {
		prefix: "$",
		suffix: "bn",
		title: "Revenue & Income",
		tickLength: 0
	},
	toolTip: {
		shared: true
	},
	legend: {
		reversed: true,
		cursor: "pointer",
		itemclick: toggleDataSeries
	},     
	data: [{
		type: "candlestick",
		showInLegend: true,
		name: "Stock Price",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "hh:mm",
		dataPoints: [   // Y: [Open, High ,Low, Close]
			{ x: new Date("2019-04-08 09:30:00"), y: [1.01, 1.01, 1.01, 1.01] },
{ x: new Date("2019-04-08 09:31:00"), y: [1, 1.02, 1, 1.019] },
{ x: new Date("2019-04-08 09:40:00"), y: [1, 1.005, 1, 1] },
{ x: new Date("2019-04-08 09:43:00"), y: [1, 1.005, 1, 1] },
{ x: new Date("2019-04-08 10:25:00"), y: [0.992, 0.992, 0.9851, 0.9851] },
{ x: new Date("2019-04-08 10:27:00"), y: [0.992, 0.992, 0.992, 0.992] },
{ x: new Date("2019-04-08 10:28:00"), y: [0.99, 0.9901, 0.99, 0.99] },
{ x: new Date("2019-04-08 10:29:00"), y: [0.9851, 0.9851, 0.9851, 0.9851] },
{ x: new Date("2019-04-08 10:30:00"), y: [0.985, 0.985, 0.98, 0.98] },
{ x: new Date("2019-04-08 10:32:00"), y: [0.985, 0.985, 0.98, 0.98] },
{ x: new Date("2019-04-08 10:45:00"), y: [0.9834, 0.9834, 0.9834, 0.9834] },
{ x: new Date("2019-04-08 10:48:00"), y: [0.9834, 0.9834, 0.9834, 0.9834] },
{ x: new Date("2019-04-08 10:50:00"), y: [0.9912, 0.9912, 0.9912, 0.9912] },
{ x: new Date("2019-04-08 11:00:00"), y: [0.99, 0.99, 0.99, 0.99] },
{ x: new Date("2019-04-08 11:04:00"), y: [0.99, 0.99, 0.99, 0.99] },
{ x:...