Как динамически изменить высоту на графике C3

Question

Я работал над изменением высоты диаграммы c3. он может динамически изменять ширину при увеличении и уменьшении. но каким-то образом он не изменил свою высоту, установив max-height и position: относительный (я не думаю, что это связано). Диаграмма С3 позволяет брать только фиксированный размер? тогда почему ширина постоянно меняется, а высота не меняется. и как заставить динамически изменять высоту?

html

<div
            style="overflow:hidden; width: 100%; height: 50%; border-bottom-color: #a0a1be; border-bottom-style: solid; border-bottom-width: 1px;">
            <div
                style="width: 100%; height: 48px; background-image: url(/images/dashboard_title_bar_1000.png); background-repeat: no-repeat; background-position: top right; color: #404652; font-size: 16px; font-weight: bold; padding-top: 12px;">
                <img src="/images/dashboard_title_head.png"
                    style="vertical-align: middle; margin: 0 4px 0 30px;" /><span
                    style="">통신 성공률</span>
            </div>

            <div class="chart-options" id="successRate" style="width:100%; height:80%; overflow:auto; min-height:360px"  >
                <img src="/images/common/search.gif" style="width: 50%;" />
            </div>

        </div>

js

var chart = c3.generate({
                    bindto : "#successRate",
                    data : {
                        rows : dataArray,
                        type : "line"
                    },
                    axis : {
                        x : {
                            type : 'category',
                            categories : titleArray
                        },
                        y : {
                            label : {
                                text : '성공율(%)',
                                position : 'outer-middle'
                            }
                        }
                    },
                    grid : {
                        y : {
                            show : true
                        }
                    },
                    legend : {
                        show : true,
                        position : 'top'
                    },padding:{
                        right:20
                    }
                });
                d3.select('#successRate .c3-axis-y-label').style('font-size',
                        '2em').style("dominant-baseline", "central");

100% zoom

50% zoom