Basic Range Column Chart with Index Label on Top - CanvasJS

Basic Range Column Chart with Index Label on Top - CanvasJS

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 chart = new CanvasJS.Chart("chartContainer",
{
	title: {
		text: "Basic Range Column Chart with Index Label on Top"
	},
	data: [
	{
		type: "rangeColumn",
		indexLabelFormatter: function(e){
            
			if( e.index === 1)
				return e.dataPoint.y[1];
			else
				return " ";
		},
		dataPoints: [
			{ x: 10, y: [-9.7, 10.4] },  
			{ x: 20, y: [-8.7, 16.5] },
			{ x: 30, y: [-3.5, 19.4] },
			{ x: 40, y: [5.0, 22.6]  },
			{ x: 50, y: [7.9, 29.5]  },
			{ x: 60, y: [9.2, 34.7]  },
			{ x: 70, y: [7.3, 30.5]  }
		]
	}
	]
});
chart.render();