eleventy-plugin-uncharted 0.2.0 → 0.3.0

package/README.md

@@ -229,14 +229,16 @@ The chart automatically calculates the range from the maximum positive stack to
 | `titleY` | string | Y-axis title (scatter only, defaults to column name) |
 | `legend` | array | Custom legend labels |
 | `center` | object | Donut center content (`value`, `label`) |
+| `showPercentages` | boolean | Show percentages instead of values in donut legend |
 | `animate` | boolean | Override global animation setting |
 | `format` | object | Number formatting options (see Value Formatting) |
+| `rotateLabels` | boolean | Rotate X-axis labels vertically (stacked-column, dot) |
 
 ## Styling
 
 ### CSS Custom Properties
 
-Override the default color palette:
+Override the default color palette and sizing:
 
 ```css
 :root {
@@ -249,6 +251,38 @@ Override the default color palette:
   --chart-color-7: #009688;
   --chart-color-8: #78909c;
   --chart-bg: rgba(128, 128, 128, 0.15);
+  --chart-height: 12rem;           /* Height of bar/column/dot/scatter charts */
+  --chart-column-width: 1rem;      /* Min width per column */
+  --chart-donut-size: 20rem;       /* Donut chart max diameter */
+  --chart-donut-hole: 30%;         /* Donut hole size (percentage of diameter) */
+}
+```
+
+### Responsive Donut Charts
+
+Donut charts automatically adapt to their container using CSS container queries:
+
+- **Narrow containers**: Donut on top, legend wraps below horizontally
+- **Wide containers** (24rem+): Donut and legend side by side
+
+The donut scales to 80% of container width (minimum 8rem, maximum `--chart-donut-size`).
+
+### Per-Chart Styling
+
+Each chart gets a class based on its ID for targeted styling:
+
+```yaml
+charts:
+  sales-growth:
+    type: stacked-column
+    file: charts/sales.csv
+```
+
+```css
+/* Target this specific chart */
+.chart-sales-growth {
+  --chart-height: 16rem;
+  --chart-color-1: #ff6b6b;
 }
 ```
 

package/css/uncharted.css

@@ -26,10 +26,11 @@
   /* Spacing and sizing */
   --chart-gap: 0.5rem;
   --chart-bar-height: 1.5rem;
-  --chart-column-width: 2.5rem;
-  --chart-donut-size: 12rem;
-  --chart-donut-thickness: 2.5rem;
+  --chart-column-width: 1rem;
+  --chart-donut-size: 20rem;
+  --chart-donut-hole: 30%;
   --chart-dot-size: 0.75rem;
+  --chart-height: 12rem;
 }
 
 /* ==========================================================================
@@ -54,8 +55,10 @@
    ========================================================================== */
 
 .chart {
-  margin: 1.5rem 0;
   font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .chart-title {
@@ -111,7 +114,7 @@
 
 .chart-legend-item .legend-value {
   opacity: 0.7;
-  margin-left: 0.25rem;
+  margin-left: 0.125rem;
 }
 
 /* ==========================================================================
@@ -121,6 +124,8 @@
 .chart-body {
   display: flex;
   gap: 0.5rem;
+  flex: 1;
+  min-height: var(--chart-height);
 }
 
 .chart-y-axis {
@@ -131,7 +136,7 @@
   align-items: flex-end;
   min-width: 2rem;
   box-sizing: border-box;
-  height: 12rem;
+  min-height: var(--chart-height);
   padding-top: 0.5rem;
   padding-bottom: 0;
 }
@@ -201,8 +206,10 @@
 .chart-stacked-bar .chart-bars {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: var(--chart-gap) 0.75rem;
-  align-items: center;
+  grid-auto-rows: 1fr;
+  gap: clamp(0.375rem, 1.5cqi, 1rem) 0.75rem;
+  align-items: stretch;
+  min-height: var(--chart-height);
 }
 
 .chart-stacked-bar .bar-row {
@@ -212,10 +219,13 @@
 .chart-stacked-bar .bar-label {
   font-size: 0.875rem;
   text-align: right;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 .chart-stacked-bar .bar-track {
-  height: var(--chart-bar-height);
+  min-height: var(--chart-bar-height);
   border-radius: 3px;
   overflow: hidden;
   background: var(--chart-bg);
@@ -234,6 +244,8 @@
 }
 
 .chart-stacked-bar .bar-value {
+  display: flex;
+  align-items: center;
   font-size: 0.875rem;
   font-variant-numeric: tabular-nums;
   min-width: 2rem;
@@ -244,19 +256,36 @@
    ========================================================================== */
 
 .chart-stacked-column .chart-body {
-  align-items: stretch;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+}
+
+.chart-stacked-column .chart-y-axis {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.chart-stacked-column .chart-scroll {
+  grid-row: 1 / -1;
+  grid-column: 2;
+  display: grid;
+  grid-template-rows: subgrid;
+  overflow-x: auto;
+  overflow-y: visible;
 }
 
 .chart-stacked-column .chart-columns {
+  grid-row: 1;
+  position: relative;
   display: flex;
-  gap: var(--chart-gap);
+  gap: clamp(0.375rem, 1.5cqi, 1rem);
   align-items: stretch;
-  height: 12rem;
-  flex: 1;
-  background: var(--chart-bg);
-  border-radius: 3px;
+  min-height: var(--chart-height);
   padding: 0.5rem 0.5rem 0 0.5rem;
   box-sizing: border-box;
+  background: var(--chart-bg);
+  border-radius: 3px;
 }
 
 .chart-stacked-column .column-track {
@@ -264,7 +293,6 @@
   flex-direction: column-reverse;
   flex: 1;
   min-width: var(--chart-column-width);
-  max-width: calc(var(--chart-column-width) * 2);
   border-radius: 3px 3px 0 0;
   overflow: hidden;
 }
@@ -277,58 +305,101 @@
 }
 
 .chart-stacked-column .column-labels {
+  grid-row: 2;
   display: flex;
-  gap: var(--chart-gap);
+  gap: clamp(0.375rem, 1.5cqi, 1rem);
   padding: 0.25rem 0.5rem 0;
-  margin-left: 2.5rem;
 }
 
 .chart-stacked-column .column-label {
   flex: 1;
   min-width: var(--chart-column-width);
-  max-width: calc(var(--chart-column-width) * 2);
-  font-size: 0.75rem;
+  font-size: 0.7rem;
+  opacity: 0.6;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* Rotated column labels (opt-in via rotateLabels config) */
+.chart-stacked-column.rotate-labels .column-labels {
+  padding-top: 0.5rem;
+  align-items: flex-start;
+}
+
+.chart-stacked-column.rotate-labels .column-label {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  display: flex;
+  align-items: center;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 /* ==========================================================================
    Donut Chart
    ========================================================================== */
 
 .chart-donut {
+  --donut-1: var(--chart-color-1);
+  --donut-2: var(--chart-color-2);
+  --donut-3: var(--chart-color-3);
+  --donut-4: var(--chart-color-4);
+  --donut-5: var(--chart-color-5);
+  --donut-6: var(--chart-color-6);
+  --donut-7: var(--chart-color-7);
+  --donut-8: var(--chart-color-8);
+  --donut-9: var(--chart-color-9);
+  --donut-10: var(--chart-color-10);
+  --donut-11: var(--chart-color-11);
+  --donut-12: var(--chart-color-12);
+}
+
+.chart-donut .donut-body {
+  container-type: inline-size;
+  container-name: donut;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  gap: 1rem;
+  flex: 1;
 }
 
 .chart-donut .donut-container {
   position: relative;
   display: flex;
   justify-content: center;
-  margin-bottom: 1rem;
+  /* Size based on container width, clamped */
+  width: clamp(8rem, 80cqi, var(--chart-donut-size));
+  aspect-ratio: 1;
+}
+
+/* In portrait, legend takes full width to wrap below */
+.chart-donut .donut-body > .chart-legend {
+  flex: 0 0 100%;
+  justify-content: center;
 }
 
 .chart-donut .donut-ring {
-  width: var(--chart-donut-size);
-  height: var(--chart-donut-size);
+  width: 100%;
+  height: 100%;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   /* Radial mask punches out the center hole */
-  --_hole-size: calc((var(--chart-donut-size) - var(--chart-donut-thickness) * 2) / 2);
   mask-image: radial-gradient(
     circle at center,
-    transparent var(--_hole-size),
-    black var(--_hole-size)
+    transparent var(--chart-donut-hole, 30%),
+    black var(--chart-donut-hole, 30%)
   );
   -webkit-mask-image: radial-gradient(
     circle at center,
-    transparent var(--_hole-size),
-    black var(--_hole-size)
+    transparent var(--chart-donut-hole, 30%),
+    black var(--chart-donut-hole, 30%)
   );
 }
 
@@ -356,33 +427,78 @@
 }
 
 .chart-donut .chart-legend {
-  flex-direction: column;
-  gap: 0.5rem;
+  /* Default (portrait): horizontal legend below donut */
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem 1rem;
 }
 
 .chart-donut .chart-legend-item {
-  min-width: 10rem;
+  min-width: 8rem;
 }
 
-.chart-donut .chart-legend-item .legend-label {
-  flex: 1;
+/* Wide container: row layout with legend beside donut */
+@container donut (min-width: 24rem) {
+  .donut-container,
+  .chart-legend {
+    flex: 0 0 auto;
+  }
+
+  .chart-legend {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    gap: 0.5rem;
+  }
 }
 
+/* Donut legend uses same variables as gradient for consistent overrides */
+.chart-donut .chart-color-1 { --color: var(--donut-1, var(--chart-color-1)); }
+.chart-donut .chart-color-2 { --color: var(--donut-2, var(--chart-color-2)); }
+.chart-donut .chart-color-3 { --color: var(--donut-3, var(--chart-color-3)); }
+.chart-donut .chart-color-4 { --color: var(--donut-4, var(--chart-color-4)); }
+.chart-donut .chart-color-5 { --color: var(--donut-5, var(--chart-color-5)); }
+.chart-donut .chart-color-6 { --color: var(--donut-6, var(--chart-color-6)); }
+.chart-donut .chart-color-7 { --color: var(--donut-7, var(--chart-color-7)); }
+.chart-donut .chart-color-8 { --color: var(--donut-8, var(--chart-color-8)); }
+.chart-donut .chart-color-9 { --color: var(--donut-9, var(--chart-color-9)); }
+.chart-donut .chart-color-10 { --color: var(--donut-10, var(--chart-color-10)); }
+.chart-donut .chart-color-11 { --color: var(--donut-11, var(--chart-color-11)); }
+.chart-donut .chart-color-12 { --color: var(--donut-12, var(--chart-color-12)); }
+
+
 /* ==========================================================================
    Dot Chart (Categorical - columns with dots at Y positions)
    ========================================================================== */
 
 .chart-dot .chart-body {
-  align-items: stretch;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+}
+
+.chart-dot .chart-y-axis {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.chart-dot .chart-scroll {
+  grid-row: 1 / -1;
+  grid-column: 2;
+  display: grid;
+  grid-template-rows: subgrid;
+  overflow-x: auto;
+  overflow-y: visible;
 }
 
 .chart-dot .dot-chart {
-  height: 12rem;
+  grid-row: 1;
+  position: relative;
+  min-height: var(--chart-height);
+  box-sizing: border-box;
   background: var(--chart-bg);
   border-radius: 3px;
-  flex: 1;
-  box-sizing: border-box;
-  position: relative;
 }
 
 /* Inner field sized to content area - dots position relative to this */
@@ -421,11 +537,11 @@
 }
 
 .chart-dot .dot-labels {
+  grid-row: 2;
   display: flex;
   gap: 6px;
   padding: 0 0.5rem;
   margin-top: 0.5rem;
-  margin-left: calc(2rem + 0.5rem); /* y-axis width + gap */
 }
 
 .chart-dot .dot-label {
@@ -435,6 +551,21 @@
   min-width: 1.5rem;
 }
 
+/* Rotated dot labels (opt-in via rotateLabels config) */
+.chart-dot.rotate-labels .dot-labels {
+  padding-top: 0.5rem;
+  align-items: flex-start;
+}
+
+.chart-dot.rotate-labels .dot-label {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  display: flex;
+  align-items: center;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 /* ==========================================================================
    Scatter Chart (Continuous X and Y axes)
    ========================================================================== */
@@ -451,7 +582,8 @@
 
 .chart-scatter .dot-area {
   position: relative;
-  height: 12rem;
+  flex: 1;
+  min-height: var(--chart-height);
   background: var(--chart-bg);
   border-radius: 3px;
   box-sizing: border-box;
@@ -490,41 +622,13 @@
    ========================================================================== */
 
 /* Row/column index for staggered delays */
-.bar-row:nth-child(1) { --row-index: 0; }
-.bar-row:nth-child(2) { --row-index: 1; }
-.bar-row:nth-child(3) { --row-index: 2; }
-.bar-row:nth-child(4) { --row-index: 3; }
-.bar-row:nth-child(5) { --row-index: 4; }
-.bar-row:nth-child(6) { --row-index: 5; }
-.bar-row:nth-child(7) { --row-index: 6; }
-.bar-row:nth-child(8) { --row-index: 7; }
-
-.column-track:nth-child(1) { --col-index: 0; }
-.column-track:nth-child(2) { --col-index: 1; }
-.column-track:nth-child(3) { --col-index: 2; }
-.column-track:nth-child(4) { --col-index: 3; }
-.column-track:nth-child(5) { --col-index: 4; }
-.column-track:nth-child(6) { --col-index: 5; }
-.column-track:nth-child(7) { --col-index: 6; }
-.column-track:nth-child(8) { --col-index: 7; }
-.column-track:nth-child(9) { --col-index: 8; }
-.column-track:nth-child(10) { --col-index: 9; }
-.column-track:nth-child(11) { --col-index: 10; }
-.column-track:nth-child(12) { --col-index: 11; }
-
-.dot-col:nth-child(1) { --col-index: 0; }
-.dot-col:nth-child(2) { --col-index: 1; }
-.dot-col:nth-child(3) { --col-index: 2; }
-.dot-col:nth-child(4) { --col-index: 3; }
-.dot-col:nth-child(5) { --col-index: 4; }
-.dot-col:nth-child(6) { --col-index: 5; }
-.dot-col:nth-child(7) { --col-index: 6; }
-.dot-col:nth-child(8) { --col-index: 7; }
+/* Row, column, and dot indices set via inline styles in renderers */
 
 /* Bar chart: clip-path on fills wrapper, reveals left-to-right */
 .chart-animate .bar-fills {
+  clip-path: inset(0 100% 0 0);
   animation: bar-reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-  animation-delay: calc(var(--row-index, 0) * 0.08s);
+  animation-delay: calc(var(--row-index, 0) * var(--delay-step, 0.08s));
 }
 
 @keyframes bar-reveal {
@@ -534,8 +638,9 @@
 
 /* Column chart: clip-path on track, reveals bottom-to-top */
 .chart-animate .column-track {
+  clip-path: inset(100% 0 0 0);
   animation: column-reveal 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-  animation-delay: calc(var(--col-index, 0) * 0.05s);
+  animation-delay: calc(var(--col-index, 0) * var(--delay-step, 0.05s));
 }
 
 @keyframes column-reveal {
@@ -547,7 +652,7 @@
 .chart-animate.has-negative-y .column-track {
   --zero-from-top: calc(100% - var(--zero-position, 0%));
   animation: column-expand-from-zero 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-  animation-delay: calc(var(--col-index, 0) * 0.05s);
+  animation-delay: calc(var(--col-index, 0) * var(--delay-step, 0.05s));
   clip-path: polygon(
     0% var(--zero-from-top),
     100% var(--zero-from-top),
@@ -573,7 +678,7 @@
 /* Dot chart: dots rise from bottom with staggered delays */
 .chart-animate.chart-dot .dot {
   animation: dot-rise 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--col-index, 0) * 0.08s);
+  animation-delay: calc(var(--col-index, 0) * var(--delay-step, 0.08s));
   opacity: 0;
 }
 
@@ -593,7 +698,7 @@
 /* Dot chart with negatives: dots move from zero axis */
 .chart-animate.chart-dot.has-negative-y .dot {
   animation: dot-from-zero 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--col-index, 0) * 0.08s);
+  animation-delay: calc(var(--col-index, 0) * var(--delay-step, 0.08s));
   opacity: 0;
 }
 
@@ -617,13 +722,12 @@
 }
 
 .chart-animate .donut-ring {
-  --_hole-size: calc((var(--chart-donut-size) - var(--chart-donut-thickness) * 2) / 2);
   mask-image:
-    radial-gradient(circle at center, transparent var(--_hole-size), black var(--_hole-size)),
+    radial-gradient(circle at center, transparent var(--chart-donut-hole, 30%), black var(--chart-donut-hole, 30%)),
     conic-gradient(from 0deg, black var(--donut-reveal), transparent var(--donut-reveal));
   mask-composite: intersect;
   -webkit-mask-image:
-    radial-gradient(circle at center, transparent var(--_hole-size), black var(--_hole-size)),
+    radial-gradient(circle at center, transparent var(--chart-donut-hole, 30%), black var(--chart-donut-hole, 30%)),
     conic-gradient(from 0deg, black var(--donut-reveal), transparent var(--donut-reveal));
   -webkit-mask-composite: source-in;
   animation: donut-clockwise 0.8s ease-out 0.1s forwards;

package/eleventy.config.js

@@ -101,6 +101,7 @@ export default function(eleventyConfig, options = {}) {
     const animate = chartConfig.animate ?? globalAnimate;
     return renderer({
       ...chartConfig,
+      id: chartId,
       data,
       animate
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-plugin-uncharted",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "An Eleventy plugin that renders CSS-based charts from CSV data using shortcodes",
   "main": "eleventy.config.js",
   "type": "module",

package/src/renderers/donut.js

@@ -12,10 +12,11 @@ import { formatNumber } from '../formatters.js';
  * @param {string|number} [config.center.value] - Value to show in center (use "total" for auto-calculated)
  * @param {string} [config.center.label] - Label below the value
  * @param {boolean} [config.animate] - Enable animations
+ * @param {boolean} [config.showPercentages] - Show percentages instead of values in legend
  * @returns {string} - HTML string
  */
 export function renderDonut(config) {
-  const { title, subtitle, data, legend, center, animate, format } = config;
+  const { title, subtitle, data, legend, center, animate, format, id, showPercentages } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Donut chart: no data provided -->`;
@@ -58,13 +59,15 @@ export function renderDonut(config) {
     const startAngle = currentAngle;
     const endAngle = currentAngle + percentage;
 
-    gradientStops.push(`var(--chart-color-${i + 1}) ${startAngle.toFixed(2)}% ${endAngle.toFixed(2)}%`);
+    // Use segment-specific variable (defaults set in CSS)
+    gradientStops.push(`var(--donut-${i + 1}) ${startAngle.toFixed(2)}% ${endAngle.toFixed(2)}%`);
     currentAngle = endAngle;
   });
 
   const gradient = `conic-gradient(${gradientStops.join(', ')})`;
 
-  let html = `<figure class="chart chart-donut${animateClass}">`;
+  const idClass = id ? ` chart-${id}` : '';
+  let html = `<figure class="chart chart-donut${animateClass}${idClass}">`;
 
   if (title) {
     html += `<figcaption class="chart-title">${escapeHtml(title)}`;
@@ -74,6 +77,9 @@ export function renderDonut(config) {
     html += `</figcaption>`;
   }
 
+  // Donut body wrapper (for container queries)
+  html += `<div class="donut-body">`;
+
   // Donut visual
   html += `<div class="donut-container">`;
   html += `<div class="donut-ring" style="background: ${gradient}"></div>`;
@@ -94,21 +100,28 @@ export function renderDonut(config) {
   html += `</div>`;
   html += `</div>`;
 
-  // Legend with percentages
+  // Legend with values (or percentages if showPercentages is true)
   const legendLabels = legend ?? segments.map(s => s.label);
   html += `<ul class="chart-legend">`;
   segments.forEach((segment, i) => {
     const label = legendLabels[i] ?? segment.label;
-    const percentage = ((segment.value / total) * 100).toFixed(1);
+    let displayValue;
+    if (showPercentages) {
+      displayValue = ((segment.value / total) * 100).toFixed(1) + '%';
+    } else {
+      displayValue = formatNumber(segment.value, format) || segment.value;
+    }
     const colorClass = `chart-color-${i + 1}`;
     const seriesClass = `chart-series-${slugify(segment.label)}`;
     html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">`;
     html += `<span class="legend-label">${escapeHtml(label)}</span>`;
-    html += `<span class="legend-value">${percentage}%</span>`;
+    html += `<span class="legend-value">${escapeHtml(String(displayValue))}</span>`;
     html += `</li>`;
   });
   html += `</ul>`;
 
+  html += `</div>`; // Close donut-body
+
   html += `</figure>`;
 
   return html;

package/src/renderers/dot.js

@@ -15,7 +15,7 @@ import { formatNumber } from '../formatters.js';
  * @returns {string} - HTML string
  */
 export function renderDot(config) {
-  const { title, subtitle, data, max, min, legend, animate, format } = config;
+  const { title, subtitle, data, max, min, legend, animate, format, id, rotateLabels } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Dot chart: no data provided -->`;
@@ -45,7 +45,9 @@ export function renderDot(config) {
   const zeroPct = hasNegativeY ? ((0 - minValue) / range) * 100 : 0;
 
   const negativeClass = hasNegativeY ? ' has-negative-y' : '';
-  let html = `<figure class="chart chart-dot${animateClass}${negativeClass}">`;
+  const idClass = id ? ` chart-${id}` : '';
+  const rotateClass = rotateLabels ? ' rotate-labels' : '';
+  let html = `<figure class="chart chart-dot${animateClass}${negativeClass}${idClass}${rotateClass}">`;
 
   if (title) {
     html += `<figcaption class="chart-title">${escapeHtml(title)}`;
@@ -78,15 +80,23 @@ export function renderDot(config) {
   html += `<span class="axis-label">${formatNumber(minValue, format) || minValue}</span>`;
   html += `</div>`;
 
-  const zeroStyle = hasNegativeY ? ` style="--zero-position: ${zeroPct.toFixed(2)}%"` : '';
-  html += `<div class="dot-chart"${zeroStyle}>`;
+  // Scroll wrapper for chart + labels
+  html += `<div class="chart-scroll">`;
+
+  // Calculate delay step to cap total stagger at 1s
+  const maxStagger = 1; // seconds
+  const defaultDelay = 0.08; // seconds
+  const delayStep = data.length > 1 ? Math.min(defaultDelay, maxStagger / (data.length - 1)) : 0;
+  const styleVars = [`--delay-step: ${delayStep.toFixed(3)}s`];
+  if (hasNegativeY) styleVars.push(`--zero-position: ${zeroPct.toFixed(2)}%`);
+  html += `<div class="dot-chart" style="${styleVars.join('; ')}">`;
   html += `<div class="dot-field">`;
 
   // Each row becomes a column with dots for each series
-  data.forEach(row => {
+  data.forEach((row, colIndex) => {
     const label = row[labelKey] ?? '';
 
-    html += `<div class="dot-col">`;
+    html += `<div class="dot-col" style="--col-index: ${colIndex}">`;
 
     seriesKeys.forEach((key, i) => {
       const val = row[key];
@@ -98,14 +108,13 @@ export function renderDot(config) {
 
       html += `<div class="dot ${colorClass} ${seriesClass}" `;
       html += `style="--value: ${yPct.toFixed(2)}%" `;
-      html += `title="${escapeHtml(label)}: ${formatNumber(value, format) || value} ${escapeHtml(tooltipLabel)}"`;
+      html += `title="${escapeHtml(tooltipLabel)}: ${formatNumber(value, format) || value}"`;
       html += `></div>`;
     });
 
     html += `</div>`;
   });
 
-  html += `</div>`;
   html += `</div>`;
   html += `</div>`;
 
@@ -117,6 +126,8 @@ export function renderDot(config) {
   });
   html += `</div>`;
 
+  html += `</div>`; // close chart-scroll
+  html += `</div>`; // close chart-body
   html += `</figure>`;
 
   return html;

package/src/renderers/scatter.js

@@ -18,7 +18,7 @@ import { formatNumber } from '../formatters.js';
  * @returns {string} - HTML string
  */
 export function renderScatter(config) {
-  const { title, subtitle, data, maxX, maxY, minX, minY, legend, animate, format, titleX, titleY } = config;
+  const { title, subtitle, data, maxX, maxY, minX, minY, legend, animate, format, titleX, titleY, id } = config;
 
   // Handle nested X/Y format for scatter charts
   const fmtX = format?.x || format || {};
@@ -77,7 +77,8 @@ export function renderScatter(config) {
   const seriesIndex = new Map(seriesList.map((s, i) => [s, i]));
 
   const negativeClasses = (hasNegativeX ? ' has-negative-x' : '') + (hasNegativeY ? ' has-negative-y' : '');
-  let html = `<figure class="chart chart-scatter${animateClass}${negativeClasses}">`;
+  const idClass = id ? ` chart-${id}` : '';
+  let html = `<figure class="chart chart-scatter${animateClass}${negativeClasses}${idClass}">`;
 
   if (title) {
     html += `<figcaption class="chart-title">${escapeHtml(title)}`;

package/src/renderers/stacked-bar.js

@@ -13,7 +13,7 @@ import { formatNumber } from '../formatters.js';
  * @returns {string} - HTML string
  */
 export function renderStackedBar(config) {
-  const { title, subtitle, data, max, legend, animate, format } = config;
+  const { title, subtitle, data, max, legend, animate, format, id } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Stacked bar chart: no data provided -->`;
@@ -34,7 +34,8 @@ export function renderStackedBar(config) {
     }, 0);
   }));
 
-  let html = `<figure class="chart chart-stacked-bar${animateClass}">`;
+  const idClass = id ? ` chart-${id}` : '';
+  let html = `<figure class="chart chart-stacked-bar${animateClass}${idClass}">`;
 
   if (title) {
     html += `<figcaption class="chart-title">${escapeHtml(title)}`;
@@ -56,9 +57,13 @@ export function renderStackedBar(config) {
     html += `</ul>`;
   }
 
-  html += `<div class="chart-bars">`;
+  // Calculate delay step to cap total stagger at 1s
+  const maxStagger = 1; // seconds
+  const defaultDelay = 0.08; // seconds
+  const delayStep = data.length > 1 ? Math.min(defaultDelay, maxStagger / (data.length - 1)) : 0;
+  html += `<div class="chart-bars" style="--delay-step: ${delayStep.toFixed(3)}s">`;
 
-  data.forEach(row => {
+  data.forEach((row, rowIndex) => {
     const label = row[labelKey] ?? '';
     const values = seriesKeys.map(key => {
       const val = row[key];
@@ -68,7 +73,7 @@ export function renderStackedBar(config) {
     const percentages = calculatePercentages(values, calculatedMax);
     const seriesLabels = legendLabels ?? seriesKeys;
 
-    html += `<div class="bar-row">`;
+    html += `<div class="bar-row" style="--row-index: ${rowIndex}">`;
     html += `<span class="bar-label">${escapeHtml(label)}</span>`;
     html += `<div class="bar-track">`;
     html += `<div class="bar-fills" title="${escapeHtml(label)}: ${formatNumber(total, format) || total}">`;

package/src/renderers/stacked-column.js

@@ -14,7 +14,7 @@ import { formatNumber } from '../formatters.js';
  * @returns {string} - HTML string
  */
 export function renderStackedColumn(config) {
-  const { title, subtitle, data, max, min, legend, animate, format } = config;
+  const { title, subtitle, data, max, min, legend, animate, format, id, rotateLabels } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Stacked column chart: no data provided -->`;
@@ -55,7 +55,9 @@ export function renderStackedColumn(config) {
   const zeroPct = hasNegativeY ? ((0 - minValue) / range) * 100 : 0;
 
   const negativeClass = hasNegativeY ? ' has-negative-y' : '';
-  let html = `<figure class="chart chart-stacked-column${animateClass}${negativeClass}">`;
+  const idClass = id ? ` chart-${id}` : '';
+  const rotateClass = rotateLabels ? ' rotate-labels' : '';
+  let html = `<figure class="chart chart-stacked-column${animateClass}${negativeClass}${idClass}${rotateClass}">`;
 
   if (title) {
     html += `<figcaption class="chart-title">${escapeHtml(title)}`;
@@ -89,12 +91,20 @@ export function renderStackedColumn(config) {
   html += `<span class="axis-label">${formatNumber(minLabelY, format) || minLabelY}</span>`;
   html += `</div>`;
 
-  const columnsStyle = hasNegativeY ? ` style="--zero-position: ${zeroPct.toFixed(2)}%"` : '';
-  html += `<div class="chart-columns"${columnsStyle}>`;
+  // Scroll wrapper for columns + labels
+  html += `<div class="chart-scroll">`;
 
-  data.forEach(row => {
+  // Calculate delay step to cap total stagger at 1s
+  const maxStagger = 1; // seconds
+  const defaultDelay = 0.05; // seconds
+  const delayStep = data.length > 1 ? Math.min(defaultDelay, maxStagger / (data.length - 1)) : 0;
+  const styleVars = [`--delay-step: ${delayStep.toFixed(3)}s`];
+  if (hasNegativeY) styleVars.push(`--zero-position: ${zeroPct.toFixed(2)}%`);
+  html += `<div class="chart-columns" style="${styleVars.join('; ')}">`;
+
+  data.forEach((row, colIndex) => {
     const label = row[labelKey] ?? '';
-    html += `<div class="column-track" title="${escapeHtml(label)}">`;
+    html += `<div class="column-track" style="--col-index: ${colIndex}" title="${escapeHtml(label)}">`;
 
     if (hasNegativeY) {
       // Build segments first to identify stack ends
@@ -170,7 +180,6 @@ export function renderStackedColumn(config) {
     html += `</div>`;
   });
 
-  html += `</div>`;
   html += `</div>`;
 
   // X-axis labels
@@ -180,6 +189,9 @@ export function renderStackedColumn(config) {
     html += `<span class="column-label">${escapeHtml(label)}</span>`;
   });
   html += `</div>`;
+
+  html += `</div>`; // close chart-scroll
+  html += `</div>`; // close chart-body
   html += `</figure>`;
 
   return html;