Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var tempD = new Date();
tempD.setDate(18);
tempD.setHours(23, 25, 0);

var periodChartVol = [];
var periodChartData = [];
var chartEle = {};
chartEle.x = tempD, chartEle.y = 206, chartEle.label = '23:25';
periodChartVol.push(chartEle);


var chartEle = {};
chartEle.x = tempD, chartEle.y = [4459, 4461, 4459, 4461], chartEle.label = "23:25";
periodChartData.push(chartEle);


var tempD = new Date();
tempD.setDate(19);
tempD.setHours(10, 0, 0);

var chartEle = {};
chartEle.x = tempD, chartEle.y = 198, chartEle.label = "10:00";
periodChartVol.push(chartEle);

var chartEle = {};
chartEle.x = tempD, chartEle.y = [4461, 4462, 4460, 4461], chartEle.label = "10:00";
periodChartData.push(chartEle);


var chart = new CanvasJS.Chart("chartContainer",
{        
	axisX: {
				valueFormatString: "hh:mm",
				labelAngle: -45,
				interval: 20,
				intervalType: "minute",
				//scaleBreaks: sb
				/*scaleBreaks: {
						autoCalculate: true,
						type: "wavy"
					}*/
				scaleBreaks: {
					type: "straight",
					fillOpacity: 1,
					customBreaks: [{
						startValue: new Date('06/18/2018 11:30 PM'), 
						endValue: new Date('06/19/2018 09:55 AM') 
					}]
				}
			},
			axisY: [
				{
					title: "Vol",
					includeZero: false,
					//labelAngle: -60,
					prefix: "",
					gridThickness: 0,
					lineColor: "green"
				}
			],
			axisY2: {
				title: "LTP / EMA / DEMA",
				//lineColor: "#C24642",
				includeZero: false,
				//labelAngle: -60,
				gridDashType: "dot",
				gridThickness: 0.5
			},
      data: [
	{
					type: "line",//Changing it to column will render candlestick thick, but scaleBreak is applied properly
					axisYIndex: 0,
					axisXIndex: 0,
					dataPoints: periodChartVol,
					color : "#D6EAF8",
					name : "Vol"
				},{
					type: "candlestick",
					//axisYIndex: 1,
					axisYType: "secondary",
					axisXIndex: 0,
					risingColor: "green",
					color: "red",
					dataPoints: periodChartData ,
					name : "LTP"
				}					
	]
});

chart.render();