svi svi - 4 months ago 9
HTML Question

High chart background and other components are not working as usual

I'm working on a similar project as this-one here.

body{
background-image:url(http://wolf-on-wall-street.com/images/new_york_city_madness_wallp.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}


I don't know why but I can't edit the page as usual... I can't add background image (I tried adding it through js and css as well), it seems that everything I add to HTML and CSS it goes straight behind the chart... I tried to erase any kind of background color in the javascript code, but still..

Answer

you can try this one:

Html

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

CSS:

 body{
        background-image:url(http://wolf-on-wall-street.com/images/new_york_city_madness_wallp.jpg);
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
    }

Js

$(function () {
    var aChart = new Highcharts.Chart({
        chart: {
            type: 'line',
            renderTo:"container",
            plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });

    /*change the image like------*/
aChart.options.chart.plotBackgroundImage='http://upload.wikimedia.org/wikipedia/commons/a/a6/Roses_renoir.JPG';
aChart = new Highcharts.Chart(aChart.options);

});

UPDATED DEMO

Comments