@cfasim-ui/docs 0.4.13 → 0.4.14

package/charts/BarChart/BarChart.md

@@ -208,6 +208,54 @@ LineChart's `x-tick-format` (e.g. `"iso"`, `"month-year"`, an
 `Intl.DateTimeFormatOptions` object, or a `(ms, unit?) => string`
 function).
 
+### Crowded categorical labels
+
+Non-date categorical labels are also thinned when they don't all fit:
+the chart estimates label width from character count and font size,
+then strides through the categories so adjacent labels never overlap.
+Every bar still renders — only the tick labels are skipped.
+
+<ComponentDemo>
+  <BarChart
+    data-testid="thinned-bar-chart"
+    :data="[3, 5, 8, 12, 18, 24, 31, 27, 22, 16, 11, 7, 4, 2]"
+    :categories="['2.11', '2.33', '2.56', '2.78', '3.00', '3.22', '3.44', '3.67', '3.89', '4.11', '4.33', '4.56', '4.78', '5.00']"
+    :width="380"
+    :height="220"
+    x-label="R₀"
+    y-label="Frequency"
+  />
+
+<template #code>
+
+```vue
+<BarChart
+  :data="[3, 5, 8, 12, 18, 24, 31, 27, 22, 16, 11, 7, 4, 2]"
+  :categories="[
+    '2.11',
+    '2.33',
+    '2.56',
+    '2.78',
+    '3.00',
+    '3.22',
+    '3.44',
+    '3.67',
+    '3.89',
+    '4.11',
+    '4.33',
+    '4.56',
+    '4.78',
+    '5.00',
+  ]"
+  :height="220"
+  x-label="R₀"
+  y-label="Frequency"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
 ### Logarithmic value axis
 
 Set `value-scale-type="log"` to switch the value axis to base-10 log

package/charts/BarChart/BarChart.vue

@@ -547,10 +547,29 @@ const categoryTickItems = computed<CategoryTickItem[]>(() => {
   const out: CategoryTickItem[] = [];
   const fmt = (label: string, i: number) =>
     props.categoryFormat ? props.categoryFormat(label, i) : label;
+  const formatted = new Array<string>(n);
+  let maxLen = 0;
   for (let i = 0; i < n; i++) {
+    formatted[i] = fmt(categoryLabels.value[i], i);
+    if (formatted[i].length > maxLen) maxLen = formatted[i].length;
+  }
+  // Skip labels when slots are too narrow (or short) to fit them
+  // without overlap. Vertical orientation measures horizontal label
+  // width (≈ chars × fontSize × 0.6); horizontal orientation just
+  // measures stacked line height (≈ fontSize × 1.2).
+  const fontSize = props.tickLabelStyle?.fontSize ?? TICK_LABEL_FONT_SIZE;
+  const minGap = 8;
+  const needPerLabel = isVertical.value
+    ? maxLen * fontSize * 0.6 + minGap
+    : fontSize * 1.2 + minGap;
+  const stride =
+    slotSize.value > 0
+      ? Math.max(1, Math.ceil(needPerLabel / slotSize.value))
+      : 1;
+  for (let i = 0; i < n; i += stride) {
     const center = slotStart(i) + slotSize.value / 2;
     out.push({
-      label: fmt(categoryLabels.value[i], i),
+      label: formatted[i],
       pos: center,
       anchor: "middle",
     });

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.13",
+  "version": "0.4.14",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {