Highcharts official support forum

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?

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!

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!

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!

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!

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!

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!