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.

Trott

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!

Garland

That was a great answer. The catch is to have width: 100% otherwise resize() doesn't work. Documentation doesn't mention this too, but I guess it's just common sense :) – Asthma

But it is not working if my parent div is a material-ui card :( – Octan

Answer 2

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);

Bearce

it works but i have to declare the parent div container not the div that holds the chart itself. – Jena

Thanks, it worked, resize event didn't work as mentioned in here if I maximize the window at once, not sure why. This covered most of my cases – Solorio

This works for me: I have just to suggestions: First make sure your user is using a browser with support (caniuse.com/resizeobserver). Second, not only work with width, but with height too. We don't want an ugly chart – Galantine

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 :)

Exultation

Answer 4

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

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

Cutoff

Answer 5

Firsty, wrap your chart in a div and give the div width: 100% and height: 100%. This allows the chart be used in flex layout.

Secondly, you need to give the parent container of chart a width (even if its responsive width) like flex: 1.

Catastrophism

Answer 6

While fixing this problem I had to do multiple things:

1. Wrapper should determine size of the chart dynamically

    <div class="goal-chart-wrapper" ref="chartContainer">
      <div class="goal-chart" ref="goalChart"></div>
    </div>
   

2. CSS which controls size of wrapper and forces child to adhere to parents size

.goal-chart-wrapper {
  width: 100%;
  min-height: 200px;
  position: relative;

  .goal-chart {
    height: 100%;
    width: 100%;
    position: absolute;
  }
}

3. Removing rendered padding of chart inside the inserted canvas (within options of chart). Without containLabel the axis disappeared.

grid: {
 left: 0,
 top: 0,
 right: 0,
 bottom: 0,
 containLabel: true
}

4. Adding a ResizeObserver on the size determening parent which triggers resizing of chart

import { init } from 'echarts';

const options = {
 // ...
}

this.chart = init(this.$refs.goalChart);
this.chartContainer = this.$refs.chartContainer;

new ResizeObserver(() => {
  this.chart.resize();
}).observe(this.chartContainer);

this.chart.setOption(options);

Didier

Answer 7

To make the chart responsive and always match its container's size, you can use ResizeObserver in combination with echartsInstance.resize. However because Observation will fire when observation starts, this will break the chart's initial animation. So in my case I check if there is an actual size change before requesting the resize:

let elemChart = document.querySelector('#divChartPie');
let chart = echarts.init(elemChart);

// Make chart responsive (resize chart on elemChart resize)
new ResizeObserver(() => {
    if (elemChart.clientWidth !=chart.getWidth() || elemChart.clientHeight != chart.getHeight()) {
       chart.resize();
    }
}).observe(elemChart);

Hadrian

Answer 8

Setting width: 100% cause echarts to appear in size of node (100px), and with min-width: 100% it doesn't appear at all. So this is some problem with relative css units.

But we can still set size of chart container using JS.

let main = document.querySelector("main");
let chartDom = document.getElementById("echartsGrafikon");

// getting width of element we want to size up to our chart
// do this before chart initialization
let grafikonWidth = main.getBoundingClientRect().width;
chartDom.style.width = grafikonWidth + "px";

// initializing echart
let echartGrafikon = echarts.init(chartDom);

// to dynamically change size         
window.onresize = function () {
    echartGrafikon.resize();
};

Substage