apache / apache/echarts

Two Axis linked with multiple Axis

Open
#17,956 8 comments 1 reaction 0 assignees View on GitHub
en new-feature topic: axis
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

I want to have a functionality which allows to have the same values on every parallel axis. Actually the function alignticks don't fit what I'm looking for.

Here a sample code:

```js
option = {

tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false
}
},
legend: {
data: ['Value', 'Price'],
left: 'center',
icon: 'circle',
itemGap: 30
},
xAxis: {
type: 'category',
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: [
{
name: 'Valor',
type: 'log',
scale: true
},
{
name: 'Price',
alignTicks:true,
type: 'log',
scale: true,
logBase: 10
}
],
series: [
{
name: 'Valor',
type: 'line',
lineStyle: { color: '#0066ff', width: 1.5 },
itemStyle: { color: '#0066ff' },
showSymbol: false,
z: 10,
data: [500, 780, 750, 760, 770, 2000, 3500, 1500, 30000, 3900, 7800, 7900, 8000, 9000, 7000, 8500, 8000, 7000, 6000, 4000]
},
{
name: 'Price',
type: 'line',
yAxisIndex: 1,
lineStyle: { color: '#000', width: 1.5 },
itemStyle: { color: '#000' },
showSymbol: false,
z: 20,
data: [300, 280, 250, 260, 270, 300, 550, 1000, 4000, 3900, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
}
],
};
```

My request is based on the [HighCharts](https://www.highcharts.com/) library, which provides an API called [linkedTo](https://api.highcharts.com/highcharts/yAxis.linkedTo), which does the same thing as I described here.

Here a example of highcharts: [jsfiddle](https://jsfiddle.net/nogz0j2b/)

### What does the proposed API look like?

Let's say we have a boolean attribute yAxis.linkedTo. By setting it to 0, its ticks will get aligned with every other axis in the yAxis array which has the same value. That way, if one of the axis has a value of 100, all the other axis will also have a value of 100 and get aligned altogether.

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.