eleventy-plugin-uncharted 0.7.5 → 0.9.0

package/src/columns.js

@@ -98,7 +98,75 @@ export function resolveColumns(config, data, chartType) {
   };
 
   // Chart-type specific resolution
-  if (chartType === 'scatter') {
+  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
+
+    // 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
+    if (!resolved.x || !resolved.y) {
+      const namedX = findKey('x');
+      const namedY = findKey('y');
+
+      if (namedX && namedY) {
+        resolved.x = resolved.x ?? namedX;
+        resolved.y = resolved.y ?? namedY;
+      } else {
+        resolved.x = resolved.x ?? keys[0];
+        resolved.y = resolved.y ?? keys[1];
+      }
+    }
+
+    // Implicit series/size detection
+    if (!resolved.series) {
+      resolved.series = findKey('series');
+      // Capture series title even with implicit detection
+      if (resolved.series && seriesConfig?.title) {
+        resolved.seriesTitle = seriesConfig.title;
+      }
+    }
+    if (!resolved.size) {
+      resolved.size = findKey('size') ?? keys[2]; // default to third column
+    }
+    // Capture size title even with implicit detection
+    if (resolved.size && !resolved.sizeTitle && sizeConfig?.title) {
+      resolved.sizeTitle = sizeConfig.title;
+    }
+
+  } 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

package/src/csv.js

@@ -68,9 +68,15 @@ export function parseCSV(content) {
 
     headers.forEach((header, index) => {
       const value = values[index] ?? '';
-      // Try to parse as number, keep as string if not numeric
-      const num = parseFloat(value);
-      row[header] = isNaN(num) ? value : num;
+      // Empty cells become null (missing data)
+      if (value === '') {
+        row[header] = null;
+      } else {
+        // Only parse as number if the entire value is numeric
+        // This prevents dates like "2024-06-01" from becoming 2024
+        const isNumeric = /^-?\d+(\.\d+)?$/.test(value);
+        row[header] = isNumeric ? parseFloat(value) : value;
+      }
     });
 
     rows.push(row);

package/src/renderers/bubble.js

@@ -0,0 +1,269 @@
+import { slugify, escapeHtml, renderDownloadLink } from '../utils.js';
+import { formatNumber } from '../formatters.js';
+import { getAxisMax, getAxisMin, getAxisTitle, getAxisFormat, getRotateLabels } from '../config.js';
+
+/**
+ * Render a bubble chart (categorical X axis, continuous Y, variable dot sizes)
+ * Like scatter but with categorical X axis and always variable-sized dots
+ * @param {Object} config - Chart configuration (normalized)
+ * @param {string} config.title - Chart title
+ * @param {string} [config.subtitle] - Chart subtitle
+ * @param {Object[]} config.data - Chart data (x, y, size, optional series columns)
+ * @param {Object} [config.y] - Y-axis configuration { max, min, title, format }
+ * @param {Object} [config.size] - Size configuration { title }
+ * @param {string[]} [config.legend] - Legend labels for series
+ * @param {boolean} [config.animate] - Enable animations
+ * @param {Object} [config._columns] - Resolved column mappings
+ * @returns {string} - HTML string
+ */
+export function renderBubble(config) {
+  const { title, subtitle, data, legend, animate, format, id, downloadData, downloadDataUrl, icons, _columns } = config;
+
+  // Get axis-specific format configs
+  const fmtY = getAxisFormat(config, 'y');
+
+  if (!data || data.length === 0) {
+    return `<!-- Bubble chart: no data provided -->`;
+  }
+
+  const animateClass = animate ? ' chart-animate' : '';
+  const rotateLabels = getRotateLabels(config, config.id);
+
+  // Use resolved columns if available, otherwise fall back to implicit detection
+  const keys = Object.keys(data[0]);
+  const findKey = name => keys.find(k => k.toLowerCase() === name) || null;
+
+  let xKey, yKey, sizeKey, seriesKey;
+
+  if (_columns) {
+    xKey = _columns.x;
+    yKey = _columns.y;
+    sizeKey = _columns.size;
+    seriesKey = _columns.series;
+  } else {
+    const namedX = findKey('x');
+    const namedY = findKey('y');
+    xKey = namedX || keys[0];
+    yKey = namedY || keys[1];
+    sizeKey = findKey('size') || keys[2];
+    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;
+
+  // Axis titles
+  const xAxisTitle = getAxisTitle(config, 'x', '');
+  const yAxisTitle = getAxisTitle(config, 'y', '');
+
+  // Map data to dots
+  const dots = data.map(item => ({
+    x: item[xKey] ?? '',
+    y: typeof item[yKey] === 'number' ? item[yKey] : parseFloat(item[yKey]) || 0,
+    rawSize: sizeKey ? (typeof item[sizeKey] === 'number' ? item[sizeKey] : parseFloat(item[sizeKey]) || 0) : null,
+    series: seriesKey ? (item[seriesKey] ?? 'default') : 'default'
+  }));
+
+  // Get unique X categories (maintain data order)
+  const seenCategories = new Set();
+  const categories = [];
+  dots.forEach(d => {
+    if (!seenCategories.has(d.x)) {
+      seenCategories.add(d.x);
+      categories.push(d.x);
+    }
+  });
+
+  // Size normalization: non-positive values get minimum size (scale 0)
+  if (sizeKey) {
+    const sizeValues = dots.map(d => d.rawSize).filter(v => v > 0);
+    const minSizeVal = sizeValues.length ? Math.min(...sizeValues) : 1;
+    const maxSizeVal = sizeValues.length ? Math.max(...sizeValues) : 1;
+    const sizeRange = maxSizeVal - minSizeVal;
+
+    dots.forEach(dot => {
+      if (dot.rawSize <= 0 || sizeRange === 0) {
+        dot.sizeScale = 0;
+      } else {
+        dot.sizeScale = (dot.rawSize - minSizeVal) / sizeRange;
+      }
+    });
+  }
+
+  // Calculate Y bounds
+  const yValues = dots.map(d => d.y);
+  const dataMaxY = Math.max(...yValues);
+  const dataMinY = Math.min(...yValues);
+
+  const calcMaxY = getAxisMax(config, 'y') ?? dataMaxY;
+  const calcMinY = getAxisMin(config, 'y') ?? (dataMinY < 0 ? dataMinY : 0);
+  const rangeY = calcMaxY - calcMinY;
+
+  const hasNegativeY = calcMinY < 0;
+  const zeroPctY = hasNegativeY ? ((0 - calcMinY) / rangeY) * 100 : 0;
+
+  // Get unique series
+  const seriesSet = new Set(dots.map(d => d.series));
+  const seriesList = Array.from(seriesSet);
+  const seriesIndex = new Map(seriesList.map((s, i) => [s, i]));
+
+  // Helper to get icon for a series
+  const getSeriesIcon = (seriesName) => {
+    if (!icons) return null;
+    if (typeof icons === 'string') return icons;
+    return icons[seriesName] ?? null;
+  };
+
+  const negativeClass = hasNegativeY ? ' has-negative-y' : '';
+  const idClass = id ? ` chart-${id}` : '';
+  const rotateClass = rotateLabels ? ' rotate-labels' : '';
+  let html = `<figure class="chart chart-bubble${animateClass}${negativeClass}${idClass}${rotateClass}">`;
+
+  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: ${zeroPctY.toFixed(2)}%"` : '';
+  html += `<div class="chart-y-axis"${yAxisStyle}>`;
+  html += `<span class="axis-label">${formatNumber(calcMaxY, fmtY) || calcMaxY}</span>`;
+  const midLabelY = hasNegativeY ? 0 : Math.round((calcMaxY + calcMinY) / 2);
+  html += `<span class="axis-label">${formatNumber(midLabelY, fmtY) || midLabelY}</span>`;
+  html += `<span class="axis-label">${formatNumber(calcMinY, fmtY) || calcMinY}</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;
+  const defaultDelay = 0.08;
+  const delayStep = dots.length > 1 ? Math.min(defaultDelay, maxStagger / (dots.length - 1)) : 0;
+  const styleVars = [`--delay-step: ${delayStep.toFixed(3)}s`];
+  if (hasNegativeY) styleVars.push(`--zero-position: ${zeroPctY.toFixed(2)}%`);
+  html += `<div class="dot-chart" style="${styleVars.join('; ')}">`;
+  html += `<div class="dot-field">`;
+
+  // Group dots by category
+  const dotsByCategory = new Map();
+  categories.forEach(cat => dotsByCategory.set(cat, []));
+  dots.forEach((dot, i) => {
+    dotsByCategory.get(dot.x).push({ ...dot, originalIndex: i });
+  });
+
+  const fmtSize = format?.size || {};
+
+  // Render dots by category column
+  categories.forEach((category, colIndex) => {
+    const categoryDots = dotsByCategory.get(category);
+
+    html += `<div class="dot-col" style="--col-index: ${colIndex}">`;
+
+    categoryDots.forEach((dot) => {
+      const yPct = rangeY > 0 ? ((dot.y - calcMinY) / rangeY) * 100 : 0;
+      const colorIndex = seriesIndex.get(dot.series) + 1;
+      const colorClass = `chart-color-${colorIndex}`;
+      const seriesClass = `chart-series-${slugify(dot.series)}`;
+      const icon = getSeriesIcon(dot.series);
+      const iconClass = icon ? ' has-icon' : '';
+
+      // Build tooltip
+      let tooltipText = `${category}: ${formatNumber(dot.y, fmtY) || dot.y}`;
+      if (seriesKey && dot.series !== 'default') {
+        tooltipText = `${dot.series} - ${tooltipText}`;
+      }
+      if (sizeKey && dot.rawSize !== null) {
+        const fmtSizeVal = formatNumber(dot.rawSize, fmtSize) || dot.rawSize;
+        tooltipText += ` [${fmtSizeVal}]`;
+      }
+
+      // Build style string with size scale
+      let styleStr = `--value: ${yPct.toFixed(2)}%; --dot-index: ${dot.originalIndex}`;
+      if (sizeKey) {
+        styleStr += `; --size-scale: ${dot.sizeScale.toFixed(4)}`;
+      }
+
+      html += `<div class="dot ${colorClass} ${seriesClass}${iconClass}" `;
+      html += `style="${styleStr}" `;
+      html += `title="${escapeHtml(tooltipText)}"`;
+      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">`;
+  categories.forEach(category => {
+    html += `<span class="dot-label">${escapeHtml(category)}</span>`;
+  });
+  if (xAxisTitle) {
+    html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
+  }
+  html += `</div>`;
+
+  html += `</div>`; // close chart-scroll
+  html += `</div>`; // close chart-body
+
+  // Legend (if multiple series or legendTitle specified)
+  if (seriesList.length > 1 || legend || legendTitle) {
+    const legendLabels = legend ?? seriesList;
+    if (legendTitle) {
+      html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
+    }
+    html += `<div class="chart-legend">`;
+    seriesList.forEach((series, i) => {
+      const label = legendLabels[i] ?? series;
+      const colorClass = `chart-color-${i + 1}`;
+      const seriesClass = `chart-series-${slugify(series)}`;
+      const icon = getSeriesIcon(series);
+      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>`;
+  }
+
+  // Size legend (when sizeTitle is specified and size column exists)
+  if (sizeTitle && sizeKey) {
+    const sizeValues = dots.map(d => d.rawSize).filter(v => v > 0);
+    const minSizeVal = sizeValues.length ? Math.min(...sizeValues) : 0;
+    const maxSizeVal = sizeValues.length ? Math.max(...sizeValues) : 0;
+    const fmtSizeLegend = format?.size || format || {};
+    const minFormatted = formatNumber(minSizeVal, fmtSizeLegend) || minSizeVal;
+    const maxFormatted = formatNumber(maxSizeVal, fmtSizeLegend) || maxSizeVal;
+
+    html += `<div class="chart-size-legend">`;
+    html += `<span class="chart-legend-title">${escapeHtml(sizeTitle)}</span>`;
+    html += `<div class="size-legend-items">`;
+    html += `<span class="size-legend-item"><span class="size-dot size-dot-min"></span><span class="size-value">${minFormatted}</span></span>`;
+    html += `<span class="size-legend-item"><span class="size-dot size-dot-max"></span><span class="size-value">${maxFormatted}</span></span>`;
+    html += `</div>`;
+    html += `</div>`;
+  }
+
+  html += renderDownloadLink(downloadDataUrl, downloadData);
+  html += `</figure>`;
+
+  return html;
+}

package/src/renderers/dot.js

@@ -1,6 +1,6 @@
 import { slugify, escapeHtml, getLabelKey, getSeriesNames, renderDownloadLink } from '../utils.js';
 import { formatNumber } from '../formatters.js';
-import { getAxisMax, getAxisMin, getAxisFormat, getRotateLabels } from '../config.js';
+import { getAxisMax, getAxisMin, getAxisFormat, getAxisTitle, getRotateLabels } from '../config.js';
 
 /**
  * Render a categorical dot chart (columns with dots at different Y positions)
@@ -16,7 +16,15 @@ import { getAxisMax, getAxisMin, getAxisFormat, getRotateLabels } from '../confi
  * @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, chartType = 'dot', _columns } = 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 showLines: false, or use "bubble" for sized dots.'
+    );
+  }
 
   if (!data || data.length === 0) {
     return `<!-- Dot chart: no data provided -->`;
@@ -34,19 +42,25 @@ export function renderDot(config) {
     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
+  // 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
+  // Calculate min and max values for Y scaling (exclude null values)
   const allValues = data.flatMap(row =>
-    seriesKeys.map(key => {
-      const val = row[key];
-      return typeof val === 'number' ? val : parseFloat(val) || 0;
-    })
-  );
+    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);
 
@@ -62,6 +76,7 @@ export function renderDot(config) {
   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}">`;
 
@@ -82,6 +97,9 @@ export function renderDot(config) {
   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
@@ -97,6 +115,7 @@ export function renderDot(config) {
   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) => {
@@ -105,8 +124,13 @@ export function renderDot(config) {
       for (let colIndex = 0; colIndex < data.length - 1; colIndex++) {
         const val1 = data[colIndex][key];
         const val2 = data[colIndex + 1][key];
-        const v1 = typeof val1 === 'number' ? val1 : parseFloat(val1) || 0;
-        const v2 = typeof val2 === 'number' ? val2 : parseFloat(val2) || 0;
+        // 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;
@@ -119,30 +143,38 @@ export function renderDot(config) {
     });
   }
 
-  // Each row becomes a column with dots for each series
-  if (showDots) {
-    data.forEach((row, colIndex) => {
-      const label = row[labelKey] ?? '';
-
-      html += `<div class="dot-col" style="--col-index: ${colIndex}">`;
+  // 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] ?? '';
 
-      seriesKeys.forEach((key, i) => {
-        const val = row[key];
-        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);
+    html += `<div class="dot-col" style="--col-index: ${colIndex}">`;
 
-        html += `<div class="dot ${colorClass} ${seriesClass}" `;
-        html += `style="--value: ${yPct.toFixed(2)}%" `;
-        html += `title="${escapeHtml(tooltipLabel)}: ${formatNumber(value, yFormat) || value}"`;
-        html += `></div>`;
-      });
+    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
@@ -153,6 +185,9 @@ export function renderDot(config) {
     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
@@ -169,7 +204,13 @@ export function renderDot(config) {
       const label = getSeriesLabel(key, i);
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
-      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
+      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>`;
   }

package/src/renderers/index.js

@@ -5,6 +5,8 @@ import { renderDot } from './dot.js';
 import { renderScatter } from './scatter.js';
 import { renderSankey } from './sankey.js';
 import { renderLine } from './line.js';
+import { renderTimeseries } from './timeseries.js';
+import { renderBubble } from './bubble.js';
 
 export const renderers = {
   'stacked-bar': renderStackedBar,
@@ -13,7 +15,9 @@ export const renderers = {
   'dot': renderDot,
   'scatter': renderScatter,
   'sankey': renderSankey,
-  'line': renderLine
+  'line': renderLine,
+  'timeseries': renderTimeseries,
+  'bubble': renderBubble
 };
 
-export { renderStackedBar, renderStackedColumn, renderDonut, renderDot, renderScatter, renderSankey, renderLine };
+export { renderStackedBar, renderStackedColumn, renderDonut, renderDot, renderScatter, renderSankey, renderLine, renderTimeseries, renderBubble };

package/src/renderers/line.js

@@ -1,5 +1,6 @@
 import { renderDot } from './dot.js';
 
 export function renderLine(config) {
-  return renderDot({ ...config, connectDots: true, chartType: 'line' });
+  const connectDots = config.showLines !== false; // default true
+  return renderDot({ ...config, connectDots, chartType: 'line' });
 }

package/src/renderers/scatter.js

@@ -18,7 +18,7 @@ import { getAxisMax, getAxisMin, getAxisTitle, getAxisFormat } from '../config.j
  * @returns {string} - HTML string
  */
 export function renderScatter(config) {
-  const { title, subtitle, data, legend, animate, format, id, downloadData, downloadDataUrl, proportional, _columns } = config;
+  const { title, subtitle, data, legend, animate, format, id, downloadData, downloadDataUrl, proportional, icons, _columns } = config;
 
   // Get axis-specific format configs (normalized config provides x.format/y.format)
   const fmtX = getAxisFormat(config, 'x');
@@ -115,6 +115,13 @@ export function renderScatter(config) {
   const seriesList = Array.from(seriesSet);
   const seriesIndex = new Map(seriesList.map((s, i) => [s, i]));
 
+  // Helper to get icon for a series
+  const getSeriesIcon = (seriesName) => {
+    if (!icons) return null;
+    if (typeof icons === 'string') return icons;
+    return icons[seriesName] ?? null;
+  };
+
   const negativeClasses = (hasNegativeX ? ' has-negative-x' : '') + (hasNegativeY ? ' has-negative-y' : '');
   const proportionalClass = proportional ? ' chart-proportional' : '';
   const idClass = id ? ` chart-${id}` : '';
@@ -159,6 +166,8 @@ export function renderScatter(config) {
     const seriesClass = `chart-series-${slugify(dot.series)}`;
     const fmtXVal = formatNumber(dot.x, fmtX) || dot.x;
     const fmtYVal = formatNumber(dot.y, fmtY) || dot.y;
+    const icon = getSeriesIcon(dot.series);
+    const iconClass = icon ? ' has-icon' : '';
 
     // Build tooltip with optional size value
     let tooltipText = dot.label ? `${dot.label}: (${fmtXVal}, ${fmtYVal})` : `(${fmtXVal}, ${fmtYVal})`;
@@ -173,10 +182,14 @@ export function renderScatter(config) {
       styleStr += `; --size-scale: ${dot.sizeScale.toFixed(4)}`;
     }
 
-    html += `<div class="dot ${colorClass} ${seriesClass}" `;
+    html += `<div class="dot ${colorClass} ${seriesClass}${iconClass}" `;
     html += `style="${styleStr}" `;
     html += `title="${escapeHtml(tooltipText)}"`;
-    html += `></div>`;
+    html += `>`;
+    if (icon) {
+      html += `<i class="${escapeHtml(icon)}"></i>`;
+    }
+    html += `</div>`;
   });
 
   html += `</div>`;
@@ -206,7 +219,13 @@ export function renderScatter(config) {
       const label = legendLabels[i] ?? series;
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(series)}`;
-      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
+      const icon = getSeriesIcon(series);
+      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>`;
   }