Abbreviating Large FlexChart Label Values in Vue

Background:

When FlexChart values get large, axis labels can become hard to read. Wijmo’s Axis itemFormatter lets you render custom label text, e.g., show 1500 as 1.5k, without changing your data or chart scaling.

Steps to Complete:

1. Add the Axis itemFormatter on your <wj-flex-chart-axis wj-property="axisY"> element.

2. In the formatter, detect large numbers and replace label.text with an abbreviated value; return the same label object.

Getting Started:

Install packages

npm i @mescius/wijmo.vue2.chart @mescius/wijmo.styles

Create or update your main.ts (or main.js) to register Wijmo’s Vue Chart components and load CSS.

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';

// Wijmo styles (required)
import '@mescius/wijmo.styles/wijmo.css';

// Register all FlexChart components globally
import { registerChart } from '@mescius/wijmo.vue2.chart';

const app = createApp(App);
registerChart(app);
app.mount('#app');

Add the Axis itemFormatter on your <wj-flex-chart-axis wj-property="axisY"> element.

<!-- Y axis: abbreviate large labels -->
<wj-flex-chart-axis
    wj-property="axisY"
    :item-formatter="axisLabelFormatter"
/>

In the formatter, detect large numbers and replace label.text with an abbreviated value; return the same label object.

// Abbreviate thousands as "k" with one decimal (e.g., 1500 -> "1.5k").
function abbreviateK(value) {
  const n = Number(value);
  if (!Number.isFinite(n)) return String(value);
  const abs = Math.abs(n);
  if (abs >= 1000) {
    const text = (abs / 1000).toFixed(1).replace(/\.0$/, "");
    return `${n < 0 ? "-" : ""}${text}k`;
  }
  return String(n);
}

// Axis label formatter: Wijmo calls this for each label
function axisLabelFormatter(_engine, label) {
  const raw = label?.val ?? label?.value; // handle API variants
  if (typeof raw === "number") {
    label.text = abbreviateK(raw);
  }
  return label; // important: return the label object
}

Combined code:

<template>
  <div style="max-width: 900px">
    <wj-flex-chart
      header="Tasty Food Awards"
      binding-x="country"
      :items-source="data"
    >
      <!-- Y axis: abbreviate large labels -->
      <wj-flex-chart-axis
        wj-property="axisY"
        :item-formatter="axisLabelFormatter"
      />

      <!-- Legend and Series -->
      <wj-flex-chart-legend position="Bottom" />
      <wj-flex-chart-series name="2014" binding="2014" />
      <wj-flex-chart-series name="2015" binding="2015" />
      <wj-flex-chart-series name="2016" binding="2016" />
    </wj-flex-chart>
  </div>
</template>

<script setup>
// Sample data
const data = [
  { country: "USA", 2014: 920, 2015: 1520, 2016: 2350 },
  { country: "UK", 2014: 430, 2015: 1180, 2016: 1640 },
  { country: "Germany", 2014: 760, 2015: 990, 2016: 2010 },
  { country: "Japan", 2014: 510, 2015: 1340, 2016: 1780 },
  { country: "Canada", 2014: 630, 2015: 1010, 2016: 1490 },
];

// Abbreviate thousands as "k" with one decimal (e.g., 1500 -> "1.5k").
function abbreviateK(value) {
  const n = Number(value);
  if (!Number.isFinite(n)) return String(value);
  const abs = Math.abs(n);
  if (abs >= 1000) {
    const text = (abs / 1000).toFixed(1).replace(/\.0$/, "");
    return `${n < 0 ? "-" : ""}${text}k`;
  }
  return String(n);
}

// Axis label formatter: Wijmo calls this for each label
function axisLabelFormatter(_engine, label) {
  const raw = label?.val ?? label?.value; // handle API variants
  if (typeof raw === "number") {
    label.text = abbreviateK(raw);
  }
  return label; // important: return the label object
}
</script>

<style scoped>
/* optional */
</style>

And that's it! Your label's text values should be abbreviated to show k values. This approach can be used to abbreviate any large values that you like. You just need to adjust the expression to convert the value. Happy coding!