antvis / antvis/G2

[V5]设置柱状图的最大宽度,联通区域不会跟随柱子宽度进行调整

Open
#5,500 1 comment 0 reactions 0 assignees View on GitHub
v5
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

- **G2 Version**: 5.1.0
- **Platform**: mac
- **Mini Showcase(like screenshots)**:
![image](https://github.com/antvis/G2/assets/24249578/4e39033a-e24d-4fe3-81ef-7ef8caf8eed3)
- **CodePen Link**:

代码(直接粘贴在官网示例中跑):
```javascript
import { Chart } from '@antv/g2';

const chart = new Chart({
container: 'container',
autoFit: true,
});

chart
.interval()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json',
})
.transform({ type: 'stackY' })
.transform({ type: 'sortX', by: 'y', reverse: true })
.encode('x', 'year')
.encode('y', 'value')
.encode('color', 'type')
.style({
maxWidth:80
})
chart.interaction('elementHighlightByColor', {
link: true,
}).state('active', { fill: 'red', linkFillOpacity: 0.5 })
.state('inactive', { opacity: 0.5 });

chart.render();
```

Contributor guide

Open the contributing guide

Research direction

Start with the provided G2 reproduction, focusing on the interval mark's style maxWidth setting and the elementHighlightByColor interaction with link enabled. Compare the rendered bar width with the linked highlight region. Done means the linked region follows the bar's constrained width; verify the behavior using the example data and interaction states.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.