uxfish
Posts: 2
Joined: Fri Apr 30, 2021 9:27 am

Time Series comparison by combining two line/stacked bar/stacked area charts

Hi, I'm trying to design a comparison visualisation across two time frames and need visualisation as a line chart , stacked area and stacked bar chart. ImageHere is what I am having in mind for the design.


Similarly I will have stacked area and stacked bar charts following similar design like so;
Image

One thing to note is interactions like hover needs to highlight corresponding sections on both graphs. E.g. if i hover on jan 1, the highlight should also appear on Dec 1 to which it is being compared against.

Is this something doable with highcharts? If so, could you please point me to the right section/documentation to read up?

Thank you!
uxfish
Posts: 2
Joined: Fri Apr 30, 2021 9:27 am

Re: Time Series comparison by combining two line/stacked bar/stacked area charts

For some reason, the images aren't loading. So please refer to these links
https://imgur.com/a/E7uKQrs
https://imgur.com/SnuVXZ2
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Time Series comparison by combining two line/stacked bar/stacked area charts

Hello uxfish!

Welcome to our forum and thanks for contacting us with your question!

I think that the best idea would be to create two x-axes and split series for each of them. The line in the center can be drawn using plotLines. I've prepared a very simple demo so you could get familiar with these properties and adjust them to your needs. :)

API references:
https://api.highcharts.com/highcharts/xAxis.plotLines
https://api.highcharts.com/highcharts/xAxis.width
https://api.highcharts.com/highcharts/xAxis.left
https://api.highcharts.com/highcharts/series.line.xAxis

Demo:
https://jsfiddle.net/BlackLabel/nkmd6tah/

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”