Incubator-echarts: Cluster bar chart overlapping with date xaxis

[mdouaihy]

Version

4.1.0-release

Steps to reproduce

when using adaptive barWidth with a clustered bar chart and date x-axis, bars of 2 adjacent clusters can overlap when playing with the area zoom slider.

You can find below an example to reproduce the problem on https://echarts.apache.org/examples/en/editor.html

1. Once loaded, you'll have 6 groups of 4 bars each.
   2.Start zooming-in until you have 1 group and then zoom out/in.
2. You can notice that the groups overlaps.

var posList = [
    'left', 'right', 'top', 'bottom',
    'inside',
    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];

app.configParameters = {
    rotate: {
        min: -90,
        max: 90
    },
    align: {
        options: {
            left: 'left',
            center: 'center',
            right: 'right'
        }
    },
    verticalAlign: {
        options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
        }
    },
    position: {
        options: echarts.util.reduce(posList, function (map, pos) {
            map[pos] = pos;
            return map;
        }, {})
    },
    distance: {
        min: 0,
        max: 100
    }
};

app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
        var labelOption = {
            normal: {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            }
        };
        myChart.setOption({
            series: [{
                label: labelOption
            }, {
                label: labelOption
            }, {
                label: labelOption
            }, {
                label: labelOption
            }]
        });
    }
};


var labelOption = {
    normal: {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {
                textBorderColor: '#fff'
            }
        }
    }
};

option = {
"dataZoom":[
      {
         "type":"slider",
         "show":true,
         "height":25,
         "backgroundColor":"transparent",
         "fillerColor":"rgba(63, 81, 181, 0.05)",
         "handleStyle":{
            "color":"rgba(63, 81, 181, 0.2)"
         },
         "zlevel":0,
         "z":4,
         "orient":"horizontal",
         "xAxisIndex":[
            0
         ],
         "yAxisIndex":[

         ],
         "filterMode":"filter",
         "throttle":20,
         "start":0,
         "end":100,
         "startValue":1495756800000,
         "endValue":1496188800000,
         "minSpan":null,
         "maxSpan":null,
         "minValueSpan":null,
         "maxValueSpan":null,
         "rangeMode":null,
         "right":"ph",
         "top":"ph",
         "width":"ph",
         "left":null,
         "bottom":null,
         "dataBackground":{
            "lineStyle":{
               "color":"#2f4554",
               "width":0.5,
               "opacity":0.3
            },
            "areaStyle":{
               "color":"rgba(47,69,84,0.3)",
               "opacity":0.3
            }
         },
         "borderColor":"#ddd",
         "handleIcon":"M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z",
         "handleSize":"100%",
         "labelPrecision":null,
         "labelFormatter":null,
         "showDetail":true,
         "showDataShadow":"auto",
         "realtime":true,
         "zoomLock":false,
         "textStyle":{
            "color":"#333"
         },
         "zAxisIndex":[

         ],
         "radiusAxisIndex":[

         ],
         "angleAxisIndex":[

         ],
         "singleAxisIndex":[

         ]
      }
   ],
    color: ['#003366', '#006699', '#4cabce', '#e5323e'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'time',
            axisTick: {show: false},
            data: [new Date('2017-03-01'), new Date('2017-03-02'), new Date('2017-03-03'), new Date('2017-03-04'), new Date('2017-03-05'), new Date('2017-03-06'), new Date('2017-03-06')]
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            data: [["2017-05-26T00:00:00.000Z",320], ["2017-05-25T00:00:00.000Z",340], ["2017-05-24T00:00:00.000Z",310], ["2017-05-23T00:00:00.000Z",320], ["2017-05-22T00:00:00.000Z",330], ["2017-05-21T00:00:00.000Z",320], ["2017-05-20T00:00:00.000Z",340]]
        },
        {
            name: 'Steppe',
            type: 'bar',
            label: labelOption,
            data: [["2017-05-26T00:00:00.000Z",240], ["2017-05-25T00:00:00.000Z",320], ["2017-05-24T00:00:00.000Z",315], ["2017-05-23T00:00:00.000Z",320], ["2017-05-22T00:00:00.000Z",290], ["2017-05-21T00:00:00.000Z",340], ["2017-05-20T00:00:00.000Z",330]]
        },
        {
            name: 'Desert',
            type: 'bar',
            label: labelOption,
            data: [["2017-05-26T00:00:00.000Z",512], ["2017-05-25T00:00:00.000Z",280], ["2017-05-24T00:00:00.000Z",290], ["2017-05-23T00:00:00.000Z",320], ["2017-05-22T00:00:00.000Z",320], ["2017-05-21T00:00:00.000Z",350], ["2017-05-20T00:00:00.000Z",320]]
        },
        {
            name: 'Wetland',
            type: 'bar',
            label: labelOption,
            data: [["2017-05-26T00:00:00.000Z",455], ["2017-05-25T00:00:00.000Z",290], ["2017-05-24T00:00:00.000Z",300], ["2017-05-23T00:00:00.000Z",320], ["2017-05-22T00:00:00.000Z",320], ["2017-05-21T00:00:00.000Z",370], ["2017-05-20T00:00:00.000Z",310]]
        }
    ]
};

What is expected?

Bars are not overlapping

What is actually happening?

Bars of 2 adjacent clusters are overlapping.

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected] .

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[mcmoe]

You should be able to reproduce this same overlap issue with the reduced config below:

option = {
   animation: false,
   dataZoom: [
      {
         "type": "slider",
         "show": true
      }
   ],
    color: ['#003366', '#e5323e'],
    legend: {
        data: ['Forest', 'Desert']
    },
    xAxis: [
        {
            type: 'time'
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            data: [["2017-05-26T00:00:00.000Z",320], ["2017-05-25T00:00:00.000Z",340], ["2017-05-24T00:00:00.000Z",310]]
        },
        {
            name: 'Desert',
            type: 'bar',
            data: [["2017-05-26T00:00:00.000Z",240], ["2017-05-25T00:00:00.000Z",320], ["2017-05-24T00:00:00.000Z",315]]
        }
    ]
};

Preview with comments:

[pissang]

It's because the type of xAxis is 'time'. You can try setting xAxis type to category

[mdouaihy]

Hi @pissang,

Indeed, _category_ fixes the problem. However, we loose the relative distances offered by the _time_ type of xAxis.

Below is a code where we reproduce the problem without zooming.

option = {
   animation: false,
   dataZoom: [
      {
         "type": "slider",
         "show": true
      }
   ],
    color: ['#003366', '#e5323e'],
    legend: {
        data: ['Forest', 'Desert']
    },
    xAxis: [
        {
            type: 'time'
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            data: [["2017-05-29T00:00:00.000Z",320], ["2017-05-25T00:00:00.000Z",340], ["2017-05-24T00:00:00.000Z",310]]
        },
        {
            name: 'Desert',
            type: 'bar',
            data: [["2017-05-29T00:00:00.000Z",240], ["2017-05-25T00:00:00.000Z",320], ["2017-05-24T00:00:00.000Z",315]]
        }
    ]
};

[pissang]

Hi @mdouaihy . Unfortunately there is no better solution.

Or you can set a smaller barWidth, but I guess it's not so flexible in you scenario.

[mdouaihy]

If I understand well, what I'm asking is rather an enhancement and not a bug.

Do you think that echarts can automatically resize the bars to avoid the overlapping?

[pissang]

@mdouaihy Yes we will discuss about planning it in the version 4.5.0 https://github.com/apache/incubator-echarts/milestone/14

[mdouaihy]

Ah great! looking forward to test it. Thank you for your efforts!

[mdouaihy]

Hi @gajus, issue #10920 was not fixed. That's why I inserted a new one with detailed use case to reproduce the problem.

Any reason why you close it?

[gajus]

Any reason why you close it?

I did not close it. Just added a comment to help those who come across the other issue.

I just reported another issue that is likely related too https://github.com/apache/incubator-echarts/issues/11333

[mdouaihy]

Oh my bad, I say the "Closed" badge so I misunderstood the state.

[Ovilia]

I closed it because it was not replied in two weeks. Never mind. I'm working on this now, and I will check if other similar cases are fixed.