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 chart to resize, too. Like this:

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

Hope it helped!

Answer 2

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

This worked for me. A min-width: 100% do the trick.

Answer 3

I found solution in buyed admin template. There was solution with initializing charts after content is loaded. Here is working example:

    $(document).ready(function () {

        setTimeout(function () {

            // based on prepared DOM, initialize echarts instance
            var myChart = echarts.init(document.getElementById('chart-amount'), 'macarons');
            // specify chart configuration item and data
            var option = {..options of chart here ..}


            // use configuration item and data specified to show chart
            myChart.setOption(option);


        }, 100);

    });

Style for chart container is: style="height: 400px; width: 100%; It is important, when you are using echart toolbox. It likes to go outside of container.

I hope it helps :)

Answer 4

Just use the ResizeObserver to detect changes in the size of the chart's container element. It works even if your layout changes and doesn't rely on windows resize etc. Btw. Polyfills are also available if required.

const container = document.querySelector('#chart');
const chart = echarts.init(container);

new ResizeObserver(() => chart.resize()).observe(container);