@mbugbee
I guess that the problem comes from css settings. I have created similar bar charts and both are resizable. Below you can find html and js for this chart a gif of how it works. Please, pay attention to setting IDs to charts, CSS styles for root divs and chart's divs. Also, please, check the version of React plugin you use. Try to update our plugin up to the latest version.

<style>
html, body, #bar-chart, #bar-chart2{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#root {
float: left;
     height: 100%;
    width: 50%;
}
#root2 {
float: left;
     height: 100%;
    width: 50%;
}
</style>
<body>
<!-- Mount node for application -->
<div id="root"></div>
<div id="root2"></div>
<script src="test.min.js"></script>
</body>

    var data = anychart.data.set([
      ["John", 10000],
      ["Jake", 12000],
      ["Peter", 13000],
      ["James", 10000],
      ["Mary", 9000]
    ]);

    var chart = anychart.bar();
    var series = chart.bar(data);
    
        var chart2 = anychart.bar();
    var series2 = chart2.bar(data);

ReactDOM.render(
  <AnyChart
    width='100%'
    height='100%' 
    id='bar-chart'
        instance={chart}
  />, document.getElementById('root'));

ReactDOM.render(
  <AnyChart
    width='100%'
    height='100%' 
    id='bar-chart2'
        instance={chart2}
  />, document.getElementById('root2'));

And finally how it works:

Chart Resize on Window Resize #6

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions