eleventy-plugin-uncharted 1.0.0-beta.1 → 1.0.0-beta.2

package/eleventy.config.js

@@ -4,6 +4,7 @@ import { renderers } from './src/renderers/index.js';
 import { loadCSV } from './src/csv.js';
 import { normalizeConfig } from './src/config.js';
 import { resolveColumns } from './src/columns.js';
+import { validateChartType, checkDeprecatedOptions } from './src/deprecation.js';
 import {
   normalizeImageOptions,
   queueChartForImage,
@@ -145,11 +146,21 @@ export default function(eleventyConfig, options = {}) {
       return `<!-- Chart "${chartId}" has no type specified -->`;
     }
 
+    // Check for deprecated chart type (ERROR - prevents rendering)
+    const typeError = validateChartType(chartType, chartId);
+    if (typeError) {
+      console.error(`[uncharted] ${typeError}`);
+      return `<!-- ${typeError} -->`;
+    }
+
     const renderer = renderers[chartType];
     if (!renderer) {
       return `<!-- Unknown chart type "${chartType}" for chart "${chartId}" -->`;
     }
 
+    // Check for deprecated config options (WARNING - chart renders but option ignored)
+    checkDeprecatedOptions(chartConfig, chartId);
+
     // Load data from CSV file or use inline data
     let data = chartConfig.data;
     if (chartConfig.file && !data) {

package/package.json

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

package/src/columns.js

@@ -1,7 +1,6 @@
 /**
  * Column resolution for Uncharted
  * Handles explicit column mapping and implicit detection
- * Supports both new unified schema (x.column, y.columns) and deprecated columns key
  */
 
 import { parseAxisConfig } from './config.js';
@@ -9,13 +8,10 @@ import { parseAxisConfig } from './config.js';
 /**
  * Resolve column mappings for chart data
  *
- * New unified schema (takes precedence):
+ * New unified schema:
  * - x: { column: "month" } or x: "month"
  * - y: { columns: ["a", "b"] } or y: { columns: { a: "Label A" } }
  *
- * Deprecated schema (fallback):
- * - columns: { x: "month", y: ["a", "b"] }
- *
  * @param {Object} config - Chart configuration with optional columns mapping
  * @param {Object[]} data - Chart data array
  * @param {string} chartType - Chart type for context-aware defaults
@@ -42,7 +38,6 @@ export function resolveColumns(config, data, chartType) {
   }
 
   const keys = Object.keys(data[0]);
-  const deprecatedColumns = config.columns || {};
 
   // Helper to find column by name (case-insensitive)
   const findKey = name => keys.find(k => k.toLowerCase() === name.toLowerCase()) || null;
@@ -100,40 +95,28 @@ export function resolveColumns(config, data, chartType) {
   // Chart-type specific resolution
   if (chartType === 'bubble') {
     // Bubble charts use x (categorical), y, series, size columns
-    // Like scatter but with categorical X axis
-    // New schema: x.column, y.column, series.column, size.column
-    // Deprecated: columns.x, columns.y, columns.series, columns.size
+    // Schema: x.column, y.column, series.column, size.column
 
     // X column (categorical)
     if (xConfig?.columns?.length) {
       resolved.x = validateColumn('x.column', xConfig.columns[0]);
-    } else if (deprecatedColumns.x) {
-      resolved.x = validateColumn('columns.x', deprecatedColumns.x);
     }
 
     // Y column
     if (yConfig?.columns?.length) {
       resolved.y = validateColumn('y.column', yConfig.columns[0]);
-    } else if (deprecatedColumns.y) {
-      resolved.y = validateColumn('columns.y', deprecatedColumns.y);
     }
 
     // Series column (for coloring)
     if (seriesConfig?.columns?.length) {
       resolved.series = validateColumn('series.column', seriesConfig.columns[0]);
       resolved.seriesTitle = seriesConfig.title;
-    } else if (deprecatedColumns.series) {
-      resolved.series = validateColumn('columns.series', deprecatedColumns.series);
-      resolved.seriesTitle = config.legendTitle; // deprecated
     }
 
     // Size column
     if (sizeConfig?.columns?.length) {
       resolved.size = validateColumn('size.column', sizeConfig.columns[0]);
       resolved.sizeTitle = sizeConfig.title;
-    } else if (deprecatedColumns.size) {
-      resolved.size = validateColumn('columns.size', deprecatedColumns.size);
-      resolved.sizeTitle = config.sizeTitle; // deprecated
     }
 
     // Implicit detection for bubble if not explicitly specified
@@ -168,28 +151,21 @@ export function resolveColumns(config, data, chartType) {
 
   } else if (chartType === 'scatter') {
     // Scatter charts use x, y, label, series, size columns
-    // New schema: x.column, y.column, label.column, series.column, size.column
-    // Deprecated: columns.x, columns.y, columns.label, columns.series, columns.size
+    // Schema: x.column, y.column, label.column, series.column, size.column
 
     // X column
     if (xConfig?.columns?.length) {
       resolved.x = validateColumn('x.column', xConfig.columns[0]);
-    } else if (deprecatedColumns.x) {
-      resolved.x = validateColumn('columns.x', deprecatedColumns.x);
     }
 
     // Y column
     if (yConfig?.columns?.length) {
       resolved.y = validateColumn('y.column', yConfig.columns[0]);
-    } else if (deprecatedColumns.y) {
-      resolved.y = validateColumn('columns.y', deprecatedColumns.y);
     }
 
     // Label column (point identifier)
     if (labelConfig?.columns?.length) {
       resolved.label = validateColumn('label.column', labelConfig.columns[0]);
-    } else if (deprecatedColumns.label) {
-      resolved.label = validateColumn('columns.label', deprecatedColumns.label);
     } else {
       resolved.label = keys[0];
     }
@@ -198,18 +174,12 @@ export function resolveColumns(config, data, chartType) {
     if (seriesConfig?.columns?.length) {
       resolved.series = validateColumn('series.column', seriesConfig.columns[0]);
       resolved.seriesTitle = seriesConfig.title;
-    } else if (deprecatedColumns.series) {
-      resolved.series = validateColumn('columns.series', deprecatedColumns.series);
-      resolved.seriesTitle = config.legendTitle; // deprecated
     }
 
     // Size column
     if (sizeConfig?.columns?.length) {
       resolved.size = validateColumn('size.column', sizeConfig.columns[0]);
       resolved.sizeTitle = sizeConfig.title;
-    } else if (deprecatedColumns.size) {
-      resolved.size = validateColumn('columns.size', deprecatedColumns.size);
-      resolved.sizeTitle = config.sizeTitle; // deprecated
     }
 
     // Implicit detection for scatter if not explicitly specified
@@ -236,21 +206,16 @@ export function resolveColumns(config, data, chartType) {
 
   } else if (chartType === 'sankey') {
     // Sankey charts use source, target, value columns
-    // New schema: source.column, target.column, value.column
-    // Deprecated: columns.source, columns.target, columns.value
+    // Schema: source.column, target.column, value.column
 
     if (sourceConfig?.columns?.length) {
       resolved.source = validateColumn('source.column', sourceConfig.columns[0]);
-    } else if (deprecatedColumns.source) {
-      resolved.source = validateColumn('columns.source', deprecatedColumns.source);
     } else {
       resolved.source = keys[0];
     }
 
     if (targetConfig?.columns?.length) {
       resolved.target = validateColumn('target.column', targetConfig.columns[0]);
-    } else if (deprecatedColumns.target) {
-      resolved.target = validateColumn('columns.target', deprecatedColumns.target);
     } else {
       resolved.target = keys[1];
     }
@@ -258,22 +223,17 @@ export function resolveColumns(config, data, chartType) {
     if (valueConfig?.columns?.length) {
       resolved.value = validateColumn('value.column', valueConfig.columns[0]);
       resolved.valueFormat = valueConfig.format;
-    } else if (deprecatedColumns.value) {
-      resolved.value = validateColumn('columns.value', deprecatedColumns.value);
     } else {
       resolved.value = keys[2];
     }
 
   } else if (chartType === 'donut') {
     // Donut charts use label, value columns
-    // New schema: label.column, value.column
-    // Deprecated: columns.label, columns.value (or implicit first/second columns)
+    // Schema: label.column, value.column
 
     if (labelConfig?.columns?.length) {
       resolved.label = validateColumn('label.column', labelConfig.columns[0]);
       resolved.yLabels = labelConfig.labels || {};
-    } else if (deprecatedColumns.label) {
-      resolved.label = validateColumn('columns.label', deprecatedColumns.label);
     } else {
       resolved.label = keys[0];
     }
@@ -284,9 +244,6 @@ export function resolveColumns(config, data, chartType) {
         resolved.values = [resolved.values];
       }
       resolved.valueFormat = valueConfig.format;
-    } else if (deprecatedColumns.value) {
-      const val = validateColumn('columns.value', deprecatedColumns.value);
-      resolved.values = val ? [val] : [];
     } else {
       // Default: all columns except label
       resolved.values = keys.filter(k => k !== resolved.label);
@@ -294,14 +251,11 @@ export function resolveColumns(config, data, chartType) {
 
   } else if (chartType === 'stacked-bar') {
     // Stacked bar: y = categories (left side), x = value series (bars extend right)
-    // New schema: y.column (categories), x.columns (values with labels)
-    // Deprecated: columns.y (or label), columns.x (or y as values)
+    // Schema: y.column (categories), x.columns (values with labels)
 
     // Category column (on Y axis for stacked-bar)
     if (yConfig?.columns?.length) {
       resolved.label = validateColumn('y.column', yConfig.columns[0]);
-    } else if (deprecatedColumns.label) {
-      resolved.label = validateColumn('columns.label', deprecatedColumns.label);
     } else {
       resolved.label = keys[0];
     }
@@ -310,25 +264,18 @@ export function resolveColumns(config, data, chartType) {
     if (xConfig?.columns?.length) {
       resolved.values = validateColumn('x.columns', xConfig.columns) || [];
       resolved.xLabels = xConfig.labels || {};
-    } else if (deprecatedColumns.y) {
-      // Deprecated: columns.y was used for value columns in stacked-bar
-      const explicitY = validateColumn('columns.y', deprecatedColumns.y);
-      resolved.values = Array.isArray(explicitY) ? explicitY : (explicitY ? [explicitY] : []);
     } else {
       // Implicit: all columns except label are values
       resolved.values = keys.filter(k => k !== resolved.label);
     }
 
   } else {
-    // Standard charts (dot, line, stacked-column): x = categories, y = multi-series values
-    // New schema: x.column (categories), y.columns (values with labels)
-    // Deprecated: columns.label (or implicit first), columns.y
+    // Standard charts (line, stacked-column): x = categories, y = multi-series values
+    // Schema: x.column (categories), y.columns (values with labels)
 
     // Label/category column (X axis)
     if (xConfig?.columns?.length) {
       resolved.label = validateColumn('x.column', xConfig.columns[0]);
-    } else if (deprecatedColumns.label) {
-      resolved.label = validateColumn('columns.label', deprecatedColumns.label);
     } else {
       resolved.label = keys[0];
     }
@@ -337,9 +284,6 @@ export function resolveColumns(config, data, chartType) {
     if (yConfig?.columns?.length) {
       resolved.values = validateColumn('y.columns', yConfig.columns) || [];
       resolved.yLabels = yConfig.labels || {};
-    } else if (deprecatedColumns.y) {
-      const explicitY = validateColumn('columns.y', deprecatedColumns.y);
-      resolved.values = Array.isArray(explicitY) ? explicitY : (explicitY ? [explicitY] : []);
     } else {
       // Implicit: all columns except label are values
       resolved.values = keys.filter(k => k !== resolved.label);

package/src/config.js

@@ -3,58 +3,22 @@
  * Transforms various config formats into a standardized structure
  */
 
-// Deprecated keys mapping for deprecation warnings
-const DEPRECATED_KEYS = {
-  maxX: 'x.max',
-  minX: 'x.min',
-  maxY: 'y.max',
-  minY: 'y.min',
-  titleX: 'x.title',
-  titleY: 'y.title',
-  legendTitle: 'series.title',
-  sizeTitle: 'size.title',
-  rotateLabels: 'x.rotateLabels'
-};
-
-// Track which deprecation warnings have been shown to avoid spam
-const warnedConfigs = new Set();
-
-/**
- * Log a deprecation warning (once per config/key combination)
- * @param {string} chartId - Chart identifier
- * @param {string} oldKey - Deprecated key name
- * @param {string} newKey - New key path
- */
-function warnDeprecation(chartId, oldKey, newKey) {
-  const key = `${chartId}:${oldKey}`;
-  if (warnedConfigs.has(key)) return;
-  warnedConfigs.add(key);
-  console.warn(`[uncharted] Chart "${chartId}": "${oldKey}" is deprecated, use "${newKey}" instead`);
-}
-
 /**
  * Normalize chart configuration to standardized structure
  *
- * Precedence for axis properties (highest to lowest):
- * 1. x.max / y.max (new nested format)
- * 2. maxX / maxY (deprecated suffixed format)
- * 3. max (global fallback)
- *
- * Format precedence:
- * 1. x.format / y.format (new nested format)
- * 2. format.x / format.y (deprecated nested format)
- * 3. format (global fallback)
+ * Axis properties:
+ * - x.max / y.max, x.min / y.min
+ * - x.title / y.title
+ * - x.format / y.format
  *
- * Column mapping precedence:
- * 1. x.column / x.columns / y.column / y.columns (new unified format)
- * 2. columns.x / columns.y (deprecated format)
+ * Column mapping:
+ * - x.column / x.columns / y.column / y.columns
  *
- * Legend precedence:
- * 1. y.columns: { key: "Label" } or x.columns (for stacked-bar)
- * 2. legend: ["Label1", "Label2"] (deprecated)
+ * Legend:
+ * - y.columns: { key: "Label" } or x.columns (for stacked-bar)
  *
  * @param {Object} config - Raw chart configuration
- * @param {string} [chartId] - Chart ID for deprecation warnings
+ * @param {string} [chartId] - Chart ID (unused, kept for API compatibility)
  * @returns {Object} - Normalized configuration
  */
 export function normalizeConfig(config, chartId = 'unknown') {
@@ -63,26 +27,10 @@ export function normalizeConfig(config, chartId = 'unknown') {
   const normalized = { ...config };
 
   // Build x axis config
-  normalized.x = buildAxisConfig('x', config, chartId);
+  normalized.x = buildAxisConfig('x', config);
 
   // Build y axis config
-  normalized.y = buildAxisConfig('y', config, chartId);
-
-  // Warn for deprecated legend array (when used for labels, not boolean)
-  if (Array.isArray(config.legend)) {
-    warnDeprecation(chartId, 'legend (array)', 'y.columns: { key: "Label" }');
-  }
-
-  // Warn for deprecated scatter-specific keys
-  if (config.legendTitle !== undefined) {
-    warnDeprecation(chartId, 'legendTitle', 'series.title');
-  }
-  if (config.sizeTitle !== undefined) {
-    warnDeprecation(chartId, 'sizeTitle', 'size.title');
-  }
-
-  // Clean up deprecated top-level keys (keep them for backwards compat but don't pass to renderers)
-  // The renderers will use normalized.x and normalized.y instead
+  normalized.y = buildAxisConfig('y', config);
 
   return normalized;
 }
@@ -91,58 +39,22 @@ export function normalizeConfig(config, chartId = 'unknown') {
  * Build normalized axis configuration
  * @param {'x' | 'y'} axis - Axis name
  * @param {Object} config - Raw config
- * @param {string} chartId - Chart ID for warnings
  * @returns {Object} - Normalized axis config
  */
-function buildAxisConfig(axis, config, chartId) {
-  const axisUpper = axis.toUpperCase();
+function buildAxisConfig(axis, config) {
   const existingAxisConfig = config[axis] || {};
 
   // Start with existing axis config if present
   const axisConfig = { ...existingAxisConfig };
 
-  // max: x.max > maxX > max
-  if (axisConfig.max === undefined) {
-    const deprecatedKey = `max${axisUpper}`;
-    if (config[deprecatedKey] !== undefined) {
-      warnDeprecation(chartId, deprecatedKey, `${axis}.max`);
-      axisConfig.max = config[deprecatedKey];
-    } else if (config.max !== undefined) {
-      axisConfig.max = config.max;
-    }
-  }
-
-  // min: x.min > minX > min
-  if (axisConfig.min === undefined) {
-    const deprecatedKey = `min${axisUpper}`;
-    if (config[deprecatedKey] !== undefined) {
-      warnDeprecation(chartId, deprecatedKey, `${axis}.min`);
-      axisConfig.min = config[deprecatedKey];
-    } else if (config.min !== undefined) {
-      axisConfig.min = config.min;
-    }
+  // max: x.max > max (global fallback)
+  if (axisConfig.max === undefined && config.max !== undefined) {
+    axisConfig.max = config.max;
   }
 
-  // title: x.title > titleX
-  if (axisConfig.title === undefined) {
-    const deprecatedKey = `title${axisUpper}`;
-    if (config[deprecatedKey] !== undefined) {
-      warnDeprecation(chartId, deprecatedKey, `${axis}.title`);
-      axisConfig.title = config[deprecatedKey];
-    }
-  }
-
-  // format: x.format > format.x > format
-  if (axisConfig.format === undefined) {
-    const globalFormat = config.format || {};
-    if (globalFormat[axis] !== undefined) {
-      // format.x or format.y (deprecated nested format)
-      warnDeprecation(chartId, `format.${axis}`, `${axis}.format`);
-      axisConfig.format = globalFormat[axis];
-    } else if (typeof globalFormat === 'object' && !globalFormat.x && !globalFormat.y) {
-      // Global format object (no x/y nesting) - use as fallback
-      axisConfig.format = globalFormat;
-    }
+  // min: x.min > min (global fallback)
+  if (axisConfig.min === undefined && config.min !== undefined) {
+    axisConfig.min = config.min;
   }
 
   return axisConfig;
@@ -236,20 +148,10 @@ export function parseAxisConfig(axisConfig) {
 }
 
 /**
- * Get rotateLabels setting from axis config or deprecated top-level
+ * Get rotateLabels setting from axis config
  * @param {Object} config - Normalized config
- * @param {string} chartId - Chart ID for deprecation warnings
  * @returns {boolean} - Whether to rotate labels
  */
-export function getRotateLabels(config, chartId) {
-  // New schema: x.rotateLabels
-  if (config.x?.rotateLabels !== undefined) {
-    return config.x.rotateLabels;
-  }
-  // Deprecated: top-level rotateLabels
-  if (config.rotateLabels !== undefined) {
-    warnDeprecation(chartId, 'rotateLabels', 'x.rotateLabels');
-    return config.rotateLabels;
-  }
-  return false;
+export function getRotateLabels(config) {
+  return config.x?.rotateLabels ?? false;
 }

package/src/deprecation.js

@@ -0,0 +1,111 @@
+/**
+ * Deprecation validation for Uncharted
+ * Validates config for deprecated usage and logs appropriate warnings/errors
+ */
+
+// Track which deprecation warnings have been shown to avoid spam
+const warnedConfigs = new Set();
+
+/**
+ * Log a deprecation warning (once per config/key combination)
+ * @param {string} chartId - Chart identifier
+ * @param {string} oldKey - Deprecated key name
+ * @param {string} newKey - New key path
+ */
+function warnDeprecation(chartId, oldKey, newKey) {
+  const key = `${chartId}:${oldKey}`;
+  if (warnedConfigs.has(key)) return;
+  warnedConfigs.add(key);
+  console.warn(`[uncharted] Chart "${chartId}": "${oldKey}" is deprecated, use "${newKey}" instead`);
+}
+
+/**
+ * Validate chart type and return error message if deprecated
+ * @param {string} type - Chart type
+ * @param {string} chartId - Chart identifier
+ * @returns {string|null} - Error message or null if valid
+ */
+export function validateChartType(type, chartId) {
+  if (type === 'dot') {
+    return `Chart "${chartId}": type "dot" is no longer supported. Use type "line" with lines: false instead.`;
+  }
+  return null;
+}
+
+/**
+ * Check config for deprecated options and log warnings
+ * @param {Object} config - Chart configuration
+ * @param {string} chartId - Chart identifier
+ */
+export function checkDeprecatedOptions(config, chartId) {
+  if (!config) return;
+
+  // Check for deprecated axis shorthand keys
+  if (config.maxX !== undefined) {
+    warnDeprecation(chartId, 'maxX', 'x.max');
+  }
+  if (config.minX !== undefined) {
+    warnDeprecation(chartId, 'minX', 'x.min');
+  }
+  if (config.maxY !== undefined) {
+    warnDeprecation(chartId, 'maxY', 'y.max');
+  }
+  if (config.minY !== undefined) {
+    warnDeprecation(chartId, 'minY', 'y.min');
+  }
+  if (config.titleX !== undefined) {
+    warnDeprecation(chartId, 'titleX', 'x.title');
+  }
+  if (config.titleY !== undefined) {
+    warnDeprecation(chartId, 'titleY', 'y.title');
+  }
+
+  // Check for deprecated top-level rotateLabels
+  if (config.rotateLabels !== undefined) {
+    warnDeprecation(chartId, 'rotateLabels', 'x.rotateLabels');
+  }
+
+  // Check for deprecated legend array (when used for labels, not boolean)
+  if (Array.isArray(config.legend)) {
+    warnDeprecation(chartId, 'legend (array)', 'y.columns: { key: "Label" }');
+  }
+
+  // Check for deprecated scatter-specific keys
+  if (config.legendTitle !== undefined) {
+    warnDeprecation(chartId, 'legendTitle', 'series.title');
+  }
+  if (config.sizeTitle !== undefined) {
+    warnDeprecation(chartId, 'sizeTitle', 'size.title');
+  }
+
+  // Check for deprecated format.x / format.y structure
+  if (config.format && typeof config.format === 'object') {
+    if (config.format.x !== undefined) {
+      warnDeprecation(chartId, 'format.x', 'x.format');
+    }
+    if (config.format.y !== undefined) {
+      warnDeprecation(chartId, 'format.y', 'y.format');
+    }
+  }
+
+  // Check for deprecated columns.* structure
+  if (config.columns && typeof config.columns === 'object') {
+    const deprecatedColumnKeys = ['x', 'y', 'label', 'series', 'size', 'source', 'target', 'value'];
+    for (const key of deprecatedColumnKeys) {
+      if (config.columns[key] !== undefined) {
+        const newPath = key === 'label' ? 'x.column or label.column' :
+                        key === 'x' ? 'x.column' :
+                        key === 'y' ? 'y.columns' :
+                        `${key}.column`;
+        warnDeprecation(chartId, `columns.${key}`, newPath);
+      }
+    }
+  }
+}
+
+/**
+ * Clear warning cache (useful for testing)
+ */
+export function clearWarningCache() {
+  warnedConfigs.clear();
+}

package/src/renderers/bubble.js

@@ -27,7 +27,7 @@ export function renderBubble(config) {
   }
 
   const animateClass = animate ? ' chart-animate' : '';
-  const rotateLabels = getRotateLabels(config, config.id);
+  const rotateLabels = getRotateLabels(config);
 
   // Use resolved columns if available, otherwise fall back to implicit detection
   const keys = Object.keys(data[0]);
@@ -49,9 +49,9 @@ export function renderBubble(config) {
     seriesKey = findKey('series');
   }
 
-  // Get legend/size titles from resolved columns (new schema) or deprecated top-level
-  const legendTitle = _columns?.seriesTitle ?? config.legendTitle;
-  const sizeTitle = _columns?.sizeTitle ?? config.sizeTitle;
+  // Get legend/size titles from resolved columns (new schema only)
+  const legendTitle = _columns?.seriesTitle;
+  const sizeTitle = _columns?.sizeTitle;
 
   // Axis titles
   const xAxisTitle = getAxisTitle(config, 'x', '');
@@ -222,8 +222,9 @@ export function renderBubble(config) {
   html += `</div>`; // close chart-body
 
   // Legend (if multiple series or legendTitle specified)
-  if (seriesList.length > 1 || legend || legendTitle) {
-    const legendLabels = legend ?? seriesList;
+  // Note: legend array is deprecated; use series names directly
+  if (seriesList.length > 1 || legendTitle) {
+    const legendLabels = seriesList;
     if (legendTitle) {
       html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
     }

package/src/renderers/donut.js

@@ -103,11 +103,10 @@ export function renderDonut(config) {
 
   html += `</div>`; // Close donut-body
 
-  // Build label lookup from: 1) yLabels (new schema), 2) legend array (deprecated), 3) segment labels
+  // Build label lookup from yLabels (new schema) or segment labels
   const labelMap = _columns?.yLabels || {};
-  const getSegmentLabel = (segment, index) => {
+  const getSegmentLabel = (segment) => {
     if (labelMap[segment.label]) return labelMap[segment.label];
-    if (Array.isArray(legend)) return legend[index] ?? segment.label;
     return segment.label;
   };
 
@@ -120,7 +119,7 @@ export function renderDonut(config) {
   if (showLegend) {
     html += `<div class="chart-legend">`;
     segments.forEach((segment, i) => {
-      const label = getSegmentLabel(segment, i);
+      const label = getSegmentLabel(segment);
       let displayValue;
       if (showPercentages) {
         displayValue = ((segment.value / total) * 100).toFixed(1) + '%';

package/src/renderers/index.js

@@ -1,7 +1,6 @@
 import { renderStackedBar } from './stacked-bar.js';
 import { renderStackedColumn } from './stacked-column.js';
 import { renderDonut } from './donut.js';
-import { renderDot } from './dot.js';
 import { renderScatter } from './scatter.js';
 import { renderSankey } from './sankey.js';
 import { renderLine } from './line.js';
@@ -12,7 +11,6 @@ export const renderers = {
   'stacked-bar': renderStackedBar,
   'stacked-column': renderStackedColumn,
   'donut': renderDonut,
-  'dot': renderDot,
   'scatter': renderScatter,
   'sankey': renderSankey,
   'line': renderLine,
@@ -20,4 +18,4 @@ export const renderers = {
   'bubble': renderBubble
 };
 
-export { renderStackedBar, renderStackedColumn, renderDonut, renderDot, renderScatter, renderSankey, renderLine, renderTimeseries, renderBubble };
+export { renderStackedBar, renderStackedColumn, renderDonut, renderScatter, renderSankey, renderLine, renderTimeseries, renderBubble };

package/src/renderers/line.js

@@ -1,6 +1,218 @@
-import { renderDot } from './dot.js';
+import { slugify, escapeHtml, getLabelKey, getSeriesNames, renderDownloadLink } from '../utils.js';
+import { formatNumber } from '../formatters.js';
+import { getAxisMax, getAxisMin, getAxisFormat, getAxisTitle, getRotateLabels } from '../config.js';
 
+/**
+ * Render a line chart (categorical X axis with connected data points)
+ * @param {Object} config - Chart configuration (normalized)
+ * @param {string} config.title - Chart title
+ * @param {string} [config.subtitle] - Chart subtitle
+ * @param {Object[]} config.data - Chart data with label column and value columns
+ * @param {Object} [config.y] - Y-axis configuration { max, min, format }
+ * @param {string[]} [config.legend] - Legend labels (defaults to series names)
+ * @param {boolean} [config.animate] - Enable animations
+ * @param {boolean} [config.lines] - Show connecting lines (default: true)
+ * @param {boolean} [config.dots] - Show dots at data points (default: true)
+ * @param {Object} [config._columns] - Resolved column mappings
+ * @returns {string} - HTML string
+ */
 export function renderLine(config) {
-  const connectDots = config.lines !== false; // default true
-  return renderDot({ ...config, connectDots, chartType: 'line' });
+  const { title, subtitle, data, max, min, legend, legendTitle, animate, format, id, downloadData, downloadDataUrl, icons, _columns } = config;
+
+  // Line-specific options
+  const showLines = config.lines !== false; // default true
+  const showDots = config.dots !== false; // default true
+
+  if (!data || data.length === 0) {
+    return `<!-- Line chart: no data provided -->`;
+  }
+
+  // Get label key and series keys (use resolved columns if available)
+  const labelKey = _columns?.label ?? getLabelKey(data);
+  const seriesKeys = _columns?.values?.length > 0 ? _columns.values : getSeriesNames(data);
+
+  // Build legend labels from yLabels (new schema) or column names
+  const yLabels = _columns?.yLabels || {};
+  const getSeriesLabel = (key) => {
+    if (yLabels[key]) return yLabels[key];
+    return key;
+  };
+
+  // Helper to get icon for a series
+  const getSeriesIcon = (key) => {
+    if (!icons) return null;
+    if (typeof icons === 'string') return icons;
+    return icons[key] ?? null;
+  };
+
+  const animateClass = animate ? ' chart-animate' : '';
+  const rotateLabels = getRotateLabels(config);
+
+  // Get Y-axis format and axis titles
+  const yFormat = getAxisFormat(config, 'y');
+  const xAxisTitle = getAxisTitle(config, 'x', '');
+  const yAxisTitle = getAxisTitle(config, 'y', '');
+
+  // Calculate min and max values for Y scaling (exclude null values)
+  const allValues = data.flatMap(row =>
+    seriesKeys.map(key => row[key]).filter(val => val !== null && val !== undefined && val !== '')
+  ).map(val => typeof val === 'number' ? val : parseFloat(val)).filter(v => !isNaN(v));
+  const dataMax = Math.max(...allValues);
+  const dataMin = Math.min(...allValues);
+
+  // Use normalized axis config, fall back to legacy top-level max/min
+  const maxValue = getAxisMax(config, 'y') ?? max ?? dataMax;
+  const minValue = getAxisMin(config, 'y') ?? min ?? (dataMin < 0 ? dataMin : 0);
+  const range = maxValue - minValue;
+  const hasNegativeY = minValue < 0;
+
+  // Calculate zero position for axis line
+  const zeroPct = hasNegativeY ? ((0 - minValue) / range) * 100 : 0;
+
+  const negativeClass = hasNegativeY ? ' has-negative-y' : '';
+  const idClass = id ? ` chart-${id}` : '';
+  const rotateClass = rotateLabels ? ' rotate-labels' : '';
+  // Add no-dots class if dots are disabled (icons only affect legend, not dots)
+  const dotsClass = !showDots ? ' no-dots' : '';
+  let html = `<figure class="chart chart-line${animateClass}${negativeClass}${idClass}${rotateClass}${dotsClass}">`;
+
+  if (title) {
+    html += `<figcaption class="chart-title">${escapeHtml(title)}`;
+    if (subtitle) {
+      html += `<span class="chart-subtitle">${escapeHtml(subtitle)}</span>`;
+    }
+    html += `</figcaption>`;
+  }
+
+  html += `<div class="chart-body">`;
+
+  // Y-axis
+  const yAxisStyle = hasNegativeY ? ` style="--zero-position: ${zeroPct.toFixed(2)}%"` : '';
+  html += `<div class="chart-y-axis"${yAxisStyle}>`;
+  html += `<span class="axis-label">${formatNumber(maxValue, yFormat) || maxValue}</span>`;
+  const midLabelY = hasNegativeY ? 0 : Math.round((maxValue + minValue) / 2);
+  html += `<span class="axis-label">${formatNumber(midLabelY, yFormat) || midLabelY}</span>`;
+  html += `<span class="axis-label">${formatNumber(minValue, yFormat) || minValue}</span>`;
+  if (yAxisTitle) {
+    html += `<span class="axis-title">${escapeHtml(yAxisTitle)}</span>`;
+  }
+  html += `</div>`;
+
+  // 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">`;
+
+  // CSS line segments connecting dots (rendered before dot-cols so they stack behind)
+  // Skip segments where either endpoint is null (gap in data)
+  if (showLines && data.length > 1) {
+    let segIndex = 0;
+    seriesKeys.forEach((key, i) => {
+      const colorClass = `chart-color-${i + 1}`;
+      const seriesClass = `chart-series-${slugify(key)}`;
+      for (let colIndex = 0; colIndex < data.length - 1; colIndex++) {
+        const val1 = data[colIndex][key];
+        const val2 = data[colIndex + 1][key];
+        // Skip segment if either endpoint is null/missing
+        if (val1 === null || val1 === undefined || val1 === '' ||
+            val2 === null || val2 === undefined || val2 === '') {
+          continue;
+        }
+        const v1 = typeof val1 === 'number' ? val1 : parseFloat(val1);
+        const v2 = typeof val2 === 'number' ? val2 : parseFloat(val2);
+        const y1 = range > 0 ? ((v1 - minValue) / range) * 100 : 0;
+        const y2 = range > 0 ? ((v2 - minValue) / range) * 100 : 0;
+        const x1 = ((colIndex + 0.5) / data.length) * 100;
+        const x2 = ((colIndex + 1.5) / data.length) * 100;
+        html += `<div class="chart-line-segment ${colorClass} ${seriesClass}" `;
+        html += `style="--x1: ${x1.toFixed(2)}; --y1: ${y1.toFixed(2)}; --x2: ${x2.toFixed(2)}; --y2: ${y2.toFixed(2)}; --seg-index: ${segIndex}">`;
+        html += `</div>`;
+        segIndex++;
+      }
+    });
+  }
+
+  // Always render dots for hover/tooltips (CSS handles visibility)
+  // Only show icons inside dots when dots are visible
+  data.forEach((row, colIndex) => {
+    const label = row[labelKey] ?? '';
+
+    html += `<div class="dot-col" style="--col-index: ${colIndex}">`;
+
+    seriesKeys.forEach((key, i) => {
+      const val = row[key];
+      // Skip null/missing values - don't render a dot
+      if (val === null || val === undefined || val === '') return;
+
+      const value = typeof val === 'number' ? val : parseFloat(val) || 0;
+      const yPct = range > 0 ? ((value - minValue) / range) * 100 : 0;
+      const colorClass = `chart-color-${i + 1}`;
+      const seriesClass = `chart-series-${slugify(key)}`;
+      const tooltipLabel = getSeriesLabel(key);
+      const icon = showDots ? getSeriesIcon(key) : null;
+      const iconClass = icon ? ' has-icon' : '';
+
+      html += `<div class="dot ${colorClass} ${seriesClass}${iconClass}" `;
+      html += `style="--value: ${yPct.toFixed(2)}%" `;
+      html += `title="${escapeHtml(tooltipLabel)}: ${formatNumber(value, yFormat) || value}"`;
+      html += `>`;
+      if (icon) {
+        html += `<i class="${escapeHtml(icon)}"></i>`;
+      }
+      html += `</div>`;
+    });
+
+    html += `</div>`;
+  });
+
+  html += `</div>`; // close dot-field
+  html += `</div>`; // close dot-chart
+
+  // X-axis labels
+  html += `<div class="dot-labels">`;
+  data.forEach(row => {
+    const label = row[labelKey] ?? '';
+    html += `<span class="dot-label">${escapeHtml(label)}</span>`;
+  });
+  if (xAxisTitle) {
+    html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
+  }
+  html += `</div>`;
+
+  html += `</div>`; // close chart-scroll
+  html += `</div>`; // close chart-body
+
+  // Legend (show if legend !== false and we have series keys or legendTitle)
+  const showLegend = config.legend !== false && (seriesKeys.length > 0 || legendTitle);
+  if (showLegend) {
+    if (legendTitle) {
+      html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
+    }
+    html += `<div class="chart-legend">`;
+    seriesKeys.forEach((key, i) => {
+      const label = getSeriesLabel(key);
+      const colorClass = `chart-color-${i + 1}`;
+      const seriesClass = `chart-series-${slugify(key)}`;
+      const icon = getSeriesIcon(key);
+      const iconClass = icon ? ' has-icon' : '';
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}${iconClass}">`;
+      if (icon) {
+        html += `<i class="${escapeHtml(icon)}"></i>`;
+      }
+      html += `${escapeHtml(label)}</span>`;
+    });
+    html += `</div>`;
+  }
+
+  html += renderDownloadLink(downloadDataUrl, downloadData);
+  html += `</figure>`;
+
+  return html;
 }

package/src/renderers/scatter.js

@@ -54,9 +54,9 @@ export function renderScatter(config) {
     seriesKey = findKey('series');
   }
 
-  // Get legend/size titles from resolved columns (new schema) or deprecated top-level
-  const legendTitle = _columns?.seriesTitle ?? config.legendTitle;
-  const sizeTitle = _columns?.sizeTitle ?? config.sizeTitle;
+  // Get legend/size titles from resolved columns (new schema only)
+  const legendTitle = _columns?.seriesTitle;
+  const sizeTitle = _columns?.sizeTitle;
 
   // Axis titles: use normalized config, fall back to column names
   const xAxisTitle = getAxisTitle(config, 'x', xKey);
@@ -219,8 +219,9 @@ export function renderScatter(config) {
   html += `</div>`;
 
   // Legend (if multiple series or legendTitle specified)
-  if (seriesList.length > 1 || legend || legendTitle) {
-    const legendLabels = legend ?? seriesList;
+  // Note: legend array is deprecated; use series names directly
+  if (seriesList.length > 1 || legendTitle) {
+    const legendLabels = seriesList;
     if (legendTitle) {
       html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
     }

package/src/renderers/stacked-bar.js

@@ -25,11 +25,10 @@ export function renderStackedBar(config) {
   const labelKey = _columns?.label ?? getLabelKey(data);
   const seriesKeys = _columns?.values?.length > 0 ? _columns.values : getSeriesNames(data);
 
-  // Build legend labels from: 1) xLabels (new - stacked-bar uses x for values), 2) legend array (deprecated), 3) column names
+  // Build legend labels from xLabels (new schema) or column names
   const xLabels = _columns?.xLabels || {};
-  const getSeriesLabel = (key, index) => {
+  const getSeriesLabel = (key) => {
     if (xLabels[key]) return xLabels[key];
-    if (Array.isArray(legend)) return legend[index] ?? key;
     return key;
   };
 
@@ -67,7 +66,7 @@ export function renderStackedBar(config) {
     }
     html += `<div class="chart-legend">`;
     seriesKeys.forEach((key, i) => {
-      const label = getSeriesLabel(key, i);
+      const label = getSeriesLabel(key);
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
       html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
@@ -101,7 +100,7 @@ export function renderStackedBar(config) {
       if (pct > 0) {
         const colorClass = `chart-color-${i + 1}`;
         const seriesClass = `chart-series-${slugify(key)}`;
-        const seriesLabel = getSeriesLabel(key, i);
+        const seriesLabel = getSeriesLabel(key);
         html += `<div class="bar-fill ${colorClass} ${seriesClass}" style="--value: ${pct.toFixed(2)}%" title="${escapeHtml(seriesLabel)}: ${formatNumber(value, xFormat) || value}"></div>`;
       }
     });

package/src/renderers/stacked-column.js

@@ -25,16 +25,15 @@ export function renderStackedColumn(config) {
   const labelKey = _columns?.label ?? getLabelKey(data);
   const seriesKeys = _columns?.values?.length > 0 ? _columns.values : getSeriesNames(data);
 
-  // Build legend labels from: 1) yLabels (new), 2) legend array (deprecated), 3) column names
+  // Build legend labels from yLabels (new schema) or column names
   const yLabels = _columns?.yLabels || {};
-  const getSeriesLabel = (key, index) => {
+  const getSeriesLabel = (key) => {
     if (yLabels[key]) return yLabels[key];
-    if (Array.isArray(legend)) return legend[index] ?? key;
     return key;
   };
 
   const animateClass = animate ? ' chart-animate' : '';
-  const rotateLabels = getRotateLabels(config, config.id);
+  const rotateLabels = getRotateLabels(config);
 
   // Get Y-axis format
   const yFormat = getAxisFormat(config, 'y');
@@ -122,7 +121,7 @@ export function renderStackedColumn(config) {
         const value = typeof val === 'number' ? val : parseFloat(val) || 0;
         const colorClass = `chart-color-${i + 1}`;
         const seriesClass = `chart-series-${slugify(key)}`;
-        const seriesLabel = getSeriesLabel(key, i);
+        const seriesLabel = getSeriesLabel(key);
         const segmentHeight = range > 0 ? (Math.abs(value) / range) * 100 : 0;
 
         if (value >= 0) {
@@ -201,7 +200,7 @@ export function renderStackedColumn(config) {
   if (showLegend) {
     html += `<div class="chart-legend">`;
     seriesKeys.forEach((key, i) => {
-      const label = getSeriesLabel(key, i);
+      const label = getSeriesLabel(key);
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
       html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;

package/src/renderers/timeseries.js

@@ -262,14 +262,14 @@ export function renderTimeseries(config) {
   }
 
   // Build legend labels
+  // Build legend labels from yLabels (new schema) or column names
   const yLabels = _columns?.yLabels || {};
   const yColumnsLabels = config.y?.columns && typeof config.y.columns === 'object' && !Array.isArray(config.y.columns)
     ? config.y.columns
     : {};
-  const getSeriesLabel = (key, index) => {
+  const getSeriesLabel = (key) => {
     if (yLabels[key]) return yLabels[key];
     if (yColumnsLabels[key]) return yColumnsLabels[key];
-    if (Array.isArray(legend)) return legend[index] ?? key;
     return key;
   };
 
@@ -433,7 +433,7 @@ export function renderTimeseries(config) {
       const points = seriesData.get(key);
       const colorClass = `chart-color-${seriesIdx + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
-      const seriesLabel = getSeriesLabel(key, seriesIdx);
+      const seriesLabel = getSeriesLabel(key);
       const icon = showDots ? getSeriesIcon(key) : null;
       const iconClass = icon ? ' has-icon' : '';
 
@@ -484,7 +484,7 @@ export function renderTimeseries(config) {
     }
     html += `<div class="chart-legend">`;
     seriesKeys.forEach((key, i) => {
-      const label = getSeriesLabel(key, i);
+      const label = getSeriesLabel(key);
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
       const icon = getSeriesIcon(key);

package/src/renderers/dot.js

@@ -1,222 +0,0 @@
-import { slugify, escapeHtml, getLabelKey, getSeriesNames, renderDownloadLink } from '../utils.js';
-import { formatNumber } from '../formatters.js';
-import { getAxisMax, getAxisMin, getAxisFormat, getAxisTitle, getRotateLabels } from '../config.js';
-
-/**
- * Render a categorical dot chart (columns with dots at different Y positions)
- * Like atlas-wrapped's adoption chart - discrete X axis, continuous Y axis
- * @param {Object} config - Chart configuration (normalized)
- * @param {string} config.title - Chart title
- * @param {string} [config.subtitle] - Chart subtitle
- * @param {Object[]} config.data - Chart data with label column and value columns
- * @param {Object} [config.y] - Y-axis configuration { max, min, format }
- * @param {string[]} [config.legend] - Legend labels (defaults to series names)
- * @param {boolean} [config.animate] - Enable animations
- * @param {Object} [config._columns] - Resolved column mappings
- * @returns {string} - HTML string
- */
-export function renderDot(config) {
-  const { title, subtitle, data, max, min, legend, legendTitle, animate, format, id, downloadData, downloadDataUrl, connectDots, dots: showDots = true, icons, chartType = 'dot', _columns } = config;
-
-  // Deprecation warning for dot chart type
-  if (chartType === 'dot') {
-    console.warn(
-      '[uncharted] Chart type "dot" is deprecated. ' +
-      'Migrate to "line" with lines: false, or use "bubble" for sized dots.'
-    );
-  }
-
-  if (!data || data.length === 0) {
-    return `<!-- Dot chart: no data provided -->`;
-  }
-
-  // Get label key and series keys (use resolved columns if available)
-  const labelKey = _columns?.label ?? getLabelKey(data);
-  const seriesKeys = _columns?.values?.length > 0 ? _columns.values : getSeriesNames(data);
-
-  // Build legend labels from: 1) yLabels (new), 2) legend array (deprecated), 3) column names
-  const yLabels = _columns?.yLabels || {};
-  const getSeriesLabel = (key, index) => {
-    if (yLabels[key]) return yLabels[key];
-    if (Array.isArray(legend)) return legend[index] ?? key;
-    return key;
-  };
-
-  // Helper to get icon for a series
-  const getSeriesIcon = (key) => {
-    if (!icons) return null;
-    if (typeof icons === 'string') return icons;
-    return icons[key] ?? null;
-  };
-
-  const animateClass = animate ? ' chart-animate' : '';
-  const rotateLabels = getRotateLabels(config, config.id);
-
-  // Get Y-axis format and axis titles
-  const yFormat = getAxisFormat(config, 'y');
-  const xAxisTitle = getAxisTitle(config, 'x', '');
-  const yAxisTitle = getAxisTitle(config, 'y', '');
-
-  // Calculate min and max values for Y scaling (exclude null values)
-  const allValues = data.flatMap(row =>
-    seriesKeys.map(key => row[key]).filter(val => val !== null && val !== undefined && val !== '')
-  ).map(val => typeof val === 'number' ? val : parseFloat(val)).filter(v => !isNaN(v));
-  const dataMax = Math.max(...allValues);
-  const dataMin = Math.min(...allValues);
-
-  // Use normalized axis config, fall back to legacy top-level max/min
-  const maxValue = getAxisMax(config, 'y') ?? max ?? dataMax;
-  const minValue = getAxisMin(config, 'y') ?? min ?? (dataMin < 0 ? dataMin : 0);
-  const range = maxValue - minValue;
-  const hasNegativeY = minValue < 0;
-
-  // Calculate zero position for axis line
-  const zeroPct = hasNegativeY ? ((0 - minValue) / range) * 100 : 0;
-
-  const negativeClass = hasNegativeY ? ' has-negative-y' : '';
-  const idClass = id ? ` chart-${id}` : '';
-  const rotateClass = rotateLabels ? ' rotate-labels' : '';
-  // Add no-dots class if dots are disabled (icons only affect legend, not dots)
-  const dotsClass = !showDots ? ' no-dots' : '';
-  let html = `<figure class="chart chart-${chartType}${animateClass}${negativeClass}${idClass}${rotateClass}${dotsClass}">`;
-
-  if (title) {
-    html += `<figcaption class="chart-title">${escapeHtml(title)}`;
-    if (subtitle) {
-      html += `<span class="chart-subtitle">${escapeHtml(subtitle)}</span>`;
-    }
-    html += `</figcaption>`;
-  }
-
-  html += `<div class="chart-body">`;
-
-  // Y-axis
-  const yAxisStyle = hasNegativeY ? ` style="--zero-position: ${zeroPct.toFixed(2)}%"` : '';
-  html += `<div class="chart-y-axis"${yAxisStyle}>`;
-  html += `<span class="axis-label">${formatNumber(maxValue, yFormat) || maxValue}</span>`;
-  const midLabelY = hasNegativeY ? 0 : Math.round((maxValue + minValue) / 2);
-  html += `<span class="axis-label">${formatNumber(midLabelY, yFormat) || midLabelY}</span>`;
-  html += `<span class="axis-label">${formatNumber(minValue, yFormat) || minValue}</span>`;
-  if (yAxisTitle) {
-    html += `<span class="axis-title">${escapeHtml(yAxisTitle)}</span>`;
-  }
-  html += `</div>`;
-
-  // 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">`;
-
-  // CSS line segments connecting dots (rendered before dot-cols so they stack behind)
-  // Skip segments where either endpoint is null (gap in data)
-  if (connectDots && data.length > 1) {
-    let segIndex = 0;
-    seriesKeys.forEach((key, i) => {
-      const colorClass = `chart-color-${i + 1}`;
-      const seriesClass = `chart-series-${slugify(key)}`;
-      for (let colIndex = 0; colIndex < data.length - 1; colIndex++) {
-        const val1 = data[colIndex][key];
-        const val2 = data[colIndex + 1][key];
-        // Skip segment if either endpoint is null/missing
-        if (val1 === null || val1 === undefined || val1 === '' ||
-            val2 === null || val2 === undefined || val2 === '') {
-          continue;
-        }
-        const v1 = typeof val1 === 'number' ? val1 : parseFloat(val1);
-        const v2 = typeof val2 === 'number' ? val2 : parseFloat(val2);
-        const y1 = range > 0 ? ((v1 - minValue) / range) * 100 : 0;
-        const y2 = range > 0 ? ((v2 - minValue) / range) * 100 : 0;
-        const x1 = ((colIndex + 0.5) / data.length) * 100;
-        const x2 = ((colIndex + 1.5) / data.length) * 100;
-        html += `<div class="chart-line-segment ${colorClass} ${seriesClass}" `;
-        html += `style="--x1: ${x1.toFixed(2)}; --y1: ${y1.toFixed(2)}; --x2: ${x2.toFixed(2)}; --y2: ${y2.toFixed(2)}; --seg-index: ${segIndex}">`;
-        html += `</div>`;
-        segIndex++;
-      }
-    });
-  }
-
-  // Always render dots for hover/tooltips (CSS handles visibility)
-  // Only show icons inside dots when dots are visible
-  data.forEach((row, colIndex) => {
-    const label = row[labelKey] ?? '';
-
-    html += `<div class="dot-col" style="--col-index: ${colIndex}">`;
-
-    seriesKeys.forEach((key, i) => {
-      const val = row[key];
-      // Skip null/missing values - don't render a dot
-      if (val === null || val === undefined || val === '') return;
-
-      const value = typeof val === 'number' ? val : parseFloat(val) || 0;
-      const yPct = range > 0 ? ((value - minValue) / range) * 100 : 0;
-      const colorClass = `chart-color-${i + 1}`;
-      const seriesClass = `chart-series-${slugify(key)}`;
-      const tooltipLabel = getSeriesLabel(key, i);
-      const icon = showDots ? getSeriesIcon(key) : null;
-      const iconClass = icon ? ' has-icon' : '';
-
-      html += `<div class="dot ${colorClass} ${seriesClass}${iconClass}" `;
-      html += `style="--value: ${yPct.toFixed(2)}%" `;
-      html += `title="${escapeHtml(tooltipLabel)}: ${formatNumber(value, yFormat) || value}"`;
-      html += `>`;
-      if (icon) {
-        html += `<i class="${escapeHtml(icon)}"></i>`;
-      }
-      html += `</div>`;
-    });
-
-    html += `</div>`;
-  });
-
-  html += `</div>`; // close dot-field
-  html += `</div>`; // close dot-chart
-
-  // X-axis labels
-  html += `<div class="dot-labels">`;
-  data.forEach(row => {
-    const label = row[labelKey] ?? '';
-    html += `<span class="dot-label">${escapeHtml(label)}</span>`;
-  });
-  if (xAxisTitle) {
-    html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
-  }
-  html += `</div>`;
-
-  html += `</div>`; // close chart-scroll
-  html += `</div>`; // close chart-body
-
-  // Legend (show if legend !== false and we have series keys or legendTitle)
-  const showLegend = config.legend !== false && (seriesKeys.length > 0 || legendTitle);
-  if (showLegend) {
-    if (legendTitle) {
-      html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
-    }
-    html += `<div class="chart-legend">`;
-    seriesKeys.forEach((key, i) => {
-      const label = getSeriesLabel(key, i);
-      const colorClass = `chart-color-${i + 1}`;
-      const seriesClass = `chart-series-${slugify(key)}`;
-      const icon = getSeriesIcon(key);
-      const iconClass = icon ? ' has-icon' : '';
-      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}${iconClass}">`;
-      if (icon) {
-        html += `<i class="${escapeHtml(icon)}"></i>`;
-      }
-      html += `${escapeHtml(label)}</span>`;
-    });
-    html += `</div>`;
-  }
-
-  html += renderDownloadLink(downloadDataUrl, downloadData);
-  html += `</figure>`;
-
-  return html;
-}