netdjw netdjw - 6 months ago 170
jQuery Question

Highcharts background image size option

I'm using Highcharts to render charts on webpage. Now I found an issue if I use

min-width
and
max-width
CSS option on container div:

<div id="container" style="min-width: 310px; max-width: 960px; height:400px;"></div>


I added a background image with this method:

Highcharts.theme = {
chart: {
backgroundColor: '#FFFFFF',
plotBackgroundImage: '/path/to/mybackgroundimage.png'
}
};


This image has 960px width and 400px height and it shows well on desktops, but if I check it on mobile devices the image's apect ratio has gone and the image become distorted.

Is there a
backgroundSize:'cover'
or something like this to fix the image position and size on different screen widths?

Answer

You can disable the plotBackgroundImage parameter and set the backgroundColor as transparent. Then apply the background img in CSS (for the container).

CSS

#container {
   background:url(https://www.highcharts.com/samples/graphics/skies.jpg) 0% 0%;
   background-size:cover;
}

chart:

chart: {
   backgroundColor: 'rgba(0,0,0,0)',
   type: 'line'
}

Example - http://jsfiddle.net/4q7atyt9/

Comments