dpitfield
Posts: 2
Joined: Sat Dec 01, 2018 12:57 am
Contact: Website

Viewing Charts on Mobile Devices (Resizing)

Fri Dec 07, 2018 4:42 pm

I have some charts configured from a while ago that I am struggling to get to display well on mobile devices. How can I make these resize in scale with the viewing device. on the phone sideways on and on the tablet sized devices it looks pretty bad and fills the full width. Ideally I would like the two charts to be side by side as they are on the desktop version.

How do I control the view ports on tha tablet and phone. I just want them to resize nicely.

Here is an example of the charts. (They are embedded in tabs also, fyi).

https://www.professionalsoccercoaching. ... rondo-7vs3

If you view this page on a tablet/ phone in landscape view you should be able to see the issue.

Thanks,
Darren

dpitfield
Posts: 2
Joined: Sat Dec 01, 2018 12:57 am
Contact: Website

Re: Viewing Charts on Mobile Devices (Resizing)

Fri Dec 07, 2018 4:53 pm

here are some screen shot examples:
from page: https://www.professionalsoccercoaching. ... rondo-7vs3

Image
Image

rafalS
Posts: 693
Joined: Thu Jun 14, 2018 11:40 am

Re: Viewing Charts on Mobile Devices (Resizing)

Fri Dec 07, 2018 5:53 pm

Hi, Darren!

I am starting seeing a problem at 1100px width with a pink chart (left one). Its width is less than 180px - note that it is really low for charts. At this point, you should consider using responsive options for chart: https://api.highcharts.com/highcharts/responsive
You can hide y-axis label or title for example, decrease font size, margins or axes' offsets.

Also, you should consider setting margin-right: 0 in your ul container with id set-rl_tabs-2.

There are no other (magic) ways to scale charts. A natural way to deal with not-looking-nice containers writing responsive websites is to place them vertically (not side by side).

Best regards!
Rafal Sebestjanski,
Highcharts Developer

Return to “Highcharts Usage”