Column Chart Serie Data Difference Presentation

[emre25]

https://i.ibb.co/dP1PzXF/Question-high-chart.png

I want to indicate the difference between two series values in a column chart in a third series as shown in the image above.

How can I do that ?

[hubert.k]

Hello emre25!
Thanks for contacting us with your question!

You can achieve it by using Highcharts SVG Renderer to create a circle and label. Also, you will need some logic to calculate differences between points of the same place in two series.

Demo: https://jsfiddle.net/BlackLabel/43z2b9oc/
API Reference: https://api.highcharts.com/class-refere ... VGRenderer

Regards!

[emre25]

Hi Hubert, Thanks for the answer.

I tried the demo you shared in my Angular.js application in typescript version 4.0.5.

But TS2339: Property 'customLabel' does not exist on type 'Point'. I am getting an error like

Do you have any solution suggestions?
Thank you in advance for your answer.

[hubert.k]

emre25,

It is normal behaviour, we are adding some custom properties to Point objects, so TypeScript needs some clarification on what is it. You can check the official docs about it here: https://github.com/highcharts/highchart ... n-type-yyy

Also, I have prepared the same demo using Angular. Here it is: https://stackblitz.com/edit/highcharts- ... ist-8nqdn2

Feel free to ask any further questions.
Kind regards!