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={} className="aspect-ratio-container">

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}>

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