Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Spacing between charts

When I check all charts, I want certain amount of space between each chart. So that the max and min value of two charts doesn't merge and page look more presentable.

// changed height from 100 to 95 - to give some space between charts
height: `${95 / checkedCheckboxes}%`,

1)But I do not want space between x - axis and the chart that is shown on top of it.
2)Also, how do I remove x -axis gridlines that are shown in-between two charts.

Fiddle below:
https://jsfiddle.net/4otchks2/282/

Thank you.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Spacing between charts

Hi Sr270!
Thanks for contacting us with your question!

You can achieve it by using more custom JS code, it starting to look complicated. I have added more xAxes to make space between charts and also another fake series with a fake axis to use as the main axis.

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

Let me know if that was what you were looking for.
Regards!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Spacing between charts

That 's amazing!. Exactly what I am looking for. Thanks a lot.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Spacing between charts

You're welcome! All the best to you!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Spacing between charts

Hi,

I face a issue while incorporating this on mine. I had plotlines (three green vertical lines) plotted on all three graphs. But now it plots only on first graph. I have added plotline code for understanding.

Please find fiddle below:
https://jsfiddle.net/mLbntx4g/14/

I would like plotlines to be on all three graphs. Thank you.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Spacing between charts

Sr270,

Now, you have three xAxes, so if you want to have plotLines on all axes you have to iterate over them and add plotLines - like in the demo below.

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

Regards!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Spacing between charts

Hi, thanks for your answer. But it is starting to look quite complicated. As I plan to use many number of charts in a same page, like 15 0r so. So I would prefer if you could provide me any other option that can be used as distinguishing factor between multiple charts. Like thick border between them, removing last number in each y-axis scale, so that it doesn't merge with first number in next chart.. Thank you.

https://jsfiddle.net/7pvx2o41/
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Spacing between charts

When I add my own data (data from json file) to the previous demo (https://jsfiddle.net/BlackLabel/L84qpy0f/), graph does not show up. Page becomes blank except for x and y axis lines (no scale, gridlines or graph is plotted).

series: [{
data = dataFrom Json; // does not work
yAxis: 0,
xAxis: 0,
]}

It works only when I add data directly like below:
series: [{
data = [2,4,6,8,1,0] // works
]}

May I know why this is happening.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Spacing between charts

Sr270,
as another approach, you can use Highcharts SVG Renderer to render custom lines on proper positions related to yAxes. To hide the last label you can use set yAxis.showLastLabel to false.

Demo: https://jsfiddle.net/BlackLabel/aonbm5g0/
API Reference: https://api.highcharts.com/highcharts/y ... wLastLabel

Referring to your second post, I cannot help you, because I don't know what your data is. Probably, you don't have properties like x and y in your objects or something else is broken. All you have to do is compare if your data is in the correct format, like here: https://api.highcharts.com/highcharts/series.line.data

Regards!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Spacing between charts

Hi,

Reason for asking was that my chart was working fine with Json data until the spacing functionality was incorporated. Was wondering what could be the problem. Thanks for the link regarding data format. I will have a look into it.

Provided solution is a good alternative. Thanks a lot. I really appreciate it.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Spacing between charts

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Spacing between charts

Hi,

Please find the fiddle: https://jsfiddle.net/ozctfbsL/7/

Tooltip need to be shown when clicked on column and spline chart part of plotline as well. Now, tooltip shows only when clicked on line chart. Thank you in advance.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Spacing between charts

Sr270,
The behaviour, that tooltips on plotlines weren't shown is caused by creating a fake point only for the first series, which is the line series. If you add some more custom JS code, which will handle all series, tooltips will work on all types of series.

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

Regards!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Spacing between charts

I was using the below solution to differentiate between charts.
https://jsfiddle.net/BlackLabel/aonbm5g0/

But dark black line that differentiates charts goes beyond y axis (to the left) while zoomed. Or goes above zero when unzoomed when used in my code. Please see pics of the same.
https://ibb.co/0nYzL0s
https://ibb.co/rfvYTyw

Also, if series data itself is [0,0,0,0,0]. Then it shows the same dark black line that separates charts. Which is little confusing.

How can this be fixed? or I would appreciate if we have any other solution for spacing or differentiating between charts. Thanks a lot.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Spacing between charts

Sr270,
I have found, that you have asked the same question on another topic here: viewtopic.php?f=9&t=49570#p180640
Please do not duplicate topics on our forum it would be best to just wait for an answer there.

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”