d_z90 d_z90 - 18 days ago 10
Javascript Question

Highcharts - margins update on window resize

I am creating an areaspline graph with

highcharts
with a specific margin, which I would like to update on window
resize
. This is the code related to the graph:

var chart = new Highcharts.chart({
chart: {
renderTo : options.element,
marginLeft: -calcOutsideMargin(),
marginRight: -calcOutsideMargin(),
backgroundColor:'rgba(255, 255, 255, 0)',
type: 'areaspline'
},
plotOptions: {
areaspline: {
animation: false,
states: { hover: { enabled: false } },
fillOpacity: 0.5,
marker:{
states:{
select: {
radius: 5,
fillColor: '#ff0000',
lineColor: '#404759'
}
}
}
},
series: series
});


And this is the function that should define the dimensions of the margins:

calcOutsideMargin: function() {
return ((window.addEventListener('resize', window.innerWidth) / 5 ) / 2) + 5;
}


Unluckily I get an error which says that the expected length is
NaN
, and if I use
window.innerWidth
it is not updated. Do you have an idea on how to solve this issue and make the margin updated on window resize?

Thanks in advance for your replies!

EDIT

JSFiddle

Answer

You have some unworking code. charts.marginLeft, charts.marginRight and charts.width do not accept functions for changing the sizes in real time; they accept only variables and function results. You'll have to manually handle the window resize event and do all the work there. You can then change these parameters by using the chart.update method.

My working example with the chart at the center. Resize the window and check both console for the window resize event, and the chars resize animation:

$(function () {
    //var chart;

    function calcOutsideMargin() {
        console.log('margin resize', Date.now());
        return ((window.innerWidth / 5 ) / 2);
    };

    $(window).resize(function() {
        var margin = calcOutsideMargin(),
            width =  window.innerWidth - (margin * 2);
        window.chart.update({
            chart: {
                renderTo: 'container',
                marginLeft: margin, // (vw/5)/2
                marginRight: margin, // (vw/5)/2
                width: width
            }
        });
    });

    var margin = calcOutsideMargin(),
        width =  window.innerWidth - (margin * 2);

    $(document).ready(function() {
        window.chart = new Highcharts.Chart({
            chart: {
              renderTo: 'container',
              marginLeft: margin, // (vw/5)/2
              marginRight: margin, // (vw/5)/2
              width: width, // window.addEventListener("resize", window.innerWidth),
              spacingBottom: 6,
              spacingTop: 0,
              backgroundColor:'rgba(255, 255, 255, 0)',
              type: 'areaspline'
            },
            title: { text: '' },
            legend: { enabled: false },
            xAxis: { visible: false, allowDecimals: false },
            yAxis: { visible: false },
            tooltip: { enabled: false },
            credits: { enabled: false },
            plotOptions: {              
              areaspline: {
              animation: false,
              states: { hover: { enabled: false } },
              fillOpacity: 0.5,
              marker:{
                states:{
                  select: {
                  radius: 5,
                  fillColor: '#ff0000',
                  lineColor: '#404759'
                }
                }
              }
              },
            },
            series: [{
                name: 'F',
                data: [6 , 11, 32, 110, 235, 369, 640, 1005, 1436 ]
            }, {
                name: 'C',
                data: [5, 25, 50, 120, 150, 200, 426, 660, 869, 1060]
            }]
        });
    });
});

I have also added this CSS code just to have the chart align at the center:

#container > div {
    margin:auto;
}

You can check my full working example here: http://zikro.gr/dbg/html/highcharts.html