Formatter AxisLabel ECharts, Format label value

Question

I have used BAR chart from ECharts and now I want to format its Y-Axis value to some other value.

Right now EChart generated my chart like above, But I want to display its Y-Axis value instead of 30,000 or 60,000 I want to display it as 30K, 60K, 80K.., and 150K.

I have tried with Formatter but it's not calling function runtime while EChart generating a chart to convert the value, Looks like this way we can just add Prefix/Suffix to the value

yAxis: [
    {
      type: 'value',
      data: [],
      axisLine: {
        show: true,
        lineStyle: {
          show: true,
          color: "black",
         },
       },
       axisLabel: {
         formatter: '{value} K'
       }
    },

I have also tried to give the function in formatter but I didn't find a way to pass the current value as a parameter in this function.

yAxis: [
    {
      type: 'value',
      data: [],
      axisLine: {
        show: true,
        lineStyle: {
          show: true,
          color: "black",
         },
       },
       axisLabel: {
         formatter: getFormattedValue(VALUE)
       }
    },

UPDATED: WITH NEW TRY, BUT STILL IT's NOT WORKING

When we use it like below on EChart official site then it's working https://echarts.apache.org/handbook/en/basics/release-note/5-3-0/#formatting-of-values-in-tooltip

      axisLabel: {
        formatter: val => `${val / 1000}K`
      }

Updated chart with correct format

But when I use it like below then it's not working, Even function is not getting called, the Value remain as it is

      axisLabel: {
        formatter: val => `${val / 1000}K`
      }

Chart not getting updated

score 2 · Answer 1 · answered Jan 08 '23 at 10:51

2

You are very close to the solution, actually...

let option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: val => `${val / 1000}K`
    }
  },
  series: [
    {
      data: [30000, 60000, 90000, 120000, 150000],
      type: 'line'
    }
  ]
};

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

#main {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>

<div id="main"></div>

The formatter is documented here: Documentation - Apache ECharts

answered Jan 08 '23 at 10:51

Badacadabra

8,043
7
28
49

Hi, I am getting ERROR src/app/components/common/bar-chart/bar-chart.component.ts:98:24 - error TS7006: Parameter 'val' implicitly has an 'any' type. 98 formatter: val => `${val / 1000}K` – Soft Onz Jan 08 '23 at 10:56
This is because you are using TypeScript. Did you install type definitions for ECharts? https://www.npmjs.com/package/@types/echarts – Badacadabra Jan 08 '23 at 10:59
Hi, Now I have installed your suggestion but still I am getting same error – Soft Onz Jan 08 '23 at 11:05
I guess you are using a framework... Can you give me its name? – Badacadabra Jan 08 '23 at 11:13
Yes, I am using Angular and it's version 14 – Soft Onz Jan 08 '23 at 11:18
OK, thanks. Can you try `(val: number) => ...` or `(val: any) => ...`? – Badacadabra Jan 08 '23 at 11:24
I have tried with the above but as I said in the question this function is not getting called – Soft Onz Jan 08 '23 at 11:43
Could you update your question with what you have tried, please? If you have a CodeSandbox or something like that, it would be ideal. – Badacadabra Jan 08 '23 at 11:47
You can try it on this site https://echarts.apache.org/handbook/en/basics/release-note/5-3-0/#formatting-of-values-in-tooltip If we use val => `${val / 1000}K` then it's working there but when we use it as (val: any) => `${val / 1000}K` then it's not working I have updated the question as well, Please check – Soft Onz Jan 08 '23 at 12:20
In fact, I am not sure to understand where you are stuck. If you want to test this chart with TypeScript, you should rather go to this page: https://echarts.apache.org/examples/en/editor.html?c=mix-line-bar&lang=ts. There it works perfectly fine... – Badacadabra Jan 08 '23 at 12:47

Formatter AxisLabel ECharts, Format label value

1 Answers1