apache / apache/echarts

[Feature] KMB style yAxis label formatter

Open
#19,565 3 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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](https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi_MQegsJiAIwArAAMPLAATADMmTnZACxZ2ckAHFnJualVRQDspQBs6a1trdahHhTUdP4Q0MpxdiS2dgDcQA)
image

**Expected Style**
image

Currently, there is option [`yAxis.axisLabel.formatter`](https://echarts.apache.org/en/option.html#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

```ts
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:
```ts
// 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"

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.