apache / apache/echarts

[Feature] Allow customizing border of color blocks in visualMap.piecewise

Open
#21,090 1 comment 0 reactions 0 assignees View on GitHub
new-feature
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

Currently, there's no way to customize the border of the small color blocks inside a `visualMap` of type `piecewise`, especially in geo charts.

I want to visually highlight or separate the blocks (e.g. with a dark border around each block to improve visibility) to improve clarity for end users. I've tried options like `borderColor`, `itemStyle`, and others, but they apply only to the outer container or background, not to each individual color block.

This limitation impacts map visualizations where colors are similar or gradients are close, borders would make each piece more distinguishable.

I'm still relatively new to ECharts, but I couldn't find any way to do this in the documentation or GitHub issues. it seems this level of customization is not yet supported.

Image

### What does the proposed API look like?

I’m not sure how this could be implemented exactly, but maybe it could work by allowing legend-specific styles (like border color) inside each piece.

example:
```ts
visualMap: {
type: 'piecewise',
pieces: [
{
min: 0,
max: 1000,
color: '#f6efa6',
legendBorderColor: '#333', // new property
},
// ...
]
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.