How to resize of chart based on container resize using chart.setSize() in highcharts?

ReactJS
1

I am using the reactGridLayout component for resizing. On resize of layout the chart should resize like this

onLayoutChange(layout) {
 console.log(layout);
 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} zDepth={1}>{this._renderChart(data)}
  </Paper>
  )} 
</ResponsiveReactGridLayout> )
 }
   _renderChart(chartData){   
   if(chartData.chartLib !== 'HIGH_CHARTS'){
      //c3 charts
      if(!chartData.columns.length) return null;
         switch(chartData.chartType){
            case 'AREA': return <AreaChartComponent data={{'data': {'columns': chartData.columns, type: 'area-spline'},axis:{x:{categories:chartData.columns[0].slice(1),type:"category"}}}}/>;
            case 'PIE': return <PieChartComponent  data={{'data': {'columns': chartData.columns, type: 'pie'},axis:{x:{categories:chartData.columns[0].slice(1),type:"category"}}}}/>;
            case 'BAR': return <BarChartComp data={{'data': {'columns': chartData.columns, type: 'bar'},axis:{x:{categories:chartData.columns[0].slice(1),type:"category"}}}} />
            case 'LINE' : return <LineChartComponent data={{'data': {'columns': chartData.columns, type: 'line'},axis:{x:{categories:chartData.columns[0].slice(1),type:"category"}}}}/>
            case 'SCATTER_PLOT' : return <ScatterPlotComp data={{'data': {'columns': chartData.columns, type: 'scatter'},axis:{x:{categories:chartData.columns[0].slice(1),type:"category"}}}}/>
            case 'DONUT' : return <DonutChartComp data={{'data': {'columns': chartData.columns, type: 'donut'},axis:{x:{categories:chartData.columns[0].slice(1),type:"category"}}}}/>
            case 'BAR_STACK': return <StackedBarComp data={{'data': {'columns': chartData.columns, type: 'bar'},axis:{x:{categories:chartData.columns[0].slice(1),type:"category"}}}} />
            case 'AREA_STACK': return <StackedAreaComp data={{'data': {'columns': chartData.columns, type: 'area'},axis:{x:{categories:chartData.columns[0].slice(1),type:"category"}}}} />
            case 'TABLE': return <TableComponent data={this.state.data} />
            default: return null;
        }
    } else{
        //high charts
        switch(chartData.chart.type){
          case 'area': return <AreaHighChartComponent config={chartData}/>;
          case 'pie': return <PieHighChartComponent  config={chartData}/>;
          case 'bar': return <BarHighChartComp  config={chartData}/>
          case 'line' : return <LineHighChartComponent config={chartData}/>
          case 'column' : return <ColumnHighChartComponent config={chartData}/>
          default: return null;
        }
    }
}

I need to make use of this in react component instead of in jquery.I have a layout Change how to make use of this in that.
I am using react grid layout on drag of container the chart in the container is not getting resized.

1 Like