Chart Resize on Window Resize

mbugbee commented 6 years ago

The charts don't resize when the browser window resizes. Would this be an AnyChart-React issue or an AnyChart issue?

Shestac92 commented 6 years ago

@mbugbee I need some time to investigate this issue. I will update you as soon as I get results. Thank you for your report!

Shestac92 commented 6 years ago

@mbugbee Resize works well. But there are a few tricks with id of div to set styles. Let me show you a workaround. If you create a single or a number of charts you can set id manually to every chart. This will help you to set style properties (width, height) for the chart's div. HTML and JS code are below. HTML:

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

And JS chart config:

ReactDOM.render(
  <AnyChart
    width='100%'
    height='100%' 
    type="pie"
    id='pie-chart'
    data={[1, 2, 3, 4]}
    title="Simple pie chart"
  />, document.getElementById('root'));

If you create only a single chart you may not set id manually and plugin will set a default one. Then you should set style for the default id "ac-chart-container"

The code I mentioned above in resize action: resize

mbugbee commented 6 years ago

Doesn't seem to be working for me. Here's what I'm seeing:

Initial Render: initialrender

Expand window: expand

Shrink window: shrink

Notice the AnyChart credit on the left chart moves with the window just fine but the bar chart itself doesn't. When shrinking the window it just starts clipping.

Shestac92 commented 6 years ago

@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: barresize

AnyChart / AnyChart-React

Chart Resize on Window Resize #6