apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.02k stars 19.59k forks source link

[Feature] Add final tick number as third parameter to axis label formatter #19794

Open JeffersonGarner opened 4 months ago

JeffersonGarner commented 4 months ago

What problem does this feature solve?

Case

Rather than show a numerical value of the last (upper bound) label on the Y Axis, it is sometimes desirable to show something else programmatically.

Context

We had a goal to show a unit of measure (ex: kWh, m/s, or A) on the last Y axis label. Since assigning axis.splitNumber doesn't always linearly corelate to the number of ticks, we couldn't determine the last tick without risky code.

Rationale

By having the final tick number in the axis label formatter, we could determine what tick was the last one and easily write that logic within the formatter. Without this, we could only entertain a solution as described in Stack Overflow here, which not intended to be done, and requires that the chart actually be rendered before we apply the actual formatting that we want.

What does the proposed API look like?

Current (described in docs)

formatter: function (value, index) {
    return value + 'kg';
}

Proposed


formatter: function (value, index, totalTicks) {
    const desiredLastTickLabel = "desired value here"
    const isLastTick = index === totalTicks - 1

    return isLastTick ? desiredLastTickLabel : value + 'kg';
}
helgasoft commented 4 months ago

We had a goal to show a unit of measure (ex: kWh, m/s, or A) on the last Y axis label.

Usually units of measurement are shown in axis' name. But it can also be show on last label by using max. Demo

JeffersonGarner commented 4 months ago

Usually units of measurement are shown in axis' name.

Agree! We've got some big numbers and units of measures, so we want to save some space and provide more for the chart view. We want to remove the axis name (which is the unit of measure in our case) and place it just as the last label.

But it can also be show on last label by using max.

I can see how this works, and is better than the referenced workaround , but processing the max from the data per axis is inefficient.

desjarlaisdumaishugo commented 2 months ago

Hi,

This feature is exactly what I'm looking for!

Would this be easy to do in the echarts code ?

Thanks !