Skip to content

[Feature] KMB style yAxis label formatter #19565

Open
@fondoger

Description

@fondoger

What problem does this feature solve?

Hi Echarts team,

I want to have a KMB style yAxis label formatter for large numeric label values. Eg: "100M" for "100,000,000".

Current style:
Demo Link
image

Expected Style
image

Currently, there is option yAxis.axisLabel.formatter to customize yAxis labels. We can provide a callback function to customize label. However, this callback function lacks some important information. I need at least Axis min value, max value to determine whether to show as K or M or B.

What does the proposed API look like?

https://github.com/susiwen8/echarts/blob/b69e1637e8117aa210f88cbd5073c43862c26f31/src/coord/axisHelper.ts#L269

    else if (zrUtil.isFunction(labelFormatter)) {
        return (function (cb) {
            return function (tick: ScaleTick, idx: number) {
                // The original intention of `idx` is "the index of the tick in all ticks".
                // But the previous implementation of category axis do not consider the
                // `axisLabel.interval`, which cause that, for example, the `interval` is
                // `1`, then the ticks "name5", "name7", "name9" are displayed, where the
                // corresponding `idx` are `0`, `2`, `4`, but not `0`, `1`, `2`. So we keep
                // the definition here for back compatibility.
                if (categoryTickStart != null) {
                    idx = tick.value - categoryTickStart;
                }
                return cb(
                    getAxisRawValue(axis, tick) as number,
                    idx,
                    (tick as TimeScaleTick).level != null ? {
                        level: (tick as TimeScaleTick).level
                    } : null,
// ADDED INFORMATION, MIN AND MAX VALUE
// ADDED INFORMATION, MIN AND MAX VALUE
// ADDED INFORMATION, MIN AND MAX VALUE
                    { min: axisMinValue, max: axisMaxValue },
                );
            };
        })(labelFormatter as (...args: any[]) => string);
    }

Another proposal:

// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback.
formatter: function (value, index) {
    return value + 'kg';
}
// Use predefined KMB style
formatter: "KMB-Style"

    

Metadata

Metadata

Assignees

No one assigned

    Labels

    enThis issue is in Englishnew-featurependingWe are not sure about whether this is a bug/new feature.

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions