Hey, I started using FusionCharts React and it looks great.
I'm running into one issue whereby the chart height doesn't dynamically resize to its container.
Container Component
const AspectRatio = (props) => {
const paddingTop = `${(100 / props.width) * props.height}%`;
return (
<div className="aspect-ratio-wrapper" style={{ paddingTop }}>
<div id={props.id} className="aspect-ratio-container">
{props.children}
</div>
</div>
);
}
Container styles
.aspect-ratio-wrapper {
width: 100%;
position: relative;
}
.aspect-ratio-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
Chart Component
const Chart = () => {
const chartConfig = {
type: "stackedcolumn2d",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
chart: {/*chart config*/},
categories: [/*...*/],
dataset: [/*...*/]
}
};
return <ReactFC {...chartConfig}/>;
}
Demo Page Component
const Page = () => {
return (
<AspectRatio width={16} height={9}>
<Chart/>
</AspectRatio>
)
}
The chart width resizes successfully. But the height doesn't. How can I fix this?
Help much appreciated. Thanks!
