Chart Resize on Window Resize #6
Comments
|
@mbugbee I need some time to investigate this issue. I will update you as soon as I get results. Thank you for your report! |
|
@mbugbee Resize works well. But there are a few tricks with id of div to set styles. Let me show you a workaround. <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: |
|
Doesn't seem to be working for me. Here's what I'm seeing: Initial Render: Expand window: Shrink window: 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. |
|
@mbugbee <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: |
The charts don't resize when the browser window resizes. Would this be an AnyChart-React issue or an AnyChart issue?
The text was updated successfully, but these errors were encountered: