Resizing Highchart based on window size

Question

Hi i have left navigation menu, and content on right side which is a highchart. Following is my Highchart config,

this.InputData = {

            chart: { type: 'column' },
            title : { text : 'Overview' },  

            xAxis: {
                categories: this._weekValues
            },
            yAxis: {
                allowDecimals: false,
                title: { text: 'some title'},
                min: 0,
                max: 100,
                labels: {
                    formatter:function() {
                        var pcnt = (this.value / 100) * 100;
                        return Highcharts.numberFormat(pcnt, 0) + '%';
                    }
                }
            }
        }

And I have a function which will be triggered on change the size of my left menu,

this.menuEvent.onChangeLeftMenu().subscribe(()=>{
            Observable.timer().subscribe(()=>{
                console.log('highchart redraw?');
            });
        });

How can I redraw or resize my chart on changing my leftmenu size? Currently the chart is overflowing from my div wrapper. Thanks in advance guys.

score 2 · Answer 1 · answered Apr 03 '17 at 10:30

reflow ()

Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.

$('#reflow-chart').click(function () {
    chart.reflow();
});

Fiddle

It will be helpful to sort problem, if you provide the actual demo may be some plunker link

score 1 · Answer 2 · answered Apr 03 '17 at 11:02

JS Fiddle

 $('#add').click(function () {
chart.addAxis({ // Secondary yAxis
    id: 'rainfall-axis',
    title: {
        text: 'Rainfall'
    },
    lineWidth: 2,
    lineColor: '#08F',
    opposite: true
});
chart.addSeries({
    name: 'Rainfall',
    type: 'column',
    color: '#08F',
    yAxis: 'rainfall-axis',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  $(this).attr('disabled', true);
  $('#remove').attr('disabled', false);
});
 $('#remove').click(function () {
  chart.get('temperature-axis').remove();

  $(this).attr('disabled', true);
$('#add').attr('disabled', false);
 });

Resizing Highchart based on window size

2 Answers2