title: Change width and height of chart (Echarts library)
body: <p>I´m using Echarts for data visualisation, documentation is not clear to me ;(</p>
  
  <p>What I need is basically change of width and height of chart. I tried to change height of pie-chart div but as a consequences only div height is changed without change of chart dimensions. If anyone know solution i would really appreciate.</p>
  
  <p><a href="https://i.stack.imgur.com/pTdyb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pTdyb.png" alt="enter image description here"></a></p>
  
  <pre><code> &lt;div class="card grid-stack-item-content cd-example" id="dashboard-header"&gt;
                              &lt;div class="card-header container-fluid"&gt;
                                  &lt;div class="row dashboard-row"&gt;
                                      &lt;div class="col-3 dashboard-icon-div text-center"&gt;
                                          &lt;h1 class="dashboard-h1"&gt;&lt;i class="fa fa-tags dashboard-logo"&gt;&lt;/i&gt;&lt;/h1&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-5"&gt; 
                                          &lt;h4 class="card-title dashboard-card-title"&gt;{{trans('app.icd10_codes')}}&lt;/h4&gt;
                                          &lt;h6 class="card-subtitle text-muted"&gt;    
                                                @if (count($binnedIcds['targetIcds']['codes']) &gt; 0)
                                                      &lt;span class="info-box-number"&gt;
                                                        {{count($binnedIcds['targetIcds']['codes'])}}
                                                        {{trans('app.skin_disease_groups')}}
                                                     &lt;/span&gt;
                                               @endif
                                          &lt;/h6&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt; 
                              &lt;/div&gt;
                              &lt;div class="card-body"&gt;
                                 &lt;div class="row"&gt;
                                   &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                                       &lt;div id="pie-chart" style="width:100%; min-height: 500px;"&gt;&lt;/div&gt;
                                   &lt;/div&gt;
                                  &lt;/div&gt;      
                              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>NewIcdChart.js</p>
  
  <pre><code>class NewIcdChart
  {
    constructor(ctx, targetsLabels, othersLabel, undefLabel, targetsTooltips, othersTooltip,
      undefTooltip, nTargets, nOthers, nTotal)
    {
  
      this.othersColor = '#888888';
      this.undefColor = '#cccccc';
  
      var labels = {
        targetsLabels,
        othersLabel,
        undefLabel
      };
  
      var tooltips = {
        targetsTooltips,
        othersTooltip,
        undefTooltip,
      };
  
      var nTargetImages = nTargets.reduce((a,b) =&gt; a + b, 0);
      var nUndef = nTotal - nTargetImages - nOthers;
      var counts = {
        nTargets,
        nOthers,
        nTotal,
        nUndef, 
      };
  
      this.chart;
      this.hasOthers = false;
      this.hasUndef = false;
      this.drawChart(ctx, labels, tooltips, counts);
    }
  
  
  
  
  drawChart(ctx, labels, tooltips, counts){
  
  
  
  var otherValue=counts.nOthers;
  
  var otherLabel=labels.othersLabel;
  
  var undefinedValue=counts.nUndef;
  
  var undefinedLabel=labels.undefLabel;
  
  var targetValues=counts.nTargets;
  
  var targetLabels=labels.targetsLabels;
  
  var finalChartValue=[];
  
  for(var i=0; i&lt;targetValues.length; i++){
  
  
  
  for(var i=0; i&lt;targetLabels.length; i++){
      var obj = {"value": targetValues[i], "name": targetLabels[i]};
      finalChartValue.push(obj);
  }
  
  }
  
  var otherObject={
      value: otherValue,
      name : otherLabel
  };
  
  var undefinedObject={
      value: undefinedValue,
      name : undefinedLabel
  };
  
  
  finalChartValue.unshift(otherObject, undefinedObject);
  
  
  
  var finalChartLables=[];
   finalChartValue.forEach(function(res) {
          finalChartLables.push(res.name);
  });
  
  
  
  function sum(arrayData, key){
     return arrayData.reduce((a,b) =&gt; {
    return {value : a.value + b.value}
  })
  }
  var tempSumObjectElements=sum(finalChartValue);
  var sumObjectElements=tempSumObjectElements.value;
  
  var finalPercentage=[];
  
   finalChartValue.forEach(function(res) {
          var result=res.value/sumObjectElements *100;
  
            var percentage = result.toFixed(2);
            finalPercentage.push(percentage);
  
  });
  
  
  
  // specify chart configuration item and data
  var option = {
  
      tooltip: {
          trigger: 'item',
          formatter: "{a} &lt;br/&gt;{b} : {c} ({d}%)",
      },
  
      legend: {
             x : 'center',
          y : 'bottom',
          formatter: function(name) { 
            var data = this.getSeries()[0].data; 
  
            var totalValue = data.reduce((acc, item) =&gt; { 
              acc += item.value;
              return acc;
            }, 0)
            var targetValue;  
            data.map(item =&gt; {
              if (item.name == name) {
                targetValue = item.value; 
              }
            })
            var p = (targetValue / totalValue * 100).toFixed(2); 
            return name + ' ' + p + '%';
          },
          data:finalChartLables
      },
      toolbox: {
          show: true,
          feature: {
  
              dataView: { show: true, readOnly: false },
              magicType: {
                  show: true,
                  type: ['pie']
              },
              restore: { show: true },
              saveAsImage: { show: true }
          }
      },
      color: ["#f62d51", "#dddddd", "#ffbc34", "#7460ee", "#009efb", "#2f3d4a", "#90a4ae", "#55ce63"],
      calculable: true,
  
      series: [{
              name: 'ICD',
              type: 'pie',
              radius: [20, 110],
              center : ['50%', '50%'],
              roseType: 'radius',
              itemStyle: {
                  normal: {
                      label: {
                          show: false,
                          formatter: "{b} :  \n ({d}%)",
                          fontWeight: 100
                      },
                      labelLine: {
                          show: false,
                          formatter: "{b} :   \n ({d}%)",
                          fontWeight: 100
                      }
  
                  },
                  emphasis: {
                      label: {
                          show: true,
                          formatter: "{b} :  \n ({d}%)",
                          fontWeight: 100
  
                      },
                      labelLine: {
                          show: true,
                          formatter: "{b} :  \n ({d}%)",
                          fontWeight: 100
  
                      }
                  }
              },
              data: finalChartValue
          },
  
  
      ]
  };
  
  
  
  // use configuration item and data specified to show chart
  ctx.setOption(option, true), $(function() {
      function resize() {
          setTimeout(function() {
              ctx.resize()
          }, 100)
      }
      $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
  });
  
  
  }
  
  }
  </code></pre>