Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

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

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

CSS

#container {
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', 


{
	//▼▼▼ UPDATE DATA HERE ▼▼▼
	series: [{
		/*Pre-Tax Yield*/
		data: [
			null,
			null,
			1.9,
			1.3,
			null
		]
	}, {
	data: [
		/*After-Tax Yield*/
		4.5 /*demand*/ ,
		7.1 /*supply*/ ,
		3.1 /*Investment Grade Corporate Board*/ ,
		2.2 /*supply*/ ,
		3.2 /*supply*/
	]
	}, ],
	//▲▲▲ UPDATE DATA HERE ▲▲▲

	chart: {
		height: 600,
		type: "column",
		backgroundColor: "transparent",
		animation: false,

		events: {
			load: function() {
				var
					colChart = this.series[1],
					col1 = colChart.points[0],
					col2 = colChart.points[1],
					spacer = colChart.points[2],
					spaceColWidth = spacer.shapeArgs.width,
					spacerGap = (69 / 100) * spacer.shapeArgs.width,
					spacerWidth = spacerGap / 3,
					spacerPos = (spacerGap / 2) + (spacerWidth / 2);

				if (this.chartWidth < 600) {
					spacerWidth = spacerGap / 4;
					spacerPos = (spacerGap / 3) + (spacerWidth / 3);
				}

				this.update({
					series: [
						{
							name: 'Pre-Tax Yield',
							color: "#DCDBDC",
							dataLabels: {
								enabled: true,
								verticalAlign: 'top',
								y: -35,
								format: '{point.total:.1f}%',

							}
						},
						{
							name: 'After-Tax Yield',
							color: "#A2A2A2",
						}, 
					],
				});

				spacer.update({
					dataLabels: {
						formatter: function() {
							return `
								<div style="text-align:center">${this.y.toFixed(1)}%</div>
								<div id="spacer" style="height: 100px; position: relative; bottom: 0; width:${spaceColWidth}px">
									<div style="position: absolute; background: #fff; width: ${spacerWidth}px; height: 20px; z-index: 3; left: -${spacerPos}px; bottom: -40px;"></div>
								</div>`;
						},
					},
				});

				col2.update({
					color: "#4C9F8B",
					dataLabels: {
						enabled: true,
						shape: 'callout',
						align: 'center',
						backgroundColor: 'rgb(255, 255, 255)',
						borderColor: 'rgb(12, 159, 139)',
						borderWidth: 1,
						borderRadius: 2,
						width:...