JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
CSS
div {
width: 800px;
}
JavaScript
Highcharts.chart('container1', {
chart: {
type: 'column',
events: {
load: function() {
const points1 = this.series[2].points;
const points2 = this.series[3].points;
const intersection = [];
for (let i = 1; i < points1.length; i++) {
const intersect = getLineIntersection(points1[i - 1], points1[i], points2[i - 1], points2[i]);
if (intersect) {
intersection.push(intersect);
}
}
const xAxis = this.xAxis[0];
const yAxis = this.yAxis[0];
intersection.forEach(coord => {
const text = this.renderer.text('break point', -999, -999).add();
const anchorX = xAxis.toPixels(coord[0]);
const anchorY = yAxis.toPixels(coord[1]);
const connector = this.renderer.path([
'M', anchorX, anchorY,
'L', anchorX - 5, anchorY - 100
]).attr({
stroke: 'black',
'stroke-width': 1,
zIndex: 99
}).add();
text.attr({
align: 'center',
x: anchorX - 5,
y: anchorY - 110,
zIndex: 99
}).css({
color: 'black',
fontSize: '14px',
fontWeight: 'bold'
});
})
}
}
},
credits: {
enabled: false
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
title: {
text: 'Cash Flow Analysis and Breakdown',
align: 'left',
x: 0,
style: {
color: '#000000',
fontWeight: 'normal',
textTransform: 'Uppercase',
fontSize: '14px',
}
},
xAxis: {
categories: ['Year 0', 'Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
lineColor: '#000000',
lineWidth: 2
},
yAxis: {
min: 0,
tickInterval: 50,
title: {
text: ''
},
gridLineWidth: 0,
lineColor: '#cccccc',
...