rishi416
Posts: 4
Joined: Tue Nov 30, 2021 5:55 pm

include multiple graphs in a single chart container

Tue Nov 30, 2021 6:32 pm

Hi,

I need to include multiple graphs in a single chart container with different series' for each chart. Title, axes & legend are shared for all graphs in the container. Sample graph is attached. In the container, there are 3 separate graphs - USA, India & Japan with x-axis categories as [Q1, Q2, Q3, Q4] for each graph and 2 series for 2020 & 2021 are compared in each graph separately with column chart type. Y-axis scale is shared for all 3 graphs. Is there a way to achieve this in highcharts?
Attachments
YoY graph.png.png
YoY graph.png.png (30.26 KiB) Viewed 172 times

mateusz.b
Posts: 1069
Joined: Tue Jul 13, 2021 11:34 am

Re: include multiple graphs in a single chart container

Wed Dec 01, 2021 10:35 am

Hi rishi416,

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

Yes, you can create chart like that with highcharts.
Demo: https://jsfiddle.net/BlackLabel/s1owp3va/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

rishi416
Posts: 4
Joined: Tue Nov 30, 2021 5:55 pm

Re: include multiple graphs in a single chart container

Wed Dec 01, 2021 5:17 pm

Hi mateusz.b,

Thanks for the response! It looks great. Only issue seems to be that the x axis labels are somewhat misaligned compared to the required graph for USA and Japan graphs in the jsfiddle link. Is there an option to align it properly along the xaxis?

Regards!

rishi416
Posts: 4
Joined: Tue Nov 30, 2021 5:55 pm

Re: include multiple graphs in a single chart container

Wed Dec 01, 2021 6:07 pm

Hi mateusz.b,

Another issue is if we add a scatter plot series along with the current column charts, the scatter plot markers are not aligned with the columns properly. We need the scatter plot along with the column charts to look similar to the attached image. But we get result as in this fiddle https://jsfiddle.net/ut2fn9k6/ .

Also, how can we include a scatter plot marker as shown in the attached image which is a single line segment. The default symbols available for markers doesn't contain this and we don't want to use an img for the same.

Regards!
Attachments
scatter line graph.png
scatter line graph.png (28.74 KiB) Viewed 132 times

mateusz.b
Posts: 1069
Joined: Tue Jul 13, 2021 11:34 am

Re: include multiple graphs in a single chart container

Thu Dec 02, 2021 10:44 am

Hello rishi416,

It seems like there is a bug with columns alignment when there is more than one X axis. I will report that issue and provide you with ticket once it is done. I have workaround for it already, you will find it in a demo.

Looking at your attached image, the chart looks exactly like bullet series, so my suggestion is to use it instead of column series because target markers are already build in. Check these docs to get familiar with data format: https://api.highcharts.com/highcharts/s ... ullet.data
Demo: https://jsfiddle.net/BlackLabel/ktsrd05o/

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer

rishi416
Posts: 4
Joined: Tue Nov 30, 2021 5:55 pm

Re: include multiple graphs in a single chart container

Thu Dec 02, 2021 7:04 pm

Hi Mateusz.b,

Thanks for the help! bullet series fits perfectly for our use case. I've checked the workaround of defining additional series types as bullet2/3 for solving the misalignment issue. What's the expected timeline for the permanent fix of this issue? I need the fix as this is affecting another chart.

In https://jsfiddle.net/rishi416/c1a5mt7f/29/ , I've used the workaround. I need to show the totals of each stack on top using stackLabels option for y axis. It's working for the first group of categories with xAxis: 0, but not for other groups xAxis - 1/2. If I remove the workaround and use type 'column" for all series', then the stack sums are visible but they're not aligned and all appear on top of first xAxis category group . Fiddle without workaround https://jsfiddle.net/rishi416/c1a5mt7f/34/ .

It appears stackLabels prop is tied with the chart type, Can you help suggest another way to show stack sums in this case?

Regards!

mateusz.b
Posts: 1069
Joined: Tue Jul 13, 2021 11:34 am

Re: include multiple graphs in a single chart container

Fri Dec 03, 2021 2:59 pm

hi rishi416,

It seems like the bug also affects stack labels. Unfortunately I wasn't able to create workaround for that yet.

Meanwhile, I have create a ticket for this bug: https://github.com/highcharts/highcharts/issues/16747
Please leave your feedback there with description of your problem. Please also ask about ETA for fix. I will try to create workaround asap.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”