React Apexchart is not taking its parent height when setting height 100%

Question

I am working on react-apexcharts and trying to set height 100 percent of the chart but it is not accepting height of its parents instead showing its min-height of445px.I could not understand what is happening even after setting height 100% like this,

  chart: {
      height: "100%",
  },

Here is my full code

import React from "react";
import ReactApexChart from "react-apexcharts";


class ApexChart extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        series: [
                {
                name: 'member',
                data: [64, 55, 21, 18, 76, 41 , 44, 14, 66, 32]
            }, {
                name: 'Partcipants',
                data: [53, 32, 42, 22, 29, 80, 16, 49, 78, 11]
            }],
            options: {
                colors: ['#519ca5', '#d5e2c0'],
                chart: {
                    height: "100%",
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        dataLabels: {
                            position: 'top',
                        },
                    }
                },
                dataLabels: {
                    enabled: true,
                    offsetX: -6,
                    style: {
                        fontSize: '12px',
                        colors: ['#fff']
                    }
                },
                stroke: {
                    show: true,
                    width: 1,
                    colors: ['#fff']
                },
                xaxis: {
                    categories: ['a','b','c','d','f','h','i','j','k','l'],
                },
                legend:{
                    position: 'right',
                    markers: {
                        width: 24,
                        height: 24,
                        strokeWidth: 0,
                        strokeColor: '#fff',
                        fillColors: undefined,
                        radius: 2,
                        customHTML: undefined,
                        onClick: undefined,
                        offsetX: 0,
                        offsetY: 0
                    },
                }
            },
        };
    }

    render() {
        return (
            <div id="chart">
                <ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={430}/>
            </div>
        );
    }
}

export  default  ApexChart;

import React from 'react';
import Policychart from "./components/Policychart"

function App() {
  return (
    <div className="App">
      <header className="App-header">
      </header>
        <div className="wrapper">
            <Policychart/>
        </div>
    </div>
  );
}

export default App;

.wrapper{
  height: 320px;
  width: 940px;
  margin: 180px auto;
  background: rgba(240, 248, 255, 0.9);
  padding: 40px;
}

.apexcharts-legend-series{
  display: flex;
  align-items: center;
  margin-top: 16px !important;
}

.apexcharts-legend-text{
  padding-left: 8px;
}

What I want is the height of the chart must be height of .wrapper which is 320px currently and I want to control it from here.

Answer 1

You just need to set your ReactApexChart component to 100% not 430 (you can remove the height inside options object) and then you can control the chart height by .wrapper CSS class

<ReactApexChart ... height="100%" />

See live codeSandbox example.