react-highcharts: canvas size changes when changing tabs - reactjs

Question

Description
I have a Highcharts line chart in a "progress" tab (the tab is a react-bootstrap Tab). When I open the "progress" tab, the chart appears at 100% width, which is good. When I toggle to a different tab, then come back to the "progress" tab, the chart's width changes from 100% to a fixed 600px. I went through the docs, both the official Highcharts and React-Highcharts, and could not find a solution.
I imagine there is a problem with the re-render of the component.
Code
highchart-line.js:
export default class HighChartLine extends Component {
constructor(props) {
super(props);
this.state = { config: undefined }; // or use null
}
getScoreData(eqId){
const self = this;
let url = 'src/data/dermatology/user_scores-eq' + eqId + ".json";
axios.get(url)
.then((response) => {
... //response informs
let config = {...};
self.setState({ config: config });
});
}
componentWillMount(){
this.getScoreData(this.props.equation.eqId);
}
componentWillReceiveProps(nextProps){
this.getScoreData(nextProps.equation.eqId);
}
render(){
// Handle case where the response is not here yet
if ( !this.state.config ) {
return <div>Loading...</div>
}
if ( this.state.config.length === 0 ) {
return <div>Sorry, no data was found for this equation.</div>;
} return (
<ReactHighcharts config={this.state.config} />
)
}
}
highchart-line gets imported into progress-tab.js:
const ProgressTab = ({equation, user}) => {
return(
<HighChartLine equation={equation} user={user} />
)
}; export default ProgressTab;
progress-tab gets imported into modal-main.js:
export default class ModalMain extends Component {
constructor(props) {
super(props);
this.state = {
tabKey: this.props.tabKey
};
}
handleSelect = (tabKey) => {
this.setState({ tabKey: tabKey });
};
render() {
return (
<Tabs activeKey={this.state.tabKey}
onSelect={this.handleSelect}
>
<Tab tabClassName="main-tab" eventKey={"progress"} >
<ProgressTab {...this.props} />
</Tab>
<Tab tabClassName="main-tab" eventKey={"peer-compare"}>
<PeerCompareTab {...this.props}/>
</Tab>
</Tabs>
)
}
}
Browser render
Width is correctly set to 100%
Width changes itself to 600px

Answer 1

Although this could hurt performance somewhat, I found that if I do not pass in the isPureConfig={true} prop into the ReactHighcharts component, it will re-render on tab select. Being that ReactHighcharts sets isPureConfig={false} by default and Highcharts itself reflows by default, it will all resize accordingly. The downside is you have to work with your charts re-rendering every time: https://github.com/kirjs/react-highcharts#limiting-highchart-rerenders
Of course, I am not certain it's any better to reflow the chart on every tab select anyway...