[Bug] element-highlight-by-legend does not work in combination chart
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 221
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 26
Description
Version
2.0.0
Link to Minimal Reproduction
null
Steps to Reproduce
const spec = {
"0": "{",
"1": "}",
"padding": {},
"type": "common",
"data": [
{
"id": "Combo0",
"values": [
{
"year": "2020",
"orderCount": 120,
"amount": 129
},
{
"year": "2021",
"orderCount": 200,
"amount": 140
},
{
"year": "2022",
"orderCount": 280,
"amount": 157
},
{
"year": "2023",
"orderCount": 310,
"amount": 161
},
{
"year": "2024",
"orderCount": 280,
"amount": 191
}
],
"fields": {
"year": {
"sortIndex": 0
}
}
},
{
"id": "Combo1",
"values": [
{
"year": "2020",
"orderCount": 120,
"amount": 129
},
{
"year": "2021",
"orderCount": 200,
"amount": 140
},
{
"year": "2022",
"orderCount": 280,
"amount": 157
},
{
"year": "2023",
"orderCount": 310,
"amount": 161
},
{
"year": "2024",
"orderCount": 280,
"amount": 191
}
],
"fields": {
"year": {
"sortIndex": 0
}
}
}
],
"series": [
{
"type": "bar",
"id": "orderCount",
"dataId": "Combo0",
"xField": [
"year"
],
"yField": [
"orderCount"
],
"customConfig": {
"showPercent": false,
"showSeparator": true,
"showSmartUnit": false,
"showUnit": ""
},
"interactions": [
{
"type": "element-highlight-by-legend"
}
],
"bar": {
"style": {
"cornerRadius": 6
},
"state": {
"highlight": {
"fillOpacity": 1
},
"blur": {
"fillOpacity": 0.4
}
}
},
"stack": false,
"label": {
"visible": false
}
},
{
"type": "line",
"id": "amount",
"dataId": "Combo1",
"xField": [
"year"
],
"yField": [
"amount"
],
"customConfig": {
"showPercent": false,
"showSeparator": true,
"showSmartUnit": false,
"showUnit": ""
},
"interactions": [
{
"type": "element-highlight-by-legend"
}
],
"area": {
"style": {
"pickable": false
}
},
"point": {
"style": {
"size": 6,
"fill": "#ffffff",
"lineWidth": 2,
"cursor": "pointer",
"stroke": null
},
"state": {
"hover": {
"size": 8,
"outerBorder": {
"distance": 2,
"lineWidth": 3,
"strokeOpacity": 0.2
}
},
"legend_hover": {
"size": 8
},
"dimension_hover": {
"size": 8
}
}
},
"line": {
"style": {},
"state": {
"highlight": {
"strokeOpacity": 1
},
"blur": {
"strokeOpacity": 0.4
}
}
},
"label": {
"visible": false
}
}
],
"axes": [
{
"seriesId": [],
"orient": "right",
"label": {
"visible": false,
"style": {
"angle": [
0,
-45,
-90
]
}
},
"title": {
"visible": false
},
"visible": false,
"sampling": true
},
{
"orient": "bottom",
"type": "band",
"label": {
"visible": true,
"style": {
"fill": "#646A73",
"fontSize": 12,
"lineHeight": 20,
"maxLineWidth": 75
},
"space": 16,
"autoRotate": true,
"autoHide": true,
"autoRotateAngle": [
0,
-45,
-90
]
},
"title": {
"visible": false
},
"domainLine": {
"visible": false,
"style": {
"stroke": "red",
"lineWidth": 2
}
},
"paddingInner": 0.35,
"trimPadding": true,
"innerOffset": {
"left": 8,
"right": 8
},
"grid": {
"style": {
"lineDash": [
3,
3
],
"stroke": "rgba(31, 35, 41, 0.10)",
"lineWidth": 1
}
},
"sampling": false
},
{
"seriesId": [
"orderCount",
"amount"
],
"orient": "left",
"type": "linear",
"label": {
"visible": true,
"space": 16,
"style": {
"angle": [
0
]
}
},
"title": {
"visible": false
},
"domainLine": {
"visible": false,
"style": {
"stroke": "red",
"lineWidth": 2
}
},
"sampling": true,
"paddingInner": 0.35,
"trimPadding": true
}
],
"crosshair": {
"trigger": "hover",
"xField": {
"visible": true,
"line": {
"type": "rect",
"width": "100%"
}
},
"yField": {
"visible": false
}
},
"legends": [
{
"visible": true,
"orient": "top",
"position": "start",
"item": {
"label": {}
}
}
],
"title": [],
"tooltip": {
"parentElement": "combo1",
"confine": true,
"style": {
"titleLabel": {
"maxWidth": 300,
"multiLine": true
},
"keyLabel": {
"maxWidth": 100,
"multiLine": true
},
"valueLabel": {
"maxWidth": 200,
"multiLine": true
}
},
"mark": {
"title": {
"visible": true
},
"content": {}
},
"dimension": {
"title": {
"visible": true
},
"content": {}
}
},
"region": [
{
"style": {
"cursor": "pointer"
}
}
],
"theme": "builder-desktop",
"color": [
"#3370EB",
"#1BCEBF",
"#FFC60A",
"#ED6D0C",
"#DCA1E4",
"#25B2E5",
"#6DCDEB",
"#288FCB",
"#94B5F5",
"#8F61D1",
"#BF78E9",
"#008280",
"#27AD8E",
"#7BC335",
"#2E65D3",
"#18B9AC",
"#E5B209",
"#D5620B",
"#C691CD",
"#21A0CE",
"#62B8D3",
"#2481B7",
"#85A3DC",
"#8157BC",
"#AC6CD2",
"#007573",
"#239C80",
"#6FAF30",
"#295ABC",
"#16A599",
"#CC9E08",
"#BE570A",
"#B081B6",
"#1E8EB7",
"#57A4BC",
"#2072A2",
"#7691C4",
"#724EA7",
"#9960BA",
"#006866",
"#1F8A72",
"#629C2A",
"#244EA4",
"#139086",
"#B28B07",
"#A64C08",
"#9A71A0",
"#1A7DA0",
"#4C8FA4",
"#1C648E",
"#687FAB",
"#644492",
"#8654A3",
"#005B5A",
"#1B7963",
"#568825"
],
"indicator": {}
}
Current Behavior
Series mark does not be highlighted in combination chart
Expected Behavior
correct result
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the supplied combination-chart configuration with element-highlight-by-legend enabled on both the bar and line series. Trace the interaction from the legend to the series marks; done means the relevant series mark is highlighted correctly in the combination chart.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100