Highcharts Annotations Demo

author(s): Sebastian Domas

by Haze32

HTML

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

<div id="container"></div>

CSS

body{
  background:#000
}

JavaScript

Highcharts.chart('container',


{
	//▼▼▼ UPDATE DATA HERE ▼▼▼
	series: [
		{
			name: 'Private Credit',
			data: [
				0.07, // 5% of 1.4
				0.912 // 24% of 3.8
			]
		},
		{
			name: 'High Yield and Senior Loans',
			data: [
				1.33, // 95% of 1.4
				2.888 // 76% of 3.8
			]
		},
	],
	xAxis: {
		categories: [
			"2005",
			"2022",
		],
	},
	//▲▲▲ UPDATE DATA HERE ▲▲▲
	chart: {
		type: 'column',
		backgroundColor: "transparent",
		animation: false,
		height: 440,
		events: {
			load: function() {
				const data1 = this.series[0].yData;
				const data2 = this.series[1].yData;
				const yAxisMax = this.yAxis[0]?.dataMax;

				const [ yAxis1, yAxis2] = data1.map((value, index) => value + data2[index]);
				const yAxisBuffer = 0.05;

				const yAxis1Point = yAxis1 >= yAxis2 ? yAxis1 - yAxisBuffer : yAxis1 + yAxisBuffer;
				const yAxis2Point = yAxis2 >= yAxis1 ? yAxis2 - yAxisBuffer : yAxis2 + yAxisBuffer;
				
				this.update({
					series: [
						{
							color: '#C39D78',
						},
						{
							color: "#4C9F8B",
						},
					],
					yAxis: {
						max: yAxisMax + 0.25, // 0.3 acts as a buffer for higher values (eg: 2.9)
					},
					xAxis: {
						crosshair: true,
						lineColor: '#fff',
						// lineWidth: 1.5,
						labels: {
							enabled: true,
							style: {
								fontSize: '18px',
								fontWeight: '500',
								color: '#fff',
							}
						},
					},
					annotations: [{
						shapes: [{
							points: [
								{
									xAxis: 0,
									yAxis: 0,
									x: 0.31,
									y: yAxis1Point,
								},
								{
									xAxis: 0,
									yAxis: 0,
									x: 0.69,
									y: yAxis2Point,
								}
							],
						}]
					}],
				});
			},
		}
	},
	title: {
		text: '',
		style: {
			fontSize: '18px',
			fontWeight: '400',
			color: '#fff',
		}
	},
	subtitle: {
		text: ''
	},
	yAxis: {
		gridLineWidth: 0,
		labels: {
			enabled: false,
		},
		title: {
			enabled: false
		},
		tickInterval: 0.5,
		stackLabels: {
			enabled:...