antvis / antvis/G2

[Discussion]: How to change the position of the Legends Nav Buttons?

Open
#7,140 4 comments 0 reactions 0 assignees View on GitHub
waiting for maintainer
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:

Image

Expected Behavior:

Image
OR
Image

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.