Highcharts Demo

author(s): CodeAssist

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<body>
	<div id="contextMenu" style="display: none" class="contextMenu">
		<div id="contextMenuItem1">Data</div>
		<div id="contextMenuItem2">Data2</div>
	</div>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

CSS

.contextMenu {
	position: absolute;
    z-index: 1001;
    background: white;
    border: 1px solid black;
}

TypeScript

let callDrillDown = () => {
	alert('drill1');
}

let callDrillDown2 = () => {
	alert('drill2');
}

let mouseIn: boolean;

Highcharts.chart('container', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'Monthly Average Rainfall'
	},
	subtitle: {
		text: 'Source: WorldClimate.com'
	},
	xAxis: {
		categories: [
			'Jan',
			'Feb',
			'Mar',
		],
		crosshair: true
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Rainfall (mm)'
		}
	},
	tooltip: {
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
			'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			events: {
				click: (event: any) => {
					let contextMenu = document.getElementById('contextMenu');
					let contextMenuItem1 = document.getElementById('contextMenuItem1');
					let contextMenuItem2 = document.getElementById('contextMenuItem2');

					contextMenuItem1.onclick = callDrillDown;
					contextMenuItem2.onclick = callDrillDown2;
					contextMenu.onmouseenter = () => {
						mouseIn = true;
					};

					contextMenu.onmouseleave = () => {
						mouseIn = false;
						setTimeout(() => {
							if (!mouseIn) {
								contextMenu.setAttribute('style', 'display: none');

							}
						}, 1000);
					};

					contextMenu.setAttribute('style', 'top: ' + event.pageY + 'px; left:'
						+ event.pageX + 'px;');

				}
			},
			pointPadding: 0.2,
			borderWidth: 0
		}
	},
	series: [{
		name: 'Tokyo',
		data: [49.9, 71.5, 106.4]

	}, {
		name: 'New York',
		data: [83.6, 78.8, 98.5]

	}]
});