[FIX] chart: labels should not be truncated in tooltip

src/helpers/figures/charts/bar_chart.ts

@@ -41,7 +41,7 @@ import {
   transformChartDefinitionWithDataSetsWithZone,
   updateChartRangesWithDataSets,
 } from "./chart_common";
-import { CHART_COMMON_OPTIONS, truncateLabel } from "./chart_ui_common";
+import { CHART_COMMON_OPTIONS } from "./chart_ui_common";
 import {
   getBarChartData,
   getBarChartDatasets,
@@ -228,7 +228,7 @@ export function createBarChartRuntime(chart: BarChart, getters: Getters): BarCha
   const config: ChartConfiguration = {
     type: "bar",
     data: {
-      labels: chartData.labels.map(truncateLabel),
+      labels: chartData.labels,
       datasets: getBarChartDatasets(definition, chartData),
     },
     options: {

src/helpers/figures/charts/chart_common.ts

@@ -1,4 +1,5 @@
 import { transformZone } from "../../../collaborative/ot/ot_helpers";
+import { MAX_CHAR_LABEL } from "../../../constants";
 import { _t } from "../../../translation";
 import {
   AddColumnsRowsCommand,
@@ -419,10 +420,11 @@ export function formatTickValue(localeFormat: LocaleFormat) {
     value = Number(value);
     if (isNaN(value)) return value;
     const { locale, format } = localeFormat;
-    return formatValue(value, {
+    const formattedValue = formatValue(value, {
       locale,
       format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
     });
+    return truncateLabel(formattedValue);
   };
 }
 
@@ -440,3 +442,13 @@ export function getPieColors(colors: ColorGenerator, dataSetsValues: DatasetValu
 
   return pieColors;
 }
+
+export function truncateLabel(label: string | undefined): string {
+  if (!label) {
+    return "";
+  }
+  if (label.length > MAX_CHAR_LABEL) {
+    return label.substring(0, MAX_CHAR_LABEL) + "…";
+  }
+  return label;
+}

src/helpers/figures/charts/chart_ui_common.ts

@@ -1,5 +1,4 @@
 import type { ChartOptions } from "chart.js";
-import { MAX_CHAR_LABEL } from "../../../constants";
 import { Figure } from "../../../types";
 import { GaugeChartRuntime, ScorecardChartRuntime } from "../../../types/chart";
 import { ChartRuntime } from "../../../types/chart/chart";
@@ -23,16 +22,6 @@ export const CHART_COMMON_OPTIONS: ChartOptions = {
   animation: false,
 };
 
-export function truncateLabel(label: string | undefined): string {
-  if (!label) {
-    return "";
-  }
-  if (label.length > MAX_CHAR_LABEL) {
-    return label.substring(0, MAX_CHAR_LABEL) + "…";
-  }
-  return label;
-}
-
 export function chartToImage(
   runtime: ChartRuntime,
   figure: Figure,

src/helpers/figures/charts/combo_chart.ts

@@ -44,7 +44,7 @@ import {
   transformChartDefinitionWithDataSetsWithZone,
   updateChartRangesWithDataSets,
 } from "./chart_common";
-import { CHART_COMMON_OPTIONS, truncateLabel } from "./chart_ui_common";
+import { CHART_COMMON_OPTIONS } from "./chart_ui_common";
 import {
   getBarChartData,
   getBarChartLayout,
@@ -231,7 +231,7 @@ export function createComboChartRuntime(chart: ComboChart, getters: Getters): Co
   const config: ChartConfiguration = {
     type: "bar",
     data: {
-      labels: chartData.labels.map(truncateLabel),
+      labels: chartData.labels,
       datasets: getComboChartDatasets(definition, chartData),
     },
     options: {

src/helpers/figures/charts/line_chart.ts

@@ -42,7 +42,7 @@ import {
   transformChartDefinitionWithDataSetsWithZone,
   updateChartRangesWithDataSets,
 } from "./chart_common";
-import { CHART_COMMON_OPTIONS, truncateLabel } from "./chart_ui_common";
+import { CHART_COMMON_OPTIONS } from "./chart_ui_common";
 import {
   getChartShowValues,
   getChartTitle,
@@ -238,8 +238,7 @@ export function createLineChartRuntime(chart: LineChart, getters: Getters): Char
   const config: ChartConfiguration = {
     type: "line",
     data: {
-      labels:
-        chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+      labels: chartData.labels,
       datasets: getLineChartDatasets(definition, chartData),
     },
     options: {

src/helpers/figures/charts/pie_chart.ts

@@ -37,7 +37,7 @@ import {
   transformChartDefinitionWithDataSetsWithZone,
   updateChartRangesWithDataSets,
 } from "./chart_common";
-import { CHART_COMMON_OPTIONS, truncateLabel } from "./chart_ui_common";
+import { CHART_COMMON_OPTIONS } from "./chart_ui_common";
 import {
   getChartShowValues,
   getChartTitle,
@@ -202,7 +202,7 @@ export function createPieChartRuntime(chart: PieChart, getters: Getters): PieCha
   const config: ChartConfiguration = {
     type: chart.isDoughnut ? "doughnut" : "pie",
     data: {
-      labels: chartData.labels.map(truncateLabel),
+      labels: chartData.labels,
       datasets: getPieChartDatasets(definition, chartData),
     },
     options: {

src/helpers/figures/charts/pyramid_chart.ts

@@ -33,7 +33,7 @@ import {
   transformChartDefinitionWithDataSetsWithZone,
   updateChartRangesWithDataSets,
 } from "./chart_common";
-import { CHART_COMMON_OPTIONS, truncateLabel } from "./chart_ui_common";
+import { CHART_COMMON_OPTIONS } from "./chart_ui_common";
 import {
   getBarChartDatasets,
   getBarChartLayout,
@@ -204,7 +204,7 @@ export function createPyramidChartRuntime(
   const config: ChartConfiguration = {
     type: "bar",
     data: {
-      labels: chartData.labels.map(truncateLabel),
+      labels: chartData.labels,
       datasets: getBarChartDatasets(definition, chartData),
     },
     options: {

src/helpers/figures/charts/radar_chart.ts

@@ -39,7 +39,7 @@ import {
   transformChartDefinitionWithDataSetsWithZone,
   updateChartRangesWithDataSets,
 } from "./chart_common";
-import { CHART_COMMON_OPTIONS, truncateLabel } from "./chart_ui_common";
+import { CHART_COMMON_OPTIONS } from "./chart_ui_common";
 import {
   getBarChartLayout,
   getChartShowValues,
@@ -223,7 +223,7 @@ export function createRadarChartRuntime(chart: RadarChart, getters: Getters): Ra
   const config: ChartConfiguration = {
     type: "radar",
     data: {
-      labels: chartData.labels.map(truncateLabel),
+      labels: chartData.labels,
       datasets: getRadarChartDatasets(definition, chartData),
     },
     options: {

src/helpers/figures/charts/runtime/chart_data_extractor.ts

@@ -27,7 +27,6 @@ import { isDateTimeFormat } from "../../../format/format";
 import { deepCopy, findNextDefinedValue, range } from "../../../misc";
 import { isNumber } from "../../../numbers";
 import { recomputeZones } from "../../../recompute_zones";
-import { truncateLabel } from "../chart_ui_common";
 
 export function getBarChartData(
   definition: GenericDefinition<BarChartDefinition>,
@@ -670,7 +669,7 @@ function getChartDatasetValues(getters: Getters, dataSets: DataSet[]): DatasetVa
         : undefined;
       label =
         cell && labelRange
-          ? truncateLabel(cell.formattedValue)
+          ? cell.formattedValue
           : (label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`);
     } else {
       label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`;

src/helpers/figures/charts/runtime/chartjs_dataset.ts

@@ -27,7 +27,6 @@ import {
   setColorAlpha,
 } from "../../../color";
 import { TREND_LINE_XAXIS_ID, getPieColors } from "../chart_common";
-import { truncateLabel } from "../chart_ui_common";
 
 export function getBarChartDatasets(
   definition: GenericDefinition<BarChartDefinition>,
@@ -116,7 +115,7 @@ export function getWaterfallDatasetAndLabels(
 
   return {
     datasets: [dataset],
-    labels: labelsWithSubTotals.map(truncateLabel),
+    labels: labelsWithSubTotals,
   };
 }
 

src/helpers/figures/charts/runtime/chartjs_legend.ts

@@ -17,7 +17,7 @@ import {
 import { ComboChartDefinition } from "../../../../types/chart/combo_chart";
 import { RadarChartDefinition } from "../../../../types/chart/radar_chart";
 import { ColorGenerator } from "../../../color";
-import { chartFontColor, getPieColors } from "../chart_common";
+import { chartFontColor, getPieColors, truncateLabel } from "../chart_common";
 
 type ChartLegend = DeepPartial<LegendOptions<any>>;
 
@@ -78,7 +78,7 @@ export function getPieChartLegend(
       generateLabels: (c) =>
         //@ts-ignore
         c.data.labels.map((label, index) => ({
-          text: label,
+          text: truncateLabel(String(label)),
           strokeStyle: colors[index],
           fillStyle: colors[index],
           pointStyle: "rect",
@@ -233,7 +233,7 @@ function getCustomLegendLabels(
       usePointStyle: true,
       generateLabels: (chart: Chart) =>
         chart.data.datasets.map((dataset, index) => ({
-          text: dataset.label ?? "",
+          text: truncateLabel(dataset.label),
           fontColor,
           strokeStyle: dataset.borderColor as Color,
           fillStyle: dataset.backgroundColor as Color,

src/helpers/figures/charts/runtime/chartjs_scales.ts

@@ -21,6 +21,7 @@ import {
   chartFontColor,
   formatTickValue,
   getDefinedAxis,
+  truncateLabel,
 } from "../chart_common";
 
 type ChartScales = ChartOptions["scales"];
@@ -252,6 +253,11 @@ function getChartAxis(
       ticks: {
         padding: 5,
         color: fontColor,
+        callback: function (tickValue: number) {
+          // Category axis callback's internal tick value is the index of the label
+          // https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats
+          return truncateLabel(this.getLabelForValue(tickValue));
+        },
       },
       grid: {
         display: false,

src/helpers/figures/charts/scatter_chart.ts

@@ -40,7 +40,7 @@ import {
   transformChartDefinitionWithDataSetsWithZone,
   updateChartRangesWithDataSets,
 } from "./chart_common";
-import { CHART_COMMON_OPTIONS, truncateLabel } from "./chart_ui_common";
+import { CHART_COMMON_OPTIONS } from "./chart_ui_common";
 import {
   getChartShowValues,
   getChartTitle,
@@ -231,8 +231,7 @@ export function createScatterChartRuntime(
     // have less options than the line chart (it only works with linear labels)
     type: "line",
     data: {
-      labels:
-        chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+      labels: chartData.labels,
       datasets: getScatterChartDatasets(definition, chartData),
     },
     options: {

tests/figures/chart/__snapshots__/chart_plugin.test.ts.snap

@@ -232,6 +232,7 @@ exports[`Linear/Time charts snapshot test of chartJS configuration for date char
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "maxTicksLimit": 15,
             "padding": 5,
@@ -485,6 +486,7 @@ exports[`datasource tests create a chart with stacked bar 1`] = `
           },
           "stacked": true,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -597,6 +599,7 @@ exports[`datasource tests create chart with a dataset of one cell (no title) 1`]
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -651,7 +654,7 @@ exports[`datasource tests create chart with column datasets 1`] = `
             18,
           ],
           "fill": false,
-          "label": "second column datase…",
+          "label": "second column dataset",
           "pointBackgroundColor": "#EA6175",
           "tension": 0,
           "yAxisID": "y",
@@ -727,6 +730,7 @@ exports[`datasource tests create chart with column datasets 1`] = `
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -781,7 +785,7 @@ exports[`datasource tests create chart with column datasets with category title
             18,
           ],
           "fill": false,
-          "label": "second column datase…",
+          "label": "second column dataset",
           "pointBackgroundColor": "#EA6175",
           "tension": 0,
           "yAxisID": "y",
@@ -857,6 +861,7 @@ exports[`datasource tests create chart with column datasets with category title
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -987,6 +992,7 @@ exports[`datasource tests create chart with column datasets without series title
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -1088,6 +1094,7 @@ exports[`datasource tests create chart with only the dataset title (no data) 1`]
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -1142,7 +1149,7 @@ exports[`datasource tests create chart with rectangle dataset 1`] = `
             18,
           ],
           "fill": false,
-          "label": "second column datase…",
+          "label": "second column dataset",
           "pointBackgroundColor": "#EA6175",
           "tension": 0,
           "yAxisID": "y",
@@ -1218,6 +1225,7 @@ exports[`datasource tests create chart with rectangle dataset 1`] = `
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -1348,6 +1356,7 @@ exports[`datasource tests create chart with row datasets 1`] = `
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -1478,6 +1487,7 @@ exports[`datasource tests create chart with row datasets with category title 1`]
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },
@@ -1608,6 +1618,7 @@ exports[`datasource tests create chart with row datasets without series title 1`
           },
           "stacked": undefined,
           "ticks": {
+            "callback": [Function],
             "color": "#000000",
             "padding": 5,
           },

tests/figures/chart/bar_chart_plugin.test.ts

@@ -89,7 +89,6 @@ describe("bar chart", () => {
       expect(options.scales.x.title.text).toBe("xAxis");
       expect(options.scales.x.ticks.callback(5)).toBe("5€");
       expect(options.scales.y.title.text).toBe("yAxis");
-      expect(options.scales.y.ticks.callback).toBeUndefined();
 
       const tooltipTestItem = {
         parsed: { x: 5, y: "label" },