[Feature] Add inactiveColor, inactiveBorderColor, and inactiveBorderWidth to visualMap
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 15h 17m
- Merged PRs (30d)
- 5
Description
### What problem does this feature solve?
Currently, `visualMap` does not provide built-in options to customize the appearance of inactive (unselected) elements in either `piecewise` or `continuous` modes. This limitation reduces visual clarity when certain values are deselected, making it difficult to distinguish active and inactive states effectively.
In contrast, the `legend` component already supports customization of inactive elements using `inactiveColor`, `inactiveBorderColor`, and` inactiveBorderWidth`. However, `visualMap` lacks these options, leading to inconsistencies when both components are used in the same chart.
For example, when using `visualMap.piecewise`, unselected categories always appear in a default style that cannot be modified. Similarly, in `visualMap.continuous`, there is no way to adjust the appearance of unselected ranges, making it harder to visually communicate inactive states.
Adding `inactiveColor`, `inactiveBorderColor`, and `inactiveBorderWidth` would allow users to fully control the appearance of inactive elements in both modes, improving chart customization and usability.
### What does the proposed API look like?
The proposed API would introduce three new properties under `visualMap` that apply to both `piecewise` and continuous modes:
visualMap: {
type: "piecewise", // or "continuous"
dimension: 2,
pieces: [ // For piecewise mode
{ min: 0, max: 30, color: "blue" },
{ min: 31, max: 60, color: "orange" },
{ min: 61, max: 100, color: "green" }
],
range: [20, 80], // For continuous mode
inactiveColor: "#ccc", // Customize the color of inactive elements
inactiveBorderColor: "#ccc", // Customize the border color of inactive elements
inactiveBorderWidth: "auto" // Allow automatic or manual control of inactive border width
}
This enhancement would ensure visual consistency between `visualMap` and the legend, allowing for better differentiation of inactive states in both `piecewise` and `continuous` visualizations.
Contributor guide
Research direction
Locate the visualMap implementations for piecewise and continuous modes, then compare how the legend handles inactiveColor, inactiveBorderColor, and inactiveBorderWidth. Trace how selected and unselected styles are produced in each mode. Done means all three options are supported consistently for both modes and inactive elements reflect the configured appearance.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100