[Feature] KMB style yAxis label formatter

[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

Expected Style

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"

    

[helgasoft]

try that:

  yAxis: {
    axisLabel: { formatter: v => {
      b= 1000000000; m= 1000000; k= 1000;
      out = v>=b ? v/b + 'B' 
          : v>=m ? v/m + 'M' 
          : v>=k ? v/k + 'K' : v;
      return out;
    }}
  },

📌 please close issue if problem solved.

[Ovilia]

Thanks @helgasoft for giving a way to solve this! I think axis label formatter do need to enhanced since we only provide a string format value by now. Let's plan this in 6.0 so that break changes can be accepted.

[wikitimepierre]

BMK would be great (as an option).

It would then need localization: