Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

var chart2 = new CanvasJS.Chart("chartContainer2", {
	animationEnabled: true,
	exportEnabled: true,
	interactivityEnabled: true,

	
	axisX:{
		
		title: "Time",
			crosshair: {
				enabled: true,
				snapToDataPoint: true
			}
		},
	
	axisY: {
		title: "OI",
		includeZero: false,
		crosshair: {
					enabled: true,
			snapToDataPoint: true}
		
	
	},
	data: [{
		type: "line",
		axisYType: "secondary",
		name: "Net Call OI",
		toolTipContent: "{y} Net Change in Call OI",
		dataPoints: [
        { label: 10, y: 71 },
        { label: 20, y: 55 },
        { label: 30, y: 50 },
        { label: 40, y: 65 },
        { label: 50, y: 95 },
        { label: 60, y: 68 },
        { label: 70, y: 28 },
        { label: 80, y: 34 },
        { label: 90, y: 14 }
      ]
    }					
  ]
});

chart2.render();

var datapoints4length = chart2.options.data[0].dataPoints.length;
	for (var i = 1; i < datapoints4length; i++) 
	{
		if(chart2.options.data[0].dataPoints[i].y>chart2.options.data[0].dataPoints[i-1].y) 
				if(chart2.options.data[0].dataPoints[i-1].y<30)
					if(chart2.options.data[0].dataPoints[i].y>=30)
						{
						
						chart2.data[0].addTo("dataPoints",{markerColor: "red", markerType: "triangle",markerSize:10},i);
					
						}
		}
	chart2.render();