echarts [Bug] Multi-series column charts extend beyond the x axis edge

z9zf31ra  于 4个月前  发布在  Echarts
关注(0)|答案(7)|浏览(158)

Version

5.3.2

No response

Steps to Reproduce

let data = [
	["", "Val1", "Val2"],
	[1, 6545, 6545],
	[2, 2666, 5332],
	[4, 1002, 4008]
];

let option = {
	dataset: { source: data },
	xAxis: { type: 'value' },
	yAxis: {},
	series: [
		{
			type: 'bar',
			encode: { x:0, y:1 }
		},
		{
			type: 'bar',
			encode: { x:0, y:2 },
		}
	]
};

Current Behavior

The axis doesn't extend beyond all the series

Expected Behavior

The axis is drawn beyond all the series

Environment

- OS: Windows 10
- Browser: Chrome

Any additional comments?

I can work around this by manually setting the axis range however the data is dynamic so that would be problematic.

v9tzhpje

v9tzhpje1#

Hi @Shaq76, do you actually need xAxis.type as "value"? Try setting it to "category" then it will work fine.

bttbmeg0

bttbmeg02#

Hi thanks for your comment. Yeah I need the automatic 'gap' at the number 3. I also don't want to manually create extra categories for these gaps (as the data is dynamic)

dgiusagp

dgiusagp3#

Hi, @Shaq76 maybe you can specify xAxis.max function to caculate suitable max value

let data = [
	["", "Val1", "Val2"],
	[1, 6545, 6545],
	[2, 2666, 5332],
	[, 1002, 4008]
];

 option = {
	dataset: { source: data },
	xAxis: { type: 'value', max:(v) => v.max+1 }, // 
	yAxis: {},
	series: [
		{
			type: 'bar',
			encode: { x:0, y:1 }
		},
		{
			type: 'bar',
			encode: { x:0, y:2 },
		}
	]
};
cig3rfwq

cig3rfwq4#

Hi LinghaoSu, thanks for your message. I have tried that solution and it makes the axis extend but you end up with tick labels which you don't want. Also given dynamic data (and dynamic numbers of series) it's difficult for me to calculate the value to add to 'max'.

1tuwyuhd

1tuwyuhd5#

Hi LinghaoSu, thanks for your message. I have tried that solution and it makes the axis extend but you end up with tick labels which you don't want. Also given dynamic data (and dynamic numbers of series) it's difficult for me to calculate the value to add to 'max'.

let data = [
	["", "Val1", "Val2"],
	[0, 6545, 6545],
	[2, 2666, 5332],
	[4, 1002, 4008]
];

 option = {
	dataset: { source: data },
	xAxis: { 
	  type: 'value', 
	  max: (v) => v.max+1, 
	  min: (v) => v.min-1, 
	  axisLabel: {
    	 showMaxLabel: false,
	    showMinLabel: false,
	  }
	},
	yAxis: {},
	series: [
		{
			type: 'bar',
			encode: { x:0, y:1 }
		},
		{
			type: 'bar',
			encode: { x:0, y:2 },
		}
	]
};

echart will provide the 'max' and 'min' values in that column of data. So you need to get this max/min value and extend the range a little. If you don't want that value included in your data, you cloud set AxisLabel.showMaxLabel/showMinLabel false

3lxsmp7m

3lxsmp7m6#

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

e5nqia27

e5nqia277#

Hi, this is still an issue for me.

相关问题