Abbreviating Large FlexChart Label Values in React

Background:

Wijmo’s FlexChart is highly customizable, including axis labels. When values are large, you can abbreviate them for readability.

Steps to Complete:

1. Add an axis with wjProperty="axisY" and set its itemFormatter.

2. In the formatter, convert numeric values to abbreviated text and return the modified label.

Getting Started:

Install packages

npm i @mescius/wijmo.react.chart @mescius/wijmo.react.chart.animation @mescius/wijmo.chart @mescius/wijmo.styles

Import CSS

import '@mescius/wijmo.styles/wijmo.css';

Add an axis with wjProperty="axisY" and set its itemFormatter:

{/* Y-axis with itemFormatter that abbreviates values */}
<wjChart.FlexChartAxis wjProperty="axisY" itemFormatter={axisLabelFormatter} />

In the formatter, convert numeric values to abbreviated text and return the modified label:

// Axis label formatter: called by Wijmo per label
function axisLabelFormatter(
  _engine: wjcChart.IRenderEngine,
  label: {
    val?: any,
    value?: any,
    text: string,
    pos: wjcChart.Point,
    cls: string,
  }
) {
  const raw = typeof label.val !== "undefined" ? label.val : label.value; // handle API variants
  if (typeof raw === "number") {
    label.text = abbreviateK(raw);
  }
  return label; // must return the label object
}

Completed drop‑in React component (TypeScript):

// src/AbbreviatedLabelsChart.tsx
import React from "react";
import "@mescius/wijmo.styles/wijmo.css";
import * as wjcChart from "@mescius/wijmo.chart";
import * as wjChart from "@mescius/wijmo.react.chart";
import { FlexChartAnimation } from "@mescius/wijmo.react.chart.animation";

// Abbreviate only thousands into "k" (e.g., 1500 -> "1.5k")
function abbreviateK(value: number): string {
  if (value >= 1000 || value <= -1000) {
    const sign = value < 0 ? "-" : "";
    const abs = Math.abs(value);
    // keep one decimal place, trim trailing ".0"
    const text = (abs / 1000).toFixed(1).replace(/\.0$/, "");
    return `${sign}${text}k`;
  }
  return `${value}`;
}

// Axis label formatter: called by Wijmo per label
function axisLabelFormatter(
  _engine: wjcChart.IRenderEngine,
  label: {
    val?: any;
    value?: any;
    text: string;
    pos: wjcChart.Point;
    cls: string;
  }
) {
  const raw = typeof label.val !== "undefined" ? label.val : label.value; // handle API variants
  if (typeof raw === "number") {
    label.text = abbreviateK(raw);
  }
  return label; // must return the label object
}

// Sample data
interface CountrySeries {
  country: string;
  2014: number;
  2015: number;
  2016: number;
}

const data: CountrySeries[] = [
  { 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 },
];

const palette = [
  "rgba(42,159,214,1)",
  "rgba(119,179,0,1)",
  "rgba(153,51,204,1)",
  "rgba(255,136,0,1)",
  "rgba(204,0,0,1)",
  "rgba(0,204,163,1)",
  "rgba(61,109,204,1)",
  "rgba(82,82,82,1)",
  "rgba(0,0,0,1)",
];

export default function AbbreviatedLabelsChart() {
  return (
    <div style={{ maxWidth: 900 }}>
      <wjChart.FlexChart
        header="Tasty Food Awards"
        bindingX="country"
        itemsSource={data}
        palette={palette}
        selectionMode={wjcChart.SelectionMode.Point}
      >
        <wjChart.FlexChartLegend position={wjcChart.Position.Bottom} />

        {/* Y-axis with itemFormatter that abbreviates values */}
        <wjChart.FlexChartAxis
          wjProperty="axisY"
          itemFormatter={axisLabelFormatter}
        />

        {/* Series */}
        <wjChart.FlexChartSeries name="2014" binding="2014" />
        <wjChart.FlexChartSeries name="2015" binding="2015" />
        <wjChart.FlexChartSeries name="2016" binding="2016" />

        {/* Optional load/update animation */}
        <FlexChartAnimation
          duration={600}
          animationMode={wjcChart.AnimationMode.All}
          easing="cubic"
        />
      </wjChart.FlexChart>
    </div>
  );
}

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!