How do I get my highcharts to reduce in size when the window is resized down

Question

I'm having trouble getting my highchart to reduce in size when the window is resized down.

I have created an example of my code in JSFiddle http://jsfiddle.net/britboy/UvFaQ/

<table border='1' width='100%'><tr><td width='100%'>
<div id="container" width='100%'></div>
</td></tr></table>

Its a simple Highchart chart displayed in a table - if I make the window bigger the chart expands, however if I make the window smaller the chart doesn't want to reduce instead the table gets scroll bars.

I've tried setting up a resize event and then adjusting the chart size with chart.setSize( ) but the problem is the div containing the chart never reduces any further in size, so the setSize() does not get triggered. Since the chart resizes automatically when the chart container gets bigger I would have though the same should work when the chart gets smaller. I think the problem is that the chart's size is preventing its container from shrinking.

How do I code a chart in a table that will reduce in size when the table is reduced? Thanks

Answer 1

There are n number of ways to accomplish it.

One would be as pointed out by @Azeem. in the comment.

Other way, I actually, bind it with window. Whenever the window re-sizes, bind event would trigger a function to re-size the div element used to render the chart.

$(window).bind("resize", resizeChart);

then,

function resizeChart() {
    var width = $(document).width() - 55;
    var height = $(document).height() - 60;
    $("#container").css("width", width);
    $("#container").css("height", height);
}

Check out the sample fiddle here.

Answer 2

Try this method :

var chart = $('#graph1').highcharts();
var DetailsWidth = $('#graph1');

http://jsfiddle.net/cjohn/5ghzk4t8/4/

Answer 3

[Adding a solution for react-highcharts here, because this pops up as first SO solution when searching for "react-highcharts shrink" on Google]

For react-highcharts you can simply call the React Component forceUpdate() method in the window resize event listener. It will trigger Highcharts to redraw to the new, smaller area. See also Rerender view on browser resize with React

NOTE: my code was tested using flex-auto (see CSS Flexible Box Layout) in the parent and the Highcharts DOM elements. It would be interesting to know if this works for other layouts too.

import React      from 'react';
import Highcharts from 'react-highcharts';
...
export default class Chart extends React.Component {
    constructor(props) {
        ...
        // install callbacks
        this.resize = () => {
            // throttle resize events as redraw is expensive
            if (this.timeout)
                return;

            this.timeout = setTimeout(
                () => {
                    // force Highcharts to always adhere
                    // to changes in the view area
                    this.forceUpdate();
                    this.timeout = undefined;
                },
                50); // milliseconds
        };
        ...
    }
    ...
    componentDidMount() {
        ...
        // listen to window resize events
        window.addEventListener('resize', this.resize);
        ...
    }
    ...
    componentWillUnmount() {
        ...
        // remove listener when component goes away
        window.removeEventListener('resize', this.resize);
        if (this.timeout) {
            clearTimeout(this.timeout);
            this.timeout = undefined;
        }
        ...
    }
    ...
    render() {
        ...
        return (
            <Highcharts
                config={...}
                domProps={{
                    className: 'd-flex flex-auto',
                    ...
                }}
                ...
            />
        );
    }
    ...
}