scaero

Chart height not dynamically being resized

Recommended Posts

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now