fix(studio): render complete interactive gallery previews

packages/ui/src/chart-config.ts

@@ -1,5 +1,22 @@
 import type { ChartConfiguration, ChartData, ChartType } from "chart.js";
 
+/** Shorten only the painted tick. Dataset labels remain intact for tooltips and tables. */
+export function chartTickLabel(label: unknown, limit: number): string {
+  const text = String(label ?? "");
+  if (text.length <= limit) return text;
+  const start = Math.ceil((limit - 1) / 2);
+  return text.slice(0, start) + "…" + text.slice(-(limit - 1 - start));
+}
+export function chartTooltipLines(label: unknown, limit: number): string[] {
+  const lines: string[] = [];
+  for (const part of String(label ?? "").split("\n")) {
+    if (!part.length) lines.push("");
+    for (let index = 0; index < part.length; index += limit)
+      lines.push(part.slice(index, index + limit));
+  }
+  return lines;
+}
+
 export interface ChartProps {
   title?: string;
   items?: unknown[];

packages/ui/src/chart-runtime.ts

@@ -1,6 +1,12 @@
 import Chart from "chart.js/auto";
 import type { ChartConfiguration, Plugin } from "chart.js";
-import { chartConfiguration, mergeOptions, type ChartProps } from "./chart-config";
+import {
+  chartConfiguration,
+  mergeOptions,
+  chartTickLabel,
+  chartTooltipLines,
+  type ChartProps,
+} from "./chart-config";
 
 const selector = '[data-wrnexus-runtime~="chartjs"][data-chart-config]';
 const mounted = new Map<
@@ -95,6 +101,36 @@ function configuration(root: HTMLElement, props: ChartProps): ChartConfiguration
     },
     config.options,
   );
+  if (["bar", "line"].includes(config.type)) {
+    const axis = config.options!.indexAxis === "y" ? "y" : "x";
+    const interaction = config.options!.interaction;
+    if (interaction?.mode === "index" && !interaction.axis) interaction.axis = axis;
+    const scale = ((config.options!.scales ??= {})[axis] ??= {});
+    if (!scale.type || scale.type === "category") {
+      const ticks = (scale.ticks ??= {});
+      if (!ticks.callback)
+        ticks.callback = function (value) {
+          return chartTickLabel(
+            this.getLabelForValue(Number(value)),
+            this.chart.width < 480 ? 18 : 36,
+          );
+        };
+    }
+  }
+  const tooltip = config.options!.plugins && config.options!.plugins.tooltip;
+  if ((tooltip as unknown) !== false && (config.options!.plugins as unknown) !== false) {
+    const plugin = (config.options!.plugins ??= {});
+    const options = (plugin.tooltip ??= {});
+    const callbacks = (options.callbacks ??= {});
+    if (!callbacks.title)
+      callbacks.title = (items) =>
+        items.length
+          ? chartTooltipLines(
+              items[0].label,
+              Math.max(12, Math.min(80, Math.floor((items[0].chart.width - 32) / 8))),
+            )
+          : [];
+  }
   config.options!.onClick = (event, elements, chart) => {
     if (!elements.length) return;
     const { index, datasetIndex } = elements[0];