Skip to content

Axis tick auto align on multiaxis #10928

@pooch-tonic

Description

@pooch-tonic

What problem does this feature solve?

I want to have a functionality which allows the user to have the same number of ticks on every parallel axis.

i.e. I have 2 yAxis, but the auto ticks calculation gives me 6 ticks for one axis and 5 for the other. The difference creates irregular spacings between the split lines, which is not really good for user experience.

Here is the sample option code:

option = {
  "xAxis": [
    {
      "data": ["test"]
    }
  ],
  "yAxis": [
    {
      "name": "A",
    },
    {
      "name": "B",
    }
  ],
  "series": [
    {
      "name": "A",
      "type": "bar",
      "data": [
        275500000,
      ],
      "yAxisIndex": 0
    },
    {
      "name": "B",
      "type": "bar",
      "data": [
        2289000000
      ],
      "yAxisIndex": 1
    },
  ]
}

And here is the sample result:
ECharts-tick-Align.jpg

My request is based on the HighCharts library, which provides an API called alignTicks, which does the same thing as I described here.

What does the proposed API look like?

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions