apache
[Bug] splitArea displays incorrectly when data entries are fewer than `splitArea.interval`
Version
5.3.3
Link to Minimal Reproduction
https://codepen.io/SevenOutman/pen/bGvBKNP
Steps to Reproduce
You can find 3 chart examples in the reproduction link above, each containing 3 data entries for a bars series.
In the first example a transparent/black splitArea is displaying correctly with splitArea.interval: 1
{
xAxis: {
data: ["A", "B", "C"],
splitArea: {
show: true,
interval: 1,
areaStyle: {
color: ["transparent", "black"]
}
}
},
yAxis: {},
series: [
{
type: "bar",
data: [120, 200, 150]
}
]
}
In the second example, splitArea.interval was set to 2 and the whole background goes black, which should have been transparent.
{
xAxis: {
data: ["A", "B", "C"],
splitArea: {
show: true,
interval: 2,
areaStyle: {
color: ["transparent", "black"]
}
}
},
yAxis: {},
series: [
{
type: "bar",
data: [120, 200, 150]
}
]
}
The third example demonstrates my real use case where splitArea.interval was not deliberately set to a number larger than data entries, but fell into that condition due to dataZoom.
The splitArea.interval was 1 and the splitArea was displaying correctly at first.
Drag the dataZoom to display the first 2 bars, and the background goes black.
{
xAxis: {
data: ["A", "B", "C"],
splitArea: {
show: true,
interval: 1,
areaStyle: {
color: ["transparent", "black"]
}
}
},
yAxis: {},
series: [
{
type: "bar",
data: [120, 200, 150]
}
],
dataZoom: {}
}
Current Behavior
The splitArea seems to skip the first color when data entires (in view) is fewer than splitArea.interval.
Expected Behavior
The splitArea should not skip the first color when data entires (in view) is fewer than splitArea.interval.
Environment
- OS: macOS Big Sur
- Browser: Chrome 102.0.5005.115
- Framework: React@17
Any additional comments?
No response
