eelioss
Posts: 5
Joined: Fri Feb 16, 2024 6:52 pm

Responsive area chart

Hi,

I would like to create an area chart in a self-contained HTML (styles and javascript, all included), adapted for smartphone visualization. So far I tried to copy the example in your website https://www.highcharts.com/demo/highcha ... range-line, but after a few tries I am not able to make it responsive for smartphone visualization.

Concretely, I took the CSS, HTML and JS from the JSfiddle and put everything together in a single HTML file (sections styles for CSS, and script for JS). I can see the chart and it works well, but it is not responsive.

Could you help me?
Thanks!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Responsive area chart

Hello and welcome on our forum!

Can you elaborate on how it's not responsive? Does the chart display incorrectly on mobile devices or, for example, in fullHD width? If you want the chart to always cover the entire width of the browser window, you should remove the styles associated with the max-width chart.

Code: Select all

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px; /* <--- this property limits the width */
    margin: 1em auto;
}
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
eelioss
Posts: 5
Joined: Fri Feb 16, 2024 6:52 pm

Re: Responsive area chart

I would like to get this:
Image

but instead I get this:
Image

I did a few more tries but I wasn't able to do it.
Thanks!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Responsive area chart

Hi

The screenshot explains a lot. It literally looks like you had zoomed out in the browser, because the problem is not only with the chart but also with the text, it is smaller, which means that the view is distant.

https://support.google.com/chrome/answe ... %3DDesktop
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
eelioss
Posts: 5
Joined: Fri Feb 16, 2024 6:52 pm

Re: Responsive area chart

This looks very similar to what I get in my smartphone, so I think this is not a matter of zooming in chrome.

It looks like in your website:
https://www.highcharts.com/demo/highcha ... range-line

You have some extra features that adapt nicely (fontsizes, size of chart, etc) to the screen size, in such a way that I am not able to replicate.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Responsive area chart

So are you able to reproduce this in a clean demo on JSFiddle or another online editor? Because it's hard to say what could be the problem. I can only guess what's missing the point.
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
eelioss
Posts: 5
Joined: Fri Feb 16, 2024 6:52 pm

Re: Responsive area chart

You can check this HTML:
https://loudalarmbin.s3.eu-west-1.amazo ... /plot.html

that illustrate the problem I am having.

Thanks for your answers!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Responsive area chart

Hi

I checked this demo and it looks correct on the desktop in devtools with a resolution of 400px. I also checked what it looks like on mobile devices and there the problem actually occurs. I checked the source code and the problem is that the basic HTML structure is missing, i.e. <html>, <head>, <body> tags and the basic viewport meta tag, and it is its absence that causes this problem:

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1" />

MDN Docs: https://developer.mozilla.org/en-US/doc ... t_meta_tag
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”