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

Viewing Charts on Mobile Devices (Resizing)

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).

hidden link

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

Thanks,
Darren
dpitfield
Posts: 3
Joined: Sat Dec 01, 2018 12:57 am
Contact: Website

Re: Viewing Charts on Mobile Devices (Resizing)

here are some screen shot examples:
from page: hidden link

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

Re: Viewing Charts on Mobile Devices (Resizing)

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 Team Lead
dpitfield
Posts: 3
Joined: Sat Dec 01, 2018 12:57 am
Contact: Website

Re: Viewing Charts on Mobile Devices (Resizing)

Thanks, I'll see what I can do with these ideas. I'm going to look into the responsive options for sure. I'll let you know any more questions. I plan on putting more types of highcharts on hidden link in various places.

I may need to hire a high charts expert. Is there are good resource or forum to hire reliable professionals?

Thx
Darren
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Viewing Charts on Mobile Devices (Resizing)

Hi, Darren,

If you want to hire Highcharts experts, you can contact Black Label company.

www.blacklabel.pl
[email protected]

And forgive me, but I have to remove links from your posts because we have been struggling with many fake accounts and spam posts in which fake users are trying to position their websites through our forum.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”