eleventy-plugin-uncharted 0.1.1 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Uncharted
 
-A CSS-based charting plugin for Eleventy. Renders charts as pure HTML/CSS with no JavaScript dependencies.
+A CSS-based chart plugin for Eleventy. Renders charts as pure HTML/CSS with no JavaScript dependencies.
 
 ## Installation
 
@@ -48,6 +48,61 @@ If you set `injectCss: false`, you'll need to manually include the stylesheet in
 | `dot` | Categorical dot chart with Y-axis positioning | Yes |
 | `scatter` | XY scatter plot with continuous axes | Yes (X and Y) |
 
+## Value Formatting
+
+Format displayed numbers with thousands separators, compact notation, or currency symbols.
+Raw values are preserved for calculations; only display output is affected.
+
+### Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `thousands` | boolean | Add commas: `1000` → `1,000` |
+| `compact` | boolean | Use suffixes: `1000` → `1K`, `1000000` → `1M` |
+| `decimals` | number | Decimal places (default: 0, or 1 if compact) |
+| `currency.symbol` | string | Currency symbol: `$`, `€`, etc. |
+| `currency.position` | string | `prefix` (default) or `suffix` |
+
+### Examples
+
+**Thousands separators:**
+
+```yaml
+format:
+  thousands: true
+# 1234567 → 1,234,567
+```
+
+**Compact notation:**
+
+```yaml
+format:
+  compact: true
+# 1500 → 1.5K, 2000000 → 2M
+```
+
+**Currency:**
+
+```yaml
+format:
+  thousands: true
+  currency:
+    symbol: "$"
+# 1234 → $1,234
+```
+
+**Scatter charts** support separate X/Y formatting:
+
+```yaml
+format:
+  x:
+    thousands: true
+  y:
+    compact: true
+    currency:
+      symbol: "$"
+```
+
 ## Usage
 
 ### Page Frontmatter
@@ -110,22 +165,33 @@ charts:
 
 ## CSV Format
 
-CSV files use the first column as labels and subsequent columns as data series:
+CSV files use the first column as labels and subsequent columns as data series. The column names can be anything descriptive:
 
 ```csv
-label,existing,new
+department,existing,new
 Finance,11,11
 Sales,16,2
 Core,8,0
 ```
 
-For scatter plots, use `label`, `x`, `y`, and optionally `series`:
+For scatter plots, columns are positional: point label, X value, Y value, and optionally series. Column names become axis labels by default:
 
 ```csv
-label,x,y,series
-Point A,10,45,alpha
-Point B,25,78,alpha
-Point C,15,32,beta
+country,population,gdp,region
+USA,330,21,Americas
+China,1400,14,Asia
+Germany,83,4,Europe
+```
+
+This displays "population" as the X-axis title and "gdp" as the Y-axis title. Override with explicit titles:
+
+```yaml
+charts:
+  my-scatter:
+    type: scatter
+    file: charts/data.csv
+    titleX: "Population (millions)"
+    titleY: "GDP (trillions)"
 ```
 
 ## Negative Values
@@ -135,7 +201,7 @@ Stacked column, dot, and scatter charts support negative values. When negative v
 For stacked columns, positive values stack upward from zero and negative values stack downward:
 
 ```csv
-label,Cost,Profit
+quarter,Cost,Profit
 Q1,20,10
 Q2,25,-10
 Q3,15,25
@@ -159,9 +225,12 @@ The chart automatically calculates the range from the maximum positive stack to
 | `maxY` | number | Maximum Y value (scatter only) |
 | `minX` | number | Minimum X value (scatter only) |
 | `minY` | number | Minimum Y value (scatter only) |
+| `titleX` | string | X-axis title (scatter only, defaults to column name) |
+| `titleY` | string | Y-axis title (scatter only, defaults to column name) |
 | `legend` | array | Custom legend labels |
 | `center` | object | Donut center content (`value`, `label`) |
 | `animate` | boolean | Override global animation setting |
+| `format` | object | Number formatting options (see Value Formatting) |
 
 ## Styling
 

package/css/uncharted.css

@@ -14,7 +14,11 @@
   --chart-color-5: #009688;  /* Teal */
   --chart-color-6: #9c27b0;  /* Purple */
   --chart-color-7: #e91e63;  /* Pink */
-  --chart-color-8: #78909c;  /* Gray */
+  --chart-color-8: #3f51b5;  /* Indigo */
+  --chart-color-9: #f44336;  /* Red */
+  --chart-color-10: #00bcd4; /* Cyan */
+  --chart-color-11: #cddc39; /* Lime */
+  --chart-color-12: #78909c; /* Gray */
 
   /* Backgrounds - neutral with opacity for light/dark adaptability */
   --chart-bg: rgba(128, 128, 128, 0.15);
@@ -40,6 +44,10 @@
 .chart-color-6 { --color: var(--chart-color-6); background-color: var(--chart-color-6); }
 .chart-color-7 { --color: var(--chart-color-7); background-color: var(--chart-color-7); }
 .chart-color-8 { --color: var(--chart-color-8); background-color: var(--chart-color-8); }
+.chart-color-9 { --color: var(--chart-color-9); background-color: var(--chart-color-9); }
+.chart-color-10 { --color: var(--chart-color-10); background-color: var(--chart-color-10); }
+.chart-color-11 { --color: var(--chart-color-11); background-color: var(--chart-color-11); }
+.chart-color-12 { --color: var(--chart-color-12); background-color: var(--chart-color-12); }
 
 /* ==========================================================================
    Base Chart Styles
@@ -71,7 +79,8 @@
 .chart-legend {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  column-gap: 1rem;
+  row-gap: 0.375rem;
   list-style: none;
   padding: 0;
   margin: 0 0 1rem 0;
@@ -115,6 +124,7 @@
 }
 
 .chart-y-axis {
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -137,12 +147,24 @@
   transform: translateY(-50%);
 }
 
-.chart-y-axis .axis-label:last-child {
+.chart-y-axis .axis-label:nth-child(3) {
   transform: translateY(50%);
 }
 
+.chart-y-axis .axis-title {
+  position: absolute;
+  left: -0.5rem;
+  top: 50%;
+  transform: rotate(-90deg) translateX(-50%);
+  transform-origin: left center;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  white-space: nowrap;
+}
+
 .chart-x-axis {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   padding: 0.25rem 0;
   margin-top: 0.25rem;
@@ -159,25 +181,32 @@
   transform: translateX(-50%);
 }
 
-.chart-x-axis .axis-label:last-child {
+.chart-x-axis .axis-label:nth-child(3) {
   transform: translateX(50%);
 }
 
+.chart-x-axis .axis-title {
+  flex-basis: 100%;
+  text-align: center;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  white-space: nowrap;
+  margin-top: 0.5rem;
+}
+
 /* ==========================================================================
    Stacked Bar Chart (Horizontal)
    ========================================================================== */
 
 .chart-stacked-bar .chart-bars {
-  display: flex;
-  flex-direction: column;
-  gap: var(--chart-gap);
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--chart-gap) 0.75rem;
+  align-items: center;
 }
 
 .chart-stacked-bar .bar-row {
-  display: grid;
-  grid-template-columns: minmax(6rem, auto) 1fr auto;
-  align-items: center;
-  gap: 0.75rem;
+  display: contents;  /* Children participate in parent grid */
 }
 
 .chart-stacked-bar .bar-label {
@@ -201,6 +230,7 @@
   height: 100%;
   width: var(--value);
   transition: width 0.3s ease;
+  background-color: var(--color);
 }
 
 .chart-stacked-bar .bar-value {
@@ -243,6 +273,7 @@
   width: 100%;
   height: var(--value);
   transition: height 0.3s ease;
+  background-color: var(--color);
 }
 
 .chart-stacked-column .column-labels {
@@ -381,6 +412,7 @@
   bottom: var(--value);
   transform: translate(-50%, 50%);
   cursor: default;
+  background-color: var(--color);
 }
 
 .chart-dot .dot[title]:hover {
@@ -443,6 +475,7 @@
   bottom: var(--value);
   transform: translate(-50%, 50%);
   cursor: default;
+  background-color: var(--color);
 }
 
 .chart-scatter .dot[title]:hover {

package/package.json

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

package/src/csv.js

@@ -1,6 +1,51 @@
 import fs from 'fs';
 import path from 'path';
 
+/**
+ * Parse a CSV line handling quoted fields
+ * @param {string} line - CSV line
+ * @returns {string[]} - Array of field values
+ */
+function parseCSVLine(line) {
+  const fields = [];
+  let current = '';
+  let inQuotes = false;
+
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    const nextChar = line[i + 1];
+
+    if (inQuotes) {
+      if (char === '"' && nextChar === '"') {
+        // Escaped quote
+        current += '"';
+        i++;
+      } else if (char === '"') {
+        // End of quoted field
+        inQuotes = false;
+      } else {
+        current += char;
+      }
+    } else {
+      if (char === '"') {
+        // Start of quoted field
+        inQuotes = true;
+      } else if (char === ',') {
+        // Field separator
+        fields.push(current.trim());
+        current = '';
+      } else {
+        current += char;
+      }
+    }
+  }
+
+  // Push last field
+  fields.push(current.trim());
+
+  return fields;
+}
+
 /**
  * Parse CSV content into array of objects
  * @param {string} content - Raw CSV content
@@ -14,11 +59,11 @@ export function parseCSV(content) {
 
   if (lines.length < 2) return [];
 
-  const headers = lines[0].split(',').map(h => h.trim());
+  const headers = parseCSVLine(lines[0]);
   const rows = [];
 
   for (let i = 1; i < lines.length; i++) {
-    const values = lines[i].split(',').map(v => v.trim());
+    const values = parseCSVLine(lines[i]);
     const row = {};
 
     headers.forEach((header, index) => {

package/src/formatters.js

@@ -0,0 +1,40 @@
+/**
+ * Format a number according to configuration
+ * @param {number} value - Raw numeric value
+ * @param {Object} config - { thousands, compact, decimals, currency: { symbol, position } }
+ * @returns {string} - Formatted string
+ */
+export function formatNumber(value, config = {}) {
+  if (value == null || isNaN(value)) return '';
+
+  const { thousands, compact, decimals, currency } = config;
+  let num = value;
+  let suffix = '';
+
+  // Compact notation (K/M/B/T)
+  if (compact) {
+    const abs = Math.abs(num);
+    if (abs >= 1e12) { num /= 1e12; suffix = 'T'; }
+    else if (abs >= 1e9) { num /= 1e9; suffix = 'B'; }
+    else if (abs >= 1e6) { num /= 1e6; suffix = 'M'; }
+    else if (abs >= 1e3) { num /= 1e3; suffix = 'K'; }
+  }
+
+  // Decimal places (default: 0, or 1 if compact with suffix)
+  const places = decimals ?? (suffix ? 1 : 0);
+
+  // Format with or without thousands separators
+  let formatted = thousands && !suffix
+    ? num.toLocaleString('en-US', { minimumFractionDigits: places, maximumFractionDigits: places })
+    : num.toFixed(places);
+
+  formatted += suffix;
+
+  // Currency symbol
+  if (currency?.symbol) {
+    const pos = currency.position ?? 'prefix';
+    formatted = pos === 'prefix' ? currency.symbol + formatted : formatted + currency.symbol;
+  }
+
+  return formatted;
+}

package/src/index.js

@@ -1,3 +1,4 @@
 export { renderers } from './renderers/index.js';
 export { loadCSV, parseCSV } from './csv.js';
-export { slugify, calculatePercentages, getSeriesNames, escapeHtml } from './utils.js';
+export { slugify, calculatePercentages, getLabelKey, getValueKey, getSeriesNames, escapeHtml } from './utils.js';
+export { formatNumber } from './formatters.js';

package/src/renderers/donut.js

@@ -1,4 +1,5 @@
-import { slugify, escapeHtml } from '../utils.js';
+import { slugify, escapeHtml, getLabelKey, getValueKey, getSeriesNames } from '../utils.js';
+import { formatNumber } from '../formatters.js';
 
 /**
  * Render a donut/pie chart using conic-gradient
@@ -14,7 +15,7 @@ import { slugify, escapeHtml } from '../utils.js';
  * @returns {string} - HTML string
  */
 export function renderDonut(config) {
-  const { title, subtitle, data, legend, center, animate } = config;
+  const { title, subtitle, data, legend, center, animate, format } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Donut chart: no data provided -->`;
@@ -22,18 +23,22 @@ export function renderDonut(config) {
 
   const animateClass = animate ? ' chart-animate' : '';
 
-  // Extract values - support both {label, value} format and series format
+  // Get column keys positionally
+  const labelKey = getLabelKey(data);
+  const valueKey = getValueKey(data);
+  const seriesKeys = getSeriesNames(data);
+
+  // Extract values - support both label/value format and series format
   let segments = [];
-  if (data[0].value !== undefined) {
-    // Direct {label, value} format
+  if (seriesKeys.length === 1) {
+    // Two columns: first is label, second is value (multiple rows)
     segments = data.map(item => ({
-      label: item.label,
-      value: typeof item.value === 'number' ? item.value : parseFloat(item.value) || 0
+      label: item[labelKey],
+      value: typeof item[valueKey] === 'number' ? item[valueKey] : parseFloat(item[valueKey]) || 0
     }));
   } else {
-    // Series format - first row only for donut
-    const seriesNames = Object.keys(data[0]).filter(k => k !== 'label');
-    segments = seriesNames.map(name => ({
+    // Series format - first row only, columns after the first are series
+    segments = seriesKeys.map(name => ({
       label: name,
       value: typeof data[0][name] === 'number' ? data[0][name] : parseFloat(data[0][name]) || 0
     }));
@@ -78,7 +83,8 @@ export function renderDonut(config) {
   if (center) {
     const centerValue = center.value === 'total' ? total : center.value;
     if (centerValue !== undefined) {
-      html += `<span class="donut-value">${escapeHtml(String(centerValue))}</span>`;
+      const displayValue = typeof centerValue === 'number' ? (formatNumber(centerValue, format) || centerValue) : centerValue;
+      html += `<span class="donut-value">${escapeHtml(String(displayValue))}</span>`;
     }
     if (center.label) {
       html += `<span class="donut-label">${escapeHtml(center.label)}</span>`;

package/src/renderers/dot.js

@@ -1,4 +1,5 @@
-import { slugify, escapeHtml, getSeriesNames } from '../utils.js';
+import { slugify, escapeHtml, getLabelKey, getSeriesNames } from '../utils.js';
+import { formatNumber } from '../formatters.js';
 
 /**
  * Render a categorical dot chart (columns with dots at different Y positions)
@@ -14,13 +15,14 @@ import { slugify, escapeHtml, getSeriesNames } from '../utils.js';
  * @returns {string} - HTML string
  */
 export function renderDot(config) {
-  const { title, subtitle, data, max, min, legend, animate } = config;
+  const { title, subtitle, data, max, min, legend, animate, format } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Dot chart: no data provided -->`;
   }
 
-  // Get series keys from data columns (excluding 'label')
+  // Get label key (first column) and series keys (remaining columns)
+  const labelKey = getLabelKey(data);
   const seriesKeys = getSeriesNames(data);
   const legendLabels = legend ?? seriesKeys;
   const animateClass = animate ? ' chart-animate' : '';
@@ -70,10 +72,10 @@ export function renderDot(config) {
   // Y-axis
   const yAxisStyle = hasNegativeY ? ` style="--zero-position: ${zeroPct.toFixed(2)}%"` : '';
   html += `<div class="chart-y-axis"${yAxisStyle}>`;
-  html += `<span class="axis-label">${maxValue}</span>`;
+  html += `<span class="axis-label">${formatNumber(maxValue, format) || maxValue}</span>`;
   const midLabelY = hasNegativeY ? 0 : Math.round((maxValue + minValue) / 2);
-  html += `<span class="axis-label">${midLabelY}</span>`;
-  html += `<span class="axis-label">${minValue}</span>`;
+  html += `<span class="axis-label">${formatNumber(midLabelY, format) || midLabelY}</span>`;
+  html += `<span class="axis-label">${formatNumber(minValue, format) || minValue}</span>`;
   html += `</div>`;
 
   const zeroStyle = hasNegativeY ? ` style="--zero-position: ${zeroPct.toFixed(2)}%"` : '';
@@ -82,7 +84,7 @@ export function renderDot(config) {
 
   // Each row becomes a column with dots for each series
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
 
     html += `<div class="dot-col">`;
 
@@ -96,7 +98,7 @@ export function renderDot(config) {
 
       html += `<div class="dot ${colorClass} ${seriesClass}" `;
       html += `style="--value: ${yPct.toFixed(2)}%" `;
-      html += `title="${escapeHtml(label)}: ${value} ${escapeHtml(tooltipLabel)}"`;
+      html += `title="${escapeHtml(label)}: ${formatNumber(value, format) || value} ${escapeHtml(tooltipLabel)}"`;
       html += `></div>`;
     });
 
@@ -110,7 +112,7 @@ export function renderDot(config) {
   // X-axis labels
   html += `<div class="dot-labels">`;
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
     html += `<span class="dot-label">${escapeHtml(label)}</span>`;
   });
   html += `</div>`;

package/src/renderers/scatter.js

@@ -1,21 +1,28 @@
 import { slugify, escapeHtml } from '../utils.js';
+import { formatNumber } from '../formatters.js';
 
 /**
  * Render a scatter plot (continuous X and Y axes)
  * @param {Object} config - Chart configuration
  * @param {string} config.title - Chart title
  * @param {string} [config.subtitle] - Chart subtitle
- * @param {Object[]} config.data - Chart data (with label, x, y, and optionally series)
+ * @param {Object[]} config.data - Chart data (positional: label, x, y, series)
  * @param {number} [config.maxX] - Maximum X value (defaults to max in data)
  * @param {number} [config.maxY] - Maximum Y value (defaults to max in data)
  * @param {number} [config.minX] - Minimum X value (defaults to min in data or 0)
  * @param {number} [config.minY] - Minimum Y value (defaults to min in data or 0)
  * @param {string[]} [config.legend] - Legend labels for series
  * @param {boolean} [config.animate] - Enable animations
+ * @param {string} [config.titleX] - X-axis title (defaults to column name)
+ * @param {string} [config.titleY] - Y-axis title (defaults to column name)
  * @returns {string} - HTML string
  */
 export function renderScatter(config) {
-  const { title, subtitle, data, maxX, maxY, minX, minY, legend, animate } = config;
+  const { title, subtitle, data, maxX, maxY, minX, minY, legend, animate, format, titleX, titleY } = config;
+
+  // Handle nested X/Y format for scatter charts
+  const fmtX = format?.x || format || {};
+  const fmtY = format?.y || format || {};
 
   if (!data || data.length === 0) {
     return `<!-- Scatter chart: no data provided -->`;
@@ -23,25 +30,24 @@ export function renderScatter(config) {
 
   const animateClass = animate ? ' chart-animate' : '';
 
-  // Normalize data format
-  let dots = [];
-  if (data[0].x !== undefined && data[0].y !== undefined) {
-    // Direct {label, x, y, series?} format
-    dots = data.map(item => ({
-      label: item.label ?? '',
-      x: typeof item.x === 'number' ? item.x : parseFloat(item.x) || 0,
-      y: typeof item.y === 'number' ? item.y : parseFloat(item.y) || 0,
-      series: item.series ?? 'default'
-    }));
-  } else if (data[0].value !== undefined) {
-    // Simple {label, value} format - use index as x, value as y
-    dots = data.map((item, i) => ({
-      label: item.label ?? '',
-      x: i,
-      y: typeof item.value === 'number' ? item.value : parseFloat(item.value) || 0,
-      series: 'default'
-    }));
-  }
+  // Get column keys positionally
+  const keys = Object.keys(data[0]);
+  const labelKey = keys[0];           // First column: point labels
+  const xKey = keys[1];               // Second column: X values
+  const yKey = keys[2];               // Third column: Y values
+  const seriesKey = keys[3];          // Fourth column (optional): series
+
+  // Axis titles: explicit config overrides column names
+  const xAxisTitle = titleX ?? xKey;
+  const yAxisTitle = titleY ?? yKey;
+
+  // Map data to dots using positional columns
+  const dots = data.map(item => ({
+    label: item[labelKey] ?? '',
+    x: typeof item[xKey] === 'number' ? item[xKey] : parseFloat(item[xKey]) || 0,
+    y: typeof item[yKey] === 'number' ? item[yKey] : parseFloat(item[yKey]) || 0,
+    series: seriesKey ? (item[seriesKey] ?? 'default') : 'default'
+  }));
 
   // Calculate bounds
   const xValues = dots.map(d => d.x);
@@ -99,10 +105,11 @@ export function renderScatter(config) {
   // Y-axis
   const yAxisStyle = hasNegativeY ? ` style="--zero-position-y: ${zeroPctY.toFixed(2)}%"` : '';
   html += `<div class="chart-y-axis"${yAxisStyle}>`;
-  html += `<span class="axis-label">${calcMaxY}</span>`;
+  html += `<span class="axis-label">${formatNumber(calcMaxY, fmtY) || calcMaxY}</span>`;
   const midLabelY = hasNegativeY ? 0 : Math.round((calcMaxY + calcMinY) / 2);
-  html += `<span class="axis-label">${midLabelY}</span>`;
-  html += `<span class="axis-label">${calcMinY}</span>`;
+  html += `<span class="axis-label">${formatNumber(midLabelY, fmtY) || midLabelY}</span>`;
+  html += `<span class="axis-label">${formatNumber(calcMinY, fmtY) || calcMinY}</span>`;
+  html += `<span class="axis-title">${escapeHtml(yAxisTitle)}</span>`;
   html += `</div>`;
 
   // Container gets zero position variables for axis line CSS
@@ -120,7 +127,9 @@ export function renderScatter(config) {
     const colorIndex = seriesIndex.get(dot.series) + 1;
     const colorClass = `chart-color-${colorIndex}`;
     const seriesClass = `chart-series-${slugify(dot.series)}`;
-    const tooltipText = dot.label ? `${dot.label}: (${dot.x}, ${dot.y})` : `(${dot.x}, ${dot.y})`;
+    const fmtXVal = formatNumber(dot.x, fmtX) || dot.x;
+    const fmtYVal = formatNumber(dot.y, fmtY) || dot.y;
+    const tooltipText = dot.label ? `${dot.label}: (${fmtXVal}, ${fmtYVal})` : `(${fmtXVal}, ${fmtYVal})`;
 
     html += `<div class="dot ${colorClass} ${seriesClass}" `;
     html += `style="--dot-index: ${i}; --x: ${xPct.toFixed(2)}%; --value: ${yPct.toFixed(2)}%" `;
@@ -134,10 +143,11 @@ export function renderScatter(config) {
   // X-axis
   const xAxisStyle = hasNegativeX ? ` style="--zero-position-x: ${zeroPctX.toFixed(2)}%"` : '';
   html += `<div class="chart-x-axis"${xAxisStyle}>`;
-  html += `<span class="axis-label">${calcMinX}</span>`;
+  html += `<span class="axis-label">${formatNumber(calcMinX, fmtX) || calcMinX}</span>`;
   const midLabelX = hasNegativeX ? 0 : Math.round((calcMaxX + calcMinX) / 2);
-  html += `<span class="axis-label">${midLabelX}</span>`;
-  html += `<span class="axis-label">${calcMaxX}</span>`;
+  html += `<span class="axis-label">${formatNumber(midLabelX, fmtX) || midLabelX}</span>`;
+  html += `<span class="axis-label">${formatNumber(calcMaxX, fmtX) || calcMaxX}</span>`;
+  html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
   html += `</div>`;
 
   html += `</div>`;

package/src/renderers/stacked-bar.js

@@ -1,4 +1,5 @@
-import { slugify, calculatePercentages, getSeriesNames, escapeHtml } from '../utils.js';
+import { slugify, calculatePercentages, getLabelKey, getSeriesNames, escapeHtml } from '../utils.js';
+import { formatNumber } from '../formatters.js';
 
 /**
  * Render a stacked bar chart (horizontal)
@@ -12,18 +13,27 @@ import { slugify, calculatePercentages, getSeriesNames, escapeHtml } from '../ut
  * @returns {string} - HTML string
  */
 export function renderStackedBar(config) {
-  const { title, subtitle, data, max, legend, animate } = config;
+  const { title, subtitle, data, max, legend, animate, format } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Stacked bar chart: no data provided -->`;
   }
 
-  // Get actual data keys from the first row (excluding 'label')
+  // Get label key (first column) and series keys (remaining columns)
+  const labelKey = getLabelKey(data);
   const seriesKeys = getSeriesNames(data);
   // Use legend for display labels, fall back to data keys
   const legendLabels = legend ?? seriesKeys;
   const animateClass = animate ? ' chart-animate' : '';
 
+  // Calculate max total across all rows if not provided
+  const calculatedMax = max ?? Math.max(...data.map(row => {
+    return seriesKeys.reduce((sum, key) => {
+      const val = row[key];
+      return sum + (typeof val === 'number' ? val : parseFloat(val) || 0);
+    }, 0);
+  }));
+
   let html = `<figure class="chart chart-stacked-bar${animateClass}">`;
 
   if (title) {
@@ -49,19 +59,19 @@ export function renderStackedBar(config) {
   html += `<div class="chart-bars">`;
 
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
     const values = seriesKeys.map(key => {
       const val = row[key];
       return typeof val === 'number' ? val : parseFloat(val) || 0;
     });
     const total = values.reduce((sum, v) => sum + v, 0);
-    const percentages = calculatePercentages(values, max);
+    const percentages = calculatePercentages(values, calculatedMax);
     const seriesLabels = legendLabels ?? seriesKeys;
 
     html += `<div class="bar-row">`;
     html += `<span class="bar-label">${escapeHtml(label)}</span>`;
     html += `<div class="bar-track">`;
-    html += `<div class="bar-fills" title="${escapeHtml(label)}: ${total}">`;
+    html += `<div class="bar-fills" title="${escapeHtml(label)}: ${formatNumber(total, format) || total}">`;
 
     seriesKeys.forEach((key, i) => {
       const pct = percentages[i];
@@ -70,7 +80,7 @@ export function renderStackedBar(config) {
         const colorClass = `chart-color-${i + 1}`;
         const seriesClass = `chart-series-${slugify(key)}`;
         const seriesLabel = seriesLabels[i] ?? key;
-        html += `<div class="bar-fill ${colorClass} ${seriesClass}" style="--value: ${pct.toFixed(2)}%" title="${escapeHtml(seriesLabel)}: ${value}"></div>`;
+        html += `<div class="bar-fill ${colorClass} ${seriesClass}" style="--value: ${pct.toFixed(2)}%" title="${escapeHtml(seriesLabel)}: ${formatNumber(value, format) || value}"></div>`;
       }
     });
 
@@ -78,7 +88,7 @@ export function renderStackedBar(config) {
     html += `</div>`;
 
     // Show total value
-    html += `<span class="bar-value">${total}</span>`;
+    html += `<span class="bar-value">${formatNumber(total, format) || total}</span>`;
     html += `</div>`;
   });
 

package/src/renderers/stacked-column.js

@@ -1,4 +1,5 @@
-import { slugify, getSeriesNames, escapeHtml } from '../utils.js';
+import { slugify, getLabelKey, getSeriesNames, escapeHtml } from '../utils.js';
+import { formatNumber } from '../formatters.js';
 
 /**
  * Render a stacked column chart (vertical)
@@ -13,13 +14,14 @@ import { slugify, getSeriesNames, escapeHtml } from '../utils.js';
  * @returns {string} - HTML string
  */
 export function renderStackedColumn(config) {
-  const { title, subtitle, data, max, min, legend, animate } = config;
+  const { title, subtitle, data, max, min, legend, animate, format } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Stacked column chart: no data provided -->`;
   }
 
-  // Get actual data keys from the first row (excluding 'label')
+  // Get label key (first column) and series keys (remaining columns)
+  const labelKey = getLabelKey(data);
   const seriesKeys = getSeriesNames(data);
   // Use legend for display labels, fall back to data keys
   const legendLabels = legend ?? seriesKeys;
@@ -80,17 +82,18 @@ export function renderStackedColumn(config) {
   // Y-axis with --zero-position for label positioning
   const yAxisStyle = hasNegativeY ? ` style="--zero-position: ${zeroPct.toFixed(2)}%"` : '';
   html += `<div class="chart-y-axis"${yAxisStyle}>`;
-  html += `<span class="axis-label">${maxValue}</span>`;
+  html += `<span class="axis-label">${formatNumber(maxValue, format) || maxValue}</span>`;
   const midLabelY = hasNegativeY ? 0 : Math.round(maxValue / 2);
-  html += `<span class="axis-label">${midLabelY}</span>`;
-  html += `<span class="axis-label">${hasNegativeY ? minValue : 0}</span>`;
+  html += `<span class="axis-label">${formatNumber(midLabelY, format) || midLabelY}</span>`;
+  const minLabelY = hasNegativeY ? minValue : 0;
+  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}>`;
 
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
     html += `<div class="column-track" title="${escapeHtml(label)}">`;
 
     if (hasNegativeY) {
@@ -114,7 +117,7 @@ export function renderStackedColumn(config) {
             classes: `column-segment ${colorClass} ${seriesClass}`,
             bottom: positiveBottom,
             height: segmentHeight,
-            title: `${escapeHtml(seriesLabel)}: ${value}`,
+            title: `${escapeHtml(seriesLabel)}: ${formatNumber(value, format) || value}`,
             isNegative: false
           });
           lastPositiveIdx = segments.length - 1;
@@ -125,7 +128,7 @@ export function renderStackedColumn(config) {
             classes: `column-segment ${colorClass} ${seriesClass} is-negative`,
             bottom: negativeTop,
             height: segmentHeight,
-            title: `${escapeHtml(seriesLabel)}: ${value}`,
+            title: `${escapeHtml(seriesLabel)}: ${formatNumber(value, format) || value}`,
             isNegative: true
           });
           lastNegativeIdx = segments.length - 1;
@@ -160,7 +163,7 @@ export function renderStackedColumn(config) {
         const endClass = idx === lastIdx ? ' is-stack-end' : '';
         html += `<div class="column-segment ${colorClass} ${seriesClass}${endClass}" `;
         html += `style="--value: ${seg.pct.toFixed(2)}%" `;
-        html += `title="${escapeHtml(seriesLabel)}: ${seg.value}"></div>`;
+        html += `title="${escapeHtml(seriesLabel)}: ${formatNumber(seg.value, format) || seg.value}"></div>`;
       });
     }
 
@@ -173,7 +176,7 @@ export function renderStackedColumn(config) {
   // X-axis labels
   html += `<div class="column-labels">`;
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
     html += `<span class="column-label">${escapeHtml(label)}</span>`;
   });
   html += `</div>`;

package/src/utils.js

@@ -25,13 +25,33 @@ export function calculatePercentages(values, max) {
 }
 
 /**
- * Extract series names from CSV data (all columns except 'label')
+ * Get the label key (first column name) from CSV data
+ * @param {Object[]} data - Array of data objects
+ * @returns {string|undefined} - The first column name, or undefined if no data
+ */
+export function getLabelKey(data) {
+  if (!data || data.length === 0) return undefined;
+  return Object.keys(data[0])[0];
+}
+
+/**
+ * Get the value key (second column name) from CSV data
+ * @param {Object[]} data - Array of data objects
+ * @returns {string|undefined} - The second column name, or undefined if no data
+ */
+export function getValueKey(data) {
+  if (!data || data.length === 0) return undefined;
+  return Object.keys(data[0])[1];
+}
+
+/**
+ * Extract series names from CSV data (all columns except the first)
  * @param {Object[]} data - Array of data objects
  * @returns {string[]} - Array of series names
  */
 export function getSeriesNames(data) {
   if (!data || data.length === 0) return [];
-  return Object.keys(data[0]).filter(key => key !== 'label');
+  return Object.keys(data[0]).slice(1);
 }
 
 /**