[Discussion]: How to change the position of the Legends Nav Buttons?
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
Hi,
I have been using AntV charts for a while now. I wanted to know if there is a way to anchor the nav buttons to the right side or the left side.
Currently the nav button is just rendered next to the legends.
Current Behavior:
Expected Behavior:
OR
Current Code:
```
lineChartProps={{
className: "bn-build-history--chart",
scale: {
color: {
range: ["#d4335c", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4"],
},
},
xField: "index",
yField: "durationIncreasePercentage",
colorField: "config",
data: filteredData,
shapeField: "smooth",
point: {
shapeField: "circle",
sizeField: 6,
},
axis: {
x: {
label: false,
},
y: {
title: "Runtime",
label: false,
},
},
legend: {
color: {
position: "bottom",
maxRows: 2,
navLoop:true,
navOrientation:"vertical",
// navControllerSpacing:[50,50,50,50],
//navControllerPadding:[50,100,50,100],
itemLabelText: (value: {
id: string;
color: string;
label: string;
}) => {
return getBuildConfigName(
typeof value == "string" ? value : value.id,
configMap,
recentBuildsConfigMap
);
},
itemMarker: "circle",
},
},
style: {
lineWidth: 3,
},
tooltip: {
// title: (value: IChartData) =>
// dayjs(value.date).format("DD MMM YYYY hh:mm A"),
items: [
(datum: IChartData) => {
return {
name: getBuildConfigName(
datum.config,
configMap,
recentBuildsConfigMap
),
counter: datum.counter,
datum,
};
},
],
},
interaction: {
tooltip: {
enterable: true,
position:"bottom",
bounding: { x: 0, y: 50, width: 400, height: 10000 },
render: (
event: any,
options: {
title: string;
items: {
color: string;
name: string;
datum:IChartData;
counter: string;
}[];
}
) => {
return getTooltipItem(options.title, options.items, event);
},
},
},
...lineChartProps,
}}
```
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
_No response_
### Version / 版本
Please select / 请选择
### OS / 操作系统
- [ ] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [ ] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor guide
Research direction
Start by reading the legend color configuration and the navLoop, navOrientation, navControllerSpacing, and navControllerPadding options shown in the issue. Confirm how legend navigation is currently positioned and define the supported left- and right-anchored behavior with maintainers; done should include a documented configuration and verification against the expected layouts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100