Version
5.3.2
Link to Minimal Reproduction
Link to Chart
Expand for chart config
option = {
"grid":{
"bottom":40,
"containLabel":true,
"left":34,
"right":97
},
"toolbox":{
"feature":{
"dataView":{
"show":true
},
"dataZoom":{
"show":true,
"yAxisIndex":"all"
},
"saveAsImage":{
"name":"image",
"show":true
}
},
"show":true
},
"textStyle":{
"fontFamily":"Inter"
},
"dataZoom":{
"type":"inside",
"zoomLock":true
},
"dataset":{
"dimensions":[
"Week",
"C",
"L",
"M",
"B",
"G",
"CO"
],
"source":[
{
"Week":" 22",
"G":1,
"M":12,
"C":3,
"CO":2,
"L":null,
"B":null
},
{
"Week":" 23",
"L":4,
"C":1,
"M":9,
"B":1,
"G":1,
"CO":null
},
{
"Week":" 24",
"C":17,
"L":null,
"M":null,
"B":null,
"G":null,
"CO":null
},
{
"Week":" 25",
"C":1,
"L":null,
"M":null,
"B":null,
"G":null,
"CO":null
}
]
},
"legend":{
"icon":"rect",
"itemHeight":16,
"itemWidth":16,
"show":true,
"left":"right",
"orient":"vertical",
"top":50
},
"series":[
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"C"
},
"itemStyle":{
"color":"#3182EB"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"C",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"L"
},
"itemStyle":{
"color":"#FF7D1B"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"L",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"M"
},
"itemStyle":{
"color":"#54B74B"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"M",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"B"
},
"itemStyle":{
"color":"#E43D55"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"B",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"G"
},
"itemStyle":{
"color":"#AC44EA"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"G",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"CO"
},
"itemStyle":{
"color":"#6C4141"
},
"label":{
"color":"#ffffff",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"CO",
"stack":"stack",
"type":"bar"
}
],
"tooltip":{
},
"xAxis":{
"axisLabel":{
"fontFamily":"Inter",
"fontSize":11,
"hideOverlap":true,
"interval":0,
"rotate":0,
"show":true
},
"axisTick":{
"alignWithLabel":true,
"interval":0
},
"max": 26,
"min": 21,
"boundaryGap":true,
"name":"Week",
"nameGap":40,
"nameLocation":"middle",
"nameTextStyle":{
"align":"center",
"fontSize":14,
"fontWeight":"bold",
"padding":[
0,
0,
0,
0
],
"verticalAlign":"top"
},
"show":true,
"type":"value"
// "type":"category"
},
"yAxis":{
"axisLabel":{
"fontFamily":"Inter",
"fontSize":11,
"show":true
},
"name":"user_id",
"nameGap":40,
"nameLocation":"middle",
"nameTextStyle":{
"fontSize":14,
"fontWeight":"bold"
},
"scale":false,
"show":true,
"type":"value"
}
}
Steps to Reproduce
- Go to link
- See that the xAxis max value is multiple times the actual max value
It seems de-selecting series from the chart changes the xAxis max value.
Current Behavior
xAxis max value is 150 when it should be 25, the chart is unreadable:
When min
and max
on the xAxis are specified, only one series is shown at a time:
Expected Behavior
It stacks properly when x-axis type is category
instead of value
:
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
- No response*
9条答案
按热度按时间ohfgkhjo1#
Please try to minify your data to make it easier to read and understand.
8e2ybdfx2#
Hi @Ovilia , this is a simplified version of the example with just 2 series.
Same problems of xAxis max value is 50 when it should be 25; when min and max on the xAxis are specified (as 21 and 26), only one series is shown at a time; and it stacks properly only when x-axis type is
category
instead ofvalue
.x-axis type is
value
:x-axis type is
category
:bq9c1y663#
The default max value of the xAxis (when
max
is not set) seems to be weird.7vhp5slm4#
I can also replicate this bug on my charts when I simply apply stack on my series when xAxis type is set to value
Here is our open issue: lightdash/lightdash#3076
Here is a modified stacked bar chart example
as you can see, the max value on xAxis should be 1320, not 3000
This only happens when xAxis type is value (not category)
I noticed that if you remove any of the series, the maxValue will be reduced as well, like maxValue is the maxValue * number of series whe stack is applied.
we're using
n8ghc7c15#
It seams like stacked xAxis max value
example:
And It's stack strategy like the line,but show the bar as it own way,without stacked and accurately.
yftpprvb6#
Another question, the "value type xAxis" with "bar series" doesn‘t stack well
nnvyjq4y7#
Another question, the "value type xAxis" with "bar series" doesn‘t stack well
Expected:
fcg9iug38#
wko9yo5t9#
New Version!