Clipping the bar outside of the grid

[Remy-J]

Version

4.6.0

Reproduction link

https://gallery.echartsjs.com/editor.html?c=xs9BT4SnHR&v=1

Steps to reproduce

use this conf:

option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['val', 'id'],
            [0, 1234],
            [4, 12345]
        ]
    },
    xAxis: {type: 'value'},
    yAxis: {},
    series: [
        {type: 'bar'}
    ]
};

What is expected?

the graph is expected to be consistent

What is actually happening?

the layout is broken.
the columns come out of the graph and their size is not good

[echarts-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 dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

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

Have a nice day! 🍵

[pissang]

You can specify the width of bar

[Remy-J]

thanks for your feedback but even by reducing the width of the bars when zooming the layout is broken

use this cofig: option = {
dataZoom: [{ type: 'inside' }],
grid: { bottom: 40, left: 70, right: 50, top: 30 },
series: [
{
barWidth: '10%',
data: [
['val', 'id'],
[0, 377146],
[1, 620432],
],
name: 'id',
type: 'bar',
},
],
toolbox: {
feature: {
dataZoom: { title: { back: 'Zoom Reset', zoom: 'Zoom' } },
},
magicType: {
show: false,
title: {
bar: 'Switch to Bar Chart',
line: 'Switch to Line Chart',
stack: 'Stack',
tiled: 'Tile',
},
type: [],
},

saveAsImage: { title: 'Save image' },

show: false,

},
tooltip: { axisPointer: { type: 'shadow' }, trigger: 'axis' },

xAxis: {
axisLabel: {
rotate: 0,
},
axisLine: {
lineStyle: {
color: '#656565',
},
},

boundaryGap: ['20%', '20%'],
max: 2,
min: -1,
scale: true,

splitLine: {
  lineStyle: {
    color: '#DDD',
    type: 'dashed',
  },
},

type: 'value',

},
yAxis: {
axisLine: {
onZero: false,
},
scale: false,

splitLine: {
  lineStyle: { color: '#DDD', type: 'dashed' },
},

},
};

here is a link where you can test:
https://gallery.echartsjs.com/editor.html?c=xs9BT4SnHR&v=3

place your mouse to the right of the first bar and zoom step by step and you will see the outdated bar of the y-axis

here is a link where you can see the result:
https://zupimages.net/viewer.php?id=20/40/vs3s.png

[Ovilia]

Hi, this is the expected behavior for now. Bars will be only clipped (display nothing) when all of the bar are outside of the grid area. There's no way to clip the part outside of the grid for now but it may be supported afterwards.