Chart not responsive - width stuck at 600px no matter what I do

[tonym99]

I'm stuck with a fixed width and height of 600px and 400px respectively no matter what the browser is narrowed to. The demos all seem to be responsive, but for some reason mine is stuck at 600px.

This is the resulting div for the chart after rendering:

This is my chart definition/options:

chart: {
backgroundColor: 'transparent',
marginTop: 10,
marginBottom: 50,
animation: false,
type: 'column'
},
title: { text: null },
scrollbar: {
enabled: true
},
reflow: true,

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 1000
                },
                chartOptions: {
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal'
                    },
                    yAxis: {
                        labels: {
                            align: 'left',
                            x: 0,
                            y: -5
                        },
                        title: {
                            text: null
                        }
                    },
                    subtitle: {
                        text: null
                    }
                }
            }]
        },
        legend: {
            enabled: false,
        },
        yAxis: {
            min: 0,
            max: maxval,
            stackLabels: {
                formatter: function () { return '$' + that.currencyPipe.transform(this.total, 'USD', true, '1.0-0'); }
            },
            title: { text: null },
            labels: {
                formatter: function () { return '$' + that.currencyPipe.transform(this.value, 'USD', true, '1.0-0'); }
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b>: ' + that.currencyPipe.transform(this.point.y, 'USD', true, '1.0-0');
            }
        },
        plotOptions: {
            series: {
                animation: false
            },
            column: {
                borderWidth: 0,

                stacking: 'normal',
                events: {
                    legendItemClick: function () {
                        return false; 
                    }
                }
            }
        }

Anyone??

[tonym99]

solved it -

CSS

chart{
display: block;
width: 100%;
}

[rrrroooonnnn]

this seems to work if your chart isnt in a dynamic container. I have a sidebar that toggles open but the chart always remains the same size whether or not the sidenav is open or closed. the documentation doesnt give a thorough example of accessing the chart.reflow function so I've been unable to figure that out. anyone experience something similar with dynamic containers?

i just need the chart to stretch and shrink as the sidenav toggles open and closed.

[as88425]

@snekkysnek did u find any solutions for the same actually i also looking for the same requirement

[rrrroooonnnn]

@as88425 no not yet but i believe calling chart.reflow() is the only solution. that being said, I haven't been able to successfully do this but will update if i figure it out.

[as88425]

@snekkysnek i achieved the same using chart.ref.setSize(some dynamic width, some dynamic height, false) for angular 5. i thought it's also work for angular 2

[rrrroooonnnn]

@as88425 can you show me the context where you used chart.ref.setSize. that might work for me too i just dont know where/how to use it.

[as88425]

@snekkysnek Please see the below example

let chartMonthly = new Chart({
                chart: {
                    renderTo: '0',
                    //type: 'column',
                    // width: 508,
                    zoomType: 'x',
                    reflow: true


                },
                title: {
                    text: ''
                },
......
});

so here i defined chartMonthly as a variable
Then i am going to set the size of chart using below code

reflowchart(event) {        
        setTimeout(() => {   
            var width = Some dynamic width 
            this.chartMonthly.ref.setSize(width, 400, false);
        }
```, 300);
    }

i called `reflowchart` function on my html.

Note =>  this.chartMonthly.ref means i am accessing a.chart value which is $('#container').Highchart() from jquery method .