Visual Map Not respecting with Funnel Chart When Data is in Both series and dataset.
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
5.5.1
### Link to Minimal Reproduction
https://codepen.io/Srikanth-Sangana/pen/GgKMbXP
### Steps to Reproduce
Below is a minimal reproducible example of the option configuration:
option = {
textStyle: {
fontFamily: "OpenSans-Regular",
},
backgroundColor: "#ffffff",
labelLayout: {
hideOverlap: true,
},
aria: {
enabled: true,
decal: {
show: false,
},
},
series: [
{
type: "funnel",
z: 0,
name: "Sample_Funnel_1",
maxSize: 600,
sort: "none",
right: 150,
left: 10,
height: 200,
top: 50,
data: [
{
name: "Sample Company A",
value: 0,
itemStyle: {
height: 200,
color: "#007BFF",
},
},
],
overflow: "break",
labelLine: {
length: 20,
},
label: {
show: true,
fontSize: 10,
color: "#000000",
fontStyle: "normal",
fontWeight: "normal",
position: "outside",
distance: 5,
rich: {
title: {
color: "#007dd1",
fontSize: 10,
},
},
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 9,
},
},
},
{
type: "funnel",
z: 0,
name: "Sample_Funnel_2",
maxSize: 400,
sort: "none",
right: 150,
left: 10,
height: 200,
top: 250,
data: [
{
name: "Sample Company B",
value: 0,
itemStyle: {
height: 200,
color: "#28A745",
},
},
],
overflow: "break",
labelLine: {
length: 20,
},
label: {
show: true,
fontSize: 10,
color: "#000000",
fontStyle: "normal",
fontWeight: "normal",
position: "outside",
distance: 5,
rich: {
title: {
color: "#007dd1",
fontSize: 10,
},
},
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 9,
},
},
},
],
visualMap: [
{
type: "piecewise",
show: true,
position: "bottom",
bottom: 0,
left: "center",
orient: "horizontal",
pieces: [
{
gt: 41,
color: "#008000",
label: "> 41",
},
{
lt: 35,
color: "#ff0000",
label: "< 35",
},
],
outOfRange: {
color: "#007BFF",
},
calculable: true,
textStyle: {
fontSize: 10,
color: "#000000",
},
itemWidth: 20,
itemHeight: 16,
},
],
dataset: [
{
dimensions: [
"name",
"value",
],
source: [
{
name: "Sample Company A",
value: 50,
},
{
name: "Sample Company B",
value: 30,
},
],
},
],
legend: {
type: "scroll",
show: false,
itemWidth: 10,
itemHeight: 10,
pageIconSize: 10,
textStyle: {
fontSize: 10,
color: "#000000",
},
left: "center",
orient: "horizontal",
},
};
### Current Behavior
The visual map does not apply the appropriate colors or range behavior to the funnel chart when both series.data and dataset.source contain data.

### Expected Behavior
The visual map should apply to the funnel chart in the above configuration. It’s a **funnel chart** with a **funnel shape** instead of a pyramid, which is why we created the series this way.
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.