I am using reactgridlayout
for highcharts to be rendered along with drag and drop. when the container is dragged the chart in the container is not getting resized.Only on window resize it is working. I need on div resize. I used chart.setSize(null,null);
_loadSavedChart(){
return (
<ResponsiveReactGridLayout layouts={this.state.layout}
onLayoutChange={this.onLayoutChange}
className={this.state.className}
rowHeight={this.state.rowHeight}
cols={this.state.cols}
initialLayout= {this.state.layout}
initialWidth={this.state.initialWidth}
width={this.state.width}
verticalCompact={false}
listenToWindowResize={false}
currentBreakpoint= 'sm'
>
{this.state.savedChartinDashboard.map((data, i) =>
<Paper key={i} className="c3chart" style={style.chartPaperStyle}
Depth={1}>{this._renderChart(data)}
</Paper>
)}
</ResponsiveReactGridLayout> )
}
OnLayout change i am passing chart.setSize(null,null)
still not working how to make use of chart.setSize
for chart resize based on div resize.
onLayoutChange(layout) {
console.log(layout);
chart.setSize(null, null);
}
It is working only on window resize when on div(container) resize the chart is getting resized
From the below code you can check the component of reactgridlayout for draggable but not the chart in the paper. on window resize its working fine i need with div resize(on draf of paper component).
I need to make use of this in react component instead of in jquery. I have a onLayoutChange method. how to make use of this method in that.
$('#resizer').resizable({
// On resize, set the chart size to that of the
// resizer minus padding. If your chart has a lot of data or other
// content, the redrawing might be slow. In that case, we recommend
// that you use the 'stop' event instead of 'resize'.
resize: function () {
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});