Resize highcharts using react-grid-layout not working

Question

I am working in react and using highcharts with react-grid-layout to resize the elements in div. Somehow resizable feature is working for images but not with highchart. Grid.js is a file that makes ResponsiveReactGridLayout and it gets the highchart from chart.js file. Please find the code below.

//Grid.js
import React, { Component } from 'react';
import {Responsive, WidthProvider,ReactGridLayout} from 'react-grid-layout';
import Charts from './charts.js';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

class Grid extends Component {

    onLayoutChange(layout) {
       console.log(layout);
    }

    render(){
        return (<div style={{borderStyle: 'groove'}}>
                <h2> Panel Header </h2>
                <ResponsiveReactGridLayout className="layout"
                                           breakpoints={{lg: 1200, md: 96, sm: 768}}
                                           cols={{lg: 5, md: 10, sm: 6}}
                                           onLayoutChange={this.onLayoutChange}>

                    <div key="c" data-grid={{x: 0, y: 0, w: 1, h: 3}} style={{ border:'1px solid green', borderStyle: 'groove'}}>
                        <img src="https://cdn.geckoandfly.com/wp-content/uploads/2013/03/530-smiley-face.jpg" style={{width:'inherit', height:'inherit'}} />
                    </div>
                    <div key="d" className = 'react-grid-item react-resizable'
                         data-grid={{x: 1, y: 0, w: 1, h: 3}} style={{ border:'1px solid green', borderStyle: 'groove'}}
                        >
                        <Charts style={{width:'inherit'}} id={'Chart 1'}/>
                    </div>
                    <div key="e" data-grid={{x: 2, y: 0, w: 1, h: 3}} style={{ border:'1px solid green',borderStyle: 'groove'}}>
                        <Charts style={{width:'inherit'}} id={'Chart 2'}/>
                    </div>
                    <div key="f" data-grid={{x: 3, y: 0, w: 1, h: 3}} style={{ border:'1px solid green',borderStyle: 'groove'}}>
                        <Charts style={{width:'inherit'}} id={'Chart 3'}/>
                    </div>
                </ResponsiveReactGridLayout>
            </div>
        )
    }
}
export default (Grid);


//Charts.js
import React, { Component } from 'react';
const Highcharts = require('highcharts');
class Charts extends Component{
    constructor(props){
        super(props);
        this.state = {
                data : {
                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, 295.6, 454.4]
                }]
            },
            pieData: [{name: "Firefox",y: 6},{name: "MSIE",y: 4},{name: "Safari",y: 4},{name: "Opera",y: 1},{name: "Chrome",y: 7}]
        };
    }

    /**
     * Inject highcharts markup into the DOM after the rest of the component has mounted
     * @return {None}
     */
    componentDidMount() {
        // Load in any highcharts modules
        if (this.props.modules) {
            this.props.module.forEach((module) => {
                module(Highcharts);
            });
        }

        // Create the actual chart and assign reference
        const props = this.processPropsModel(this.props);
        const containerRef = `container${props.id}`;
        this.chart = new Highcharts.chart(
            containerRef,
            props.options
        );
    }

    processPropsModel(props) {
        const newProps = {};
        newProps.id = this.props.id;
        newProps.options = this.generateDefaultOptions();
        return newProps;
    }

    /**
     * Generating some default chart options for placeholding purposes
     * @return {Object}       The options to be passed into the chart
     */
    generateDefaultOptions() {
        return {

            title: {
                text: this.props.id,
                x: -20 //center
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            tooltip: {
                valueSuffix: '°C'
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        };
    }

    render(){
        const props = this.processPropsModel(this.props);
        return (
            <div id={`container${props.id}`}>
            </div>
        );
    }
}
export default Charts;

Answer 1

So, I was struggling with the same issue using highcharts-react-official and react-grid-layout.

Here is how I finally got it working.

---

tl;dr

1. Give height 100% to all of your chart's parents up to the grid item.
2. There is an annoying div that highcharts creates by himself. Find a way to identify it and give it height 100%.
3. Give height 100% to the chart itself.
4. Use the react highcharts callback to get your chart object.
5. When your component updates reflow your chart.

---

Below is my responsive grid layout, just to give some context.

// Component/Grid/Grid.js
<ResponsiveGridLayout
    ...
>
    {this.state.widgets.map((widget) =>
        <Card key={widget.DWG_ID}>
            <Widget
                widget={widget}
            />
        </Card>
    )}
</ResponsiveGridLayout>

Now, inside the Widget Component, set the height of any div that will be a parent of your highchart to 100%.

// Component/Widget/Widget.js
<CardBody className="widgetContent">
    <CardTitle className="widget-title">{this.props.widget.DWG_LABEL}</CardTitle>
    <Chart      
        widget={this.props.widget}
    />}     
</CardBody>   

For the jsx above I only needed to do this for the element CardBody with class widgetContent, so

// Component/Widget/Widget.css
.widgetContent { height: 100%; }

Now, in the chart component (where all the fun was), I had to create a very ugly div just to be able to identify the outer-most div that highcharts creates.

elements created by highcharts

The infamous div in question can be seen in the image above, right under the div with class highchartsWrapper, with the property data-highcharts-chart . This div was the only parent of my chart that I could not identify directly to give 100% height. So I created the wrapper to be able to identify it unequivocally. Note that in the chart options we passed a class name as well, to be able to give the chart itself the css height property.

If anybody has a neater idea of how to identify this problematic div please let me know.

// Component/Chart/Chart.js
options = {
    ...
    chart: { className: 'chart' }
}
<div className="highchartsWrapper">
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        callback={(chart) => this.setChart(chart)}
    />
</div>

So I could give it the css

// Component/Chart/Chart.css
.highchartsWrapper > div {
    height: 100%;
}
.chart {
    height: 100%;
}

Now your highchart would ideally assume the correct width and height. But there was another complication: when the highchart renders for the first time and checks his parent's height, react-grid-layout isn't yet done with his resizing magic. This means your chart will be teeny-tiny. Moreover, when you resize your grid items you want your highchart to resize to its new parent size. But wait, I've worked with highcharts before, I know how to do this! The good old chart.reflow() ! Unfortunately this ended up not being that easy.

To start with, just getting the chart object on which I can call reflow wasn't very straightforward. If you notice, I gave my HighchartsReact a callback

(chart) => this.setChart(chart)

This is just to store the chart object as a property of my class component. My setChart function does only the following:

setChart(chart) {
    this.chart = chart;
}

It might seem stupid to do it like this. Why not just give setChart directly to the callback property of HighchartsReact? Well because if you do, as per the highcharts-react-official documentation, your this inside the setChart function would be your chart object... All very confusing, but it seems to work like this.

Again, if somebody has a neater solution, let me know

Finally, we can call our this.chart.reflow() when our Chart Component is updated. what I did was something like

constructor() {
    super(props)

    this.firstResize = true;
}

componentDidUpdate(prevProps) {

    if (this.didWidgetSizeChange(prevProps) || this.isFirstResize) {
        this.chart.reflow();
        this.isFirstResize = false;
    }
}

When the component updates we call the chart reflow. On the componentDidMount the grid item doesn't have his final size yet, so I used a flag to figure out the first update (that would be exactly that: grid item has finished first resize). Then for any other update I wrote a function that basically compares the previous layout for this grid item with the new to decide if the size or width have changed. If so, we reflow again to resize the highcharts to the new grid item size.

Hope this helps!

Peace!