highchartsloadevent

by prakhar230792

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
	"type": "svg",
	"title": {
		"text": null
	},
	"chart": {
		"type": "scatter",
		events: {
			load: function (event) {

				var chart = event.target,
				xAxis = chart.xAxis[0];

				var plotLineActual = {
					id: 'bottomLeftQuadrantLabelPlotLine',
					color: '#FFFFFF',
					width: 0,
					zIndex: 5,
					label: {
						rotation: 0,
						verticalAlign: 'top',
						x: 10,
						y: 15,
						style: {}
					}
				};
				var xAxisReferencePLotlineValue;
				for (var index = 0; index < xAxis.plotLinesAndBands.length; index++) {
					if (xAxis.plotLinesAndBands[index].id == 'xAxisReferencePlotLine') {
						xAxisReferencePLotlineValue = xAxis.plotLinesAndBands[index].options.value;
					}
				}

				var topLeftLabelValue;
				for (var index1 = 0; index1 < xAxis.plotLinesAndBands.length; index1++) {
					if (xAxis.plotLinesAndBands[index1].id == 'topLeftQuadrantLabelPlotLineDummy') {
          console.log('test');
						topLeftLabelValue = xAxis.plotLinesAndBands[index1].options.label.text;
					}
				}

				var xPlotLine = Highcharts.charts[0].xAxis[0].toPixels(xAxisReferencePLotlineValue, true),
				plotSizeX = this.plotSizeX,
				plotLeft = this.plotLeft,
				leftSide = xPlotLine,
				rightSide = plotSizeX - leftSide;

				plotLineActual.value = xAxis.min;
				plotLineActual.label.style.width = leftSide + 'px';
				plotLineActual.label.text = topLeftLabelValue;

				xAxis.removePlotLine('topLeftQuadrantLabelPlotLineDummy');
				xAxis.addPlotLine(plotLineActual);

				console.log('label value' + topLeftLabelValue);
				console.log('Left side: ' + leftSide);
				console.log('Right side: ' + rightSide);
				console.log('Full x plot area: ' + (leftSide + rightSide));

			}
		}
	},
	"plotOptions": {
		"scatter": {
			"marker": {
				"lineWidth": 2
			}
		},
		"series": {
			"showInLegend": false
		}
	},
	"legend": {
		"enabled": false
	},
	"tooltip": {
		"backgroundColor": "#5F5F5F",
		"borderColor": "#5F5F5F",
		"shadow":...