@opendata-ai/openchart-engine 7.1.3 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.1.3",
+  "version": "7.2.0",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "7.1.3",
+    "@opendata-ai/openchart-core": "7.2.0",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -227,7 +227,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#111111",
+          "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,
@@ -260,7 +260,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#111111",
+          "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,
@@ -293,7 +293,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#111111",
+          "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,
@@ -360,14 +360,14 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "background": "transparent",
       "categorical": [
         "#06b6d4",
-        "#eb7289",
-        "#3bb974",
-        "#ad87ed",
-        "#e69c3a",
-        "#4ba3f7",
-        "#eb8656",
-        "#8494fa",
-        "#00b9c3",
+        "#ee4a73",
+        "#00b054",
+        "#a46bf5",
+        "#e07d00",
+        "#0091ff",
+        "#f36000",
+        "#6f7dff",
+        "#00afbf",
       ],
       "diverging": {
         "brownTeal": [
@@ -461,6 +461,8 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "chromeGap": 4,
       "chromeToChart": 8,
       "padding": 20,
+      "xAxisHeight": 26,
+      "xAxisLabelPadding": 14,
     },
   },
   "tooltipDescriptors": [
@@ -790,7 +792,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         "value": "40",
       },
       {
-        "color": "#eb7289",
+        "color": "#ee4a73",
         "dataY": 143.375,
         "labelLines": [
           "UK",
@@ -800,7 +802,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "dataX": 657.899,
           "fill": "transparent",
           "radius": 4,
-          "stroke": "#eb7289",
+          "stroke": "#ee4a73",
           "strokeWidth": 2,
           "x": 661.899,
           "y": 143.375,
@@ -810,7 +812,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         "value": "35",
       },
       {
-        "color": "#3bb974",
+        "color": "#00b054",
         "dataY": 242.62999999999997,
         "labelLines": [
           "FR",
@@ -820,7 +822,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "dataX": 657.899,
           "fill": "transparent",
           "radius": 4,
-          "stroke": "#3bb974",
+          "stroke": "#00b054",
           "strokeWidth": 2,
           "x": 661.899,
           "y": 242.62999999999997,
@@ -830,7 +832,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         "value": "22",
       },
       {
-        "color": "#ad87ed",
+        "color": "#a46bf5",
         "dataY": 196.82,
         "labelLines": [
           "DE",
@@ -840,7 +842,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "dataX": 657.899,
           "fill": "transparent",
           "radius": 4,
-          "stroke": "#ad87ed",
+          "stroke": "#a46bf5",
           "strokeWidth": 2,
           "x": 661.899,
           "y": 196.82,
@@ -885,19 +887,19 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       },
       {
         "active": true,
-        "color": "#eb7289",
+        "color": "#ee4a73",
         "label": "UK",
         "shape": "line",
       },
       {
         "active": true,
-        "color": "#3bb974",
+        "color": "#00b054",
         "label": "FR",
         "shape": "line",
       },
       {
         "active": true,
-        "color": "#ad87ed",
+        "color": "#a46bf5",
         "label": "DE",
         "shape": "line",
       },
@@ -1035,7 +1037,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#eb7289",
+                "color": "#ee4a73",
                 "label": "country",
                 "value": "UK",
               },
@@ -1063,7 +1065,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#eb7289",
+                "color": "#ee4a73",
                 "label": "country",
                 "value": "UK",
               },
@@ -1096,7 +1098,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         },
       ],
       "seriesKey": "UK",
-      "stroke": "#eb7289",
+      "stroke": "#ee4a73",
       "strokeDasharray": undefined,
       "strokeWidth": 1.5,
       "type": "line",
@@ -1127,7 +1129,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#3bb974",
+                "color": "#00b054",
                 "label": "country",
                 "value": "FR",
               },
@@ -1155,7 +1157,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#3bb974",
+                "color": "#00b054",
                 "label": "country",
                 "value": "FR",
               },
@@ -1188,7 +1190,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         },
       ],
       "seriesKey": "FR",
-      "stroke": "#3bb974",
+      "stroke": "#00b054",
       "strokeDasharray": undefined,
       "strokeWidth": 1.5,
       "type": "line",
@@ -1219,7 +1221,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#ad87ed",
+                "color": "#a46bf5",
                 "label": "country",
                 "value": "DE",
               },
@@ -1247,7 +1249,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#ad87ed",
+                "color": "#a46bf5",
                 "label": "country",
                 "value": "DE",
               },
@@ -1280,7 +1282,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         },
       ],
       "seriesKey": "DE",
-      "stroke": "#ad87ed",
+      "stroke": "#a46bf5",
       "strokeDasharray": undefined,
       "strokeWidth": 1.5,
       "type": "line",
@@ -1334,14 +1336,14 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "background": "transparent",
       "categorical": [
         "#06b6d4",
-        "#eb7289",
-        "#3bb974",
-        "#ad87ed",
-        "#e69c3a",
-        "#4ba3f7",
-        "#eb8656",
-        "#8494fa",
-        "#00b9c3",
+        "#ee4a73",
+        "#00b054",
+        "#a46bf5",
+        "#e07d00",
+        "#0091ff",
+        "#f36000",
+        "#6f7dff",
+        "#00afbf",
       ],
       "diverging": {
         "brownTeal": [
@@ -1435,6 +1437,8 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "chromeGap": 4,
       "chromeToChart": 8,
       "padding": 20,
+      "xAxisHeight": 26,
+      "xAxisLabelPadding": 14,
     },
   },
   "tooltipDescriptors": [],
@@ -1923,14 +1927,14 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "background": "transparent",
       "categorical": [
         "#06b6d4",
-        "#eb7289",
-        "#3bb974",
-        "#ad87ed",
-        "#e69c3a",
-        "#4ba3f7",
-        "#eb8656",
-        "#8494fa",
-        "#00b9c3",
+        "#ee4a73",
+        "#00b054",
+        "#a46bf5",
+        "#e07d00",
+        "#0091ff",
+        "#f36000",
+        "#6f7dff",
+        "#00afbf",
       ],
       "diverging": {
         "brownTeal": [
@@ -2024,6 +2028,8 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "chromeGap": 4,
       "chromeToChart": 8,
       "padding": 20,
+      "xAxisHeight": 26,
+      "xAxisLabelPadding": 14,
     },
   },
   "tooltipDescriptors": [

package/src/__tests__/dimensions.test.ts

@@ -126,6 +126,84 @@ describe('computeDimensions', () => {
     expect(withLegend.chartArea.height).toBeLessThan(withoutLegend.chartArea.height);
   });
 
+  it('reserves enough left margin for y-axis title to clear tick labels', () => {
+    const specWithYTitle: NormalizedChartSpec = {
+      ...baseSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Share of districts' } },
+      },
+    };
+    const specWithoutYTitle: NormalizedChartSpec = {
+      ...baseSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const dimsWithTitle = computeDimensions(
+      specWithYTitle,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsWithoutTitle = computeDimensions(
+      specWithoutYTitle,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // A chart with a y-axis title needs more left margin than one without
+    expect(dimsWithTitle.margins.left).toBeGreaterThan(dimsWithoutTitle.margins.left);
+    // The difference should be at least enough for the rotated title glyph
+    // plus breathing room (halfGlyph ~7 + trailing pad 4 = 11px minimum)
+    expect(dimsWithTitle.margins.left - dimsWithoutTitle.margins.left).toBeGreaterThanOrEqual(11);
+  });
+
+  it('y-axis title margin scales with tick label width', () => {
+    const smallValues: NormalizedChartSpec = {
+      ...baseSpec,
+      data: [
+        { date: '2020-01-01', value: 5 },
+        { date: '2021-01-01', value: 9 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Count' } },
+      },
+    };
+    const largeValues: NormalizedChartSpec = {
+      ...baseSpec,
+      data: [
+        { date: '2020-01-01', value: 1_500_000 },
+        { date: '2021-01-01', value: 2_000_000 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Revenue ($)' } },
+      },
+    };
+
+    const dimsSmall = computeDimensions(
+      smallValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsLarge = computeDimensions(
+      largeValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // Larger numeric values produce wider tick labels (e.g. "1.5M" vs "0.0"),
+    // so the y-axis title margin should grow to keep clearance
+    expect(dimsLarge.margins.left).toBeGreaterThan(dimsSmall.margins.left);
+  });
+
   it('applies dark mode theme adaptation', () => {
     const lightDims = computeDimensions(
       baseSpec,
@@ -382,6 +460,36 @@ describe('computeDimensions', () => {
     });
   });
 
+  it('avoids doubling axisMargin and legendGap when top legend is present', () => {
+    const dimsWithTopLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      topLegend,
+      lightTheme,
+    );
+    const dimsNoLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // Without a top legend, the full topAxisGap (axisMargin + inlineTickOverhang)
+    // separates chrome from chart area. With a top legend, legendGap already
+    // provides separation, so only inlineTickOverhang is added (not the full
+    // topAxisGap). This means the chart area gains back ~axisMargin (6px)
+    // that would otherwise be redundant spacing.
+    //
+    // The top margin with legend includes: legendHeight(28) + legendGap(8)
+    // + inlineTickOverhang(17) instead of the no-legend topAxisGap(23).
+    // Net: margin delta = 28 + 8 + 17 - 23 = 30px.
+    // If axisMargin were doubling up: 28 + 8 + 23 - 23 = 36px.
+    const topMarginDelta = dimsWithTopLegend.margins.top - dimsNoLegend.margins.top;
+    expect(topMarginDelta).toBeLessThan(topLegend.bounds.height + legendGap(600) + 1);
+    // With a legend present, the chart area should still be shorter
+    expect(dimsWithTopLegend.chartArea.height).toBeLessThan(dimsNoLegend.chartArea.height);
+  });
+
   it('tightens legend gap on narrow viewports', () => {
     const wideDims = computeDimensions(
       baseSpec,

package/src/charts/bar/__tests__/labels.test.ts

@@ -217,3 +217,75 @@ describe('computeBarLabels with Unicode minus (U+2212) in aria values', () => {
     expect(labels[1].text).toBe('\u22125%'); // −5%
   });
 });
+
+// ---------------------------------------------------------------------------
+// Dark-mode inside-label color
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels inside-label color by mode', () => {
+  // Wide bar (>= 40px) so the label is placed inside and uses pickLabelColor.
+  function makeFilledMark(fill: string): RectMark {
+    return {
+      type: 'rect',
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 25,
+      fill,
+      data: { category: 'A', value: 100 },
+      aria: { label: 'A: 100' },
+    };
+  }
+
+  it('mid-tone fill gets white inside-label in light mode, dark in dark mode', () => {
+    const slate = [makeFilledMark('#94a3b8')];
+    const light = computeBarLabels(
+      slate,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      false,
+    );
+    const dark = computeBarLabels(
+      slate,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
+    expect(light[0].style.fill).toBe('#ffffff');
+    expect(dark[0].style.fill).toBe('#111111');
+  });
+
+  it('saturated fill keeps white inside-label in both modes', () => {
+    const red = [makeFilledMark('#c0392b')];
+    const light = computeBarLabels(
+      red,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      false,
+    );
+    const dark = computeBarLabels(
+      red,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
+    expect(light[0].style.fill).toBe('#ffffff');
+    expect(dark[0].style.fill).toBe('#ffffff');
+  });
+});

package/src/charts/bar/index.ts

@@ -13,7 +13,7 @@ import { computeBarLabels } from './labels';
 // Bar chart renderer
 // ---------------------------------------------------------------------------
 
-export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _theme) => {
+export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, theme) => {
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
 
   // Compute and attach value labels (respects spec.labels.density)
@@ -27,6 +27,9 @@ export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _t
     spec.labels.prefix,
     valueField,
     spec.labels.color,
+    theme.isDark,
+    spec.labels.fontSize,
+    spec.labels.suffix,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/bar/labels.ts

@@ -95,7 +95,11 @@ export function computeBarLabels(
   labelPrefix?: string,
   valueField?: string,
   labelColor?: string,
+  darkMode = false,
+  fontSize?: number,
+  labelSuffix?: string,
 ): ResolvedLabel[] {
+  const FONT_SIZE = fontSize ?? LABEL_FONT_SIZE;
   const targetMarks = filterByDensity(marks, density);
 
   const candidates: LabelCandidate[] = [];
@@ -131,9 +135,10 @@ export function computeBarLabels(
       }
     }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
+    if (labelSuffix) valuePart = valuePart + labelSuffix;
 
-    const textWidth = estimateTextWidth(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
-    const textHeight = LABEL_FONT_SIZE * 1.2;
+    const textWidth = estimateTextWidth(valuePart, FONT_SIZE, LABEL_FONT_WEIGHT);
+    const textHeight = FONT_SIZE * 1.2;
 
     // Detect stacked bars: cornerRadius 0 indicates stacked segment
     const isStacked = mark.stackGroup !== undefined;
@@ -150,18 +155,18 @@ export function computeBarLabels(
     if (isStacked && isInside) {
       // Stacked: centered within segment
       anchorX = mark.x + mark.width / 2;
-      fill = pickLabelColor(bgColor);
+      fill = pickLabelColor(bgColor, darkMode);
       textAnchor = 'middle';
     } else if (isInside) {
       if (isNegative) {
         // Negative bar: left-aligned within bar (bar extends leftward)
         anchorX = mark.x + LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = 'start';
       } else {
         // Positive bar: right-aligned within bar
         anchorX = mark.x + mark.width - LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = 'end';
       }
     } else {
@@ -195,7 +200,7 @@ export function computeBarLabels(
       priority: 'data',
       style: {
         fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: LABEL_FONT_SIZE,
+        fontSize: FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT,
         fill,
         lineHeight: 1.2,

package/src/charts/column/index.ts

@@ -27,6 +27,8 @@ export const columnRenderer: ChartRenderer = (spec, scales, chartArea, strategy,
     spec.labels.prefix,
     valueField,
     spec.labels.color,
+    spec.labels.fontSize,
+    spec.labels.suffix,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/column/labels.ts

@@ -51,7 +51,10 @@ export function computeColumnLabels(
   labelPrefix?: string,
   valueField?: string,
   labelColor?: string,
+  fontSize?: number,
+  labelSuffix?: string,
 ): ResolvedLabel[] {
+  const FONT_SIZE = fontSize ?? LABEL_FONT_SIZE;
   const targetMarks = filterByDensity(marks, density);
 
   const formatter = buildD3Formatter(labelFormat);
@@ -83,13 +86,14 @@ export function computeColumnLabels(
         valuePart = rawValue;
       }
     }
-    if (labelPrefix) valuePart = labelPrefix + valuePart;
-
     const numericValue = parseFloat(valuePart);
     const isNegative = Number.isFinite(numericValue) && numericValue < 0;
 
-    const textWidth = estimateTextWidth(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
-    const textHeight = LABEL_FONT_SIZE * 1.2;
+    if (labelPrefix) valuePart = labelPrefix + valuePart;
+    if (labelSuffix) valuePart = valuePart + labelSuffix;
+
+    const textWidth = estimateTextWidth(valuePart, FONT_SIZE, LABEL_FONT_WEIGHT);
+    const textHeight = FONT_SIZE * 1.2;
 
     // anchorY is the TOP of the label bounding box so the collision system's
     // AABB check (rect = { y: anchorY, height: textHeight }) is geometrically
@@ -110,7 +114,7 @@ export function computeColumnLabels(
       priority: 'data',
       style: {
         fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: LABEL_FONT_SIZE,
+        fontSize: FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT,
         fill: labelColor ?? getRepresentativeColor(mark.fill),
         lineHeight: 1.2,

package/src/compiler/normalize.ts

@@ -210,8 +210,10 @@ function normalizeLabels(labels?: LabelSpec): NormalizedChartSpec['labels'] {
     density: labels.density ?? 'auto',
     format: labels.format ?? '',
     prefix: labels.prefix ?? '',
+    suffix: labels.suffix,
     offsets: labels.offsets,
     color: labels.color,
+    fontSize: labels.fontSize,
   };
 }
 

package/src/compiler/types.ts

@@ -110,7 +110,7 @@ export interface NormalizedChartSpec {
   annotations: Annotation[];
   /** Normalized label configuration with defaults applied. density, format, and prefix are always set; offsets and color stay optional. */
   labels: Required<Pick<LabelConfig, 'density' | 'format' | 'prefix'>> &
-    Pick<LabelConfig, 'offsets' | 'color'>;
+    Pick<LabelConfig, 'offsets' | 'color' | 'fontSize' | 'suffix'>;
   /** Legend configuration (position override). */
   legend?: LegendConfig;
   /** Right-side endpoint labels column config (multi-series line/area only). */

package/src/layout/axes/ticks.ts

@@ -126,26 +126,27 @@ const TEMPORAL_SCALE_TYPES = new Set(['time', 'utc']);
 function formatTickLabel(value: unknown, resolvedScale: ResolvedScale): string {
   const axisConfig = resolvedScale.channel.axis || undefined;
   const formatStr = axisConfig?.format;
+  const suffix = axisConfig?.labelSuffix ?? '';
 
   if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
     const temporalFmt = buildTemporalFormatter(formatStr);
-    if (temporalFmt) return temporalFmt(value as Date);
+    if (temporalFmt) return temporalFmt(value as Date) + suffix;
     const useUtc = resolvedScale.type === 'utc';
-    return formatDate(value as Date, undefined, undefined, useUtc);
+    return formatDate(value as Date, undefined, undefined, useUtc) + suffix;
   }
 
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value as number;
     if (formatStr) {
       const fmt = buildD3Formatter(formatStr);
-      if (fmt) return fmt(num);
+      if (fmt) return fmt(num) + suffix;
     }
     // Abbreviate large numbers for axis labels
-    if (Math.abs(num) >= 1000) return abbreviateNumber(num);
-    return formatNumber(num);
+    if (Math.abs(num) >= 1000) return abbreviateNumber(num) + suffix;
+    return formatNumber(num) + suffix;
   }
 
-  return String(value);
+  return String(value) + suffix;
 }
 
 /**