Echarts and bootstrap: responsive width

Question

With Echarts (from Baidu) i want put a pie chart inside a div element (i'm using bootstrap).

So i have:

<div class="row">
   <div class="col-md-4">
      <div id="chartGift" style="height:400px;"></div>
    </div>
</div>

I've take the javascript code from the official documentation https://ecomfe.github.io/echarts/doc/example/pie1.html#-en

The problem is that the pie doesn't appear because, inspecting the html code, i see that the width is 0. Why echarts doesn't set the width from the parent element? I don't want set static width (i see that it works) because the chart isn't responsive.

Answer 1

If you just want to set a fixed height try setting the width to 100% of your container and set a min-heigth:

<div id="chartGift" style="width: 100%; min-height: 400px"></div>

It worked for me! Plus, if you want to make sure the graph is responsive, you can know when the window is resized and force the to resize, too. Like this:

    $(window).on('resize', function(){
        if(chart != null && chart != undefined){
            chart.resize();
        }
    });

Hope it helped!