Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] able to customize the dataMax/dataMin of axis rather than fixed max/min #20770

Open
Justin-ZS opened this issue Feb 20, 2025 · 6 comments

Comments

@Justin-ZS
Copy link

Justin-ZS commented Feb 20, 2025

What problem does this feature solve?

demo

Like this demo, the axis.max/min just change the aixs range to [min, max].
max: 1555 will change the axis max to 1555

I want a dataMin/dataMax property that set the aixs range to [rounded(dataMin),rounded(dataMax)]
dataMax: 1555 will change the axis max to 1800

What does the proposed API look like?

type ValueAxis = {
  // other properties
  dataMax: number,
  dataMin: number
}
@Justin-ZS Justin-ZS changed the title [Feature] How to customize the dataMax/dataMin of axis rather than fixed max/min [Feature] able to customize the dataMax/dataMin of axis rather than fixed max/min Feb 20, 2025
@linghaoSu
Copy link
Member

The scale attribute in the axis options might be what you need.

doc demo

@Justin-ZS
Copy link
Author

The scale attribute in the axis options might be what you need.

doc demo

No. The scale is used for other cases and doesn't work when max/min are set

This configuration item is unavailable when the min and max are set.

@MatthiasMert
Copy link

You can pass a function to axis.min / axis.max and compute the axis boundary values from the min and max in your data.

Example

@Justin-ZS
Copy link
Author

You can pass a function to axis.min / axis.max and compute the axis boundary values from the min and max in your data.

Example

It's realy a good solution for simple cases.
However, mantaining a function to handle many edge cases — such as negtive, small numbers, big numbers — can be quite annoying.
ECharts already handles these cases effectively.
All we need is a new API to seamlessly integrate our custom dataMax/dataMin values.

@MatthiasMert
Copy link

Another possible workaround would be to use an inviseble helper series that only contains your min and max values. Could be problematic combined with tooltip: { trigger: 'axis' }.

Example

@Justin-ZS
Copy link
Author

Another possible workaround would be to use an inviseble helper series that only contains your min and max values. Could be problematic combined with tooltip: { trigger: 'axis' }.

Example

Yes. It's exactly the workaround i'm using for now.
I append an invisible line series to meet the requirement, but an official API would be much better

const invisibleSeries = {
    type: 'line',
    symbolSize: 0,
    lineStyle: {
        width: 0,
        opacity: 0,
    },
    emphasis: {
        scale: false,
        disabled: true,
    },
    select: {
        disabled: true,
    },
    silent: true,
    animation: false,
    label: {
        show: false,
        formatter: '',
    },
    tooltip: {
        show: false,
        formatter: '',
    },
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants