The echarts stacked bar chart will go beyond the display area when the minimum height is set.

you can run the following code on the official website example: http://echarts.baidu.com/exam..

app.title = "";

option = {
    tooltip : {
        trigger: "item",
        axisPointer : {            // 
            type : "shadow"        // :"line" | "shadow"
        }
    },
    
    grid: {
        show: false,
            left: 20,
            right: 75,
            bottom: 30,
            containLabel: true
    },
    yAxis:  {
        type: "value",
        boundaryGap : true
    },
    xAxis: {
        type: "category",
        data:["Cateogry 1","Category 2"]
    },
    
    series: [
   {
      "name":"AA",
      "type":"bar",
      "data":[
         6,
         4
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":""
   },
   {
      "name":"BB",
      "type":"bar",
      "data":[
         1,
         4
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":""
   },
   {
      "name":"CC",
      "type":"bar",
      "data":[
         2711,
         7205
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
     
      "color":"-sharp2ECC40"
   },
   {
      "name":"DD",
      "type":"bar",
      "data":[
         172,
         210
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharp228b22"
   },
   {
      "name":"EE",
      "type":"bar",
      "data":[
         31,
         38
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
     
      "color":""
   },
   {
      "name":"FF",
      "type":"bar",
      "data":[
         1053,
         1824
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharp0074D9"
   },
   {
      "name":"GG",
      "type":"bar",
      "data":[
         26,
         27
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharp3E5B99"
   },
   {
      "name":"HH",
      "type":"bar",
      "data":[
         3,
         4
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharp696969"
   },
   {
      "name":"II",
      "type":"bar",
      "data":[
         27,
         36
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharpB8338D"
   },
   {
      "name":"JJ",
      "type":"bar",
      "data":[
         144,
         228
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharpf01414"
   },
   {
      "name":"KK",
      "type":"bar",
      "data":[
         1117,
         2288
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharpF78FA7"
   },
   {
      "name":"LL",
      "type":"bar",
      "data":[
         2508,
         10541
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":""
   },
   {
      "name":"MM",
      "type":"bar",
      "data":[
         3037,
         8518
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharp6accc5"
   },
   {
      "name":"NN",
      "type":"bar",
      "data":[
         21,
         56
      ],
      "stack":"stack",
      "barMaxWidth":"25",
      "barMinHeight":5,
      
      "color":"-sharp1DA1F2"
   }
]
};

I set "barMinHeight": 5 for each column. when the overall height of the chart is relatively small, category 2 displays the maximum value that will exceed the y-axis. As shown in the following picture. There will be no problem if you don"t set this barMinHeight property. I need to set barMinHeight . How to solve the problem of display excess? Thank you.

Feb.27,2021

just look at the answer. Who will answer it?

Menu