mviz 1.6.0 → 1.6.1

package/dist/charts/bubble.d.ts

@@ -3,11 +3,11 @@
  */
 import type { ChartSpec } from '../types.js';
 /**
- * Build ECharts options for a bubble chart
+ * Build ECharts options for a bubble chart.
  */
 export declare function buildBubbleOptions(spec: ChartSpec): Record<string, unknown>;
 /**
- * Generate a bubble chart with JS function for symbol size
+ * Generate a bubble chart.
  */
 declare function generateBubble(spec: ChartSpec): string;
 export { generateBubble };

package/dist/charts/bubble.js

@@ -1,158 +1,200 @@
 /**
  * Bubble chart generator
  */
-import { FONT_SIZE_TINY, ECHARTS_CDN, FONT_STACK, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
-import { serializeOption } from '../core/serializer.js';
+import { FONT_SIZE_TINY, DEFAULT_CHART_HEIGHT, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
+import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
+import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency } from '../core/formatting.js';
+import { buildPointLabelConfig, groupDataBySeries, buildSeriesLegend } from '../core/chart-helpers.js';
+/** Min/max bubble pixel sizes */
+const BUBBLE_SIZE_MIN = 10;
+const BUBBLE_SIZE_MAX = 50;
+/** Bubble opacity */
+const BUBBLE_OPACITY = 0.55;
+/** Label sits at index 4 in bubble point arrays: [x, y, rawSize, scaledSize, label?] */
+const BUBBLE_LABEL_INDEX = 4;
 /**
- * Build ECharts options for a bubble chart
+ * Scale a raw size value to a pixel diameter.
+ */
+function scaleBubbleSize(raw, minSize, sizeRange) {
+    return BUBBLE_SIZE_MIN + ((raw - minSize) / sizeRange) * (BUBBLE_SIZE_MAX - BUBBLE_SIZE_MIN);
+}
+/**
+ * Compute global min/max/range for size field across all data.
+ */
+function computeSizeRange(data, sizeField) {
+    const sizes = data.map((d) => (typeof d[sizeField] === 'number' ? d[sizeField] : 1));
+    const min = sizes.length > 0 ? Math.min(...sizes) : 1;
+    const max = sizes.length > 0 ? Math.max(...sizes) : 1;
+    return { min, range: max - min || 1 };
+}
+/**
+ * Detect whether a field contains category (string) data and extract unique values.
+ */
+function detectAxisCategories(data, field) {
+    const first = data.length > 0 ? data[0][field] : null;
+    const isCategory = typeof first === 'string';
+    const categories = isCategory
+        ? [...new Set(data.map((d) => String(d[field] ?? '')))]
+        : [];
+    return { isCategory, categories };
+}
+/**
+ * Build a single bubble data point array: [x, y, rawSize, scaledSize, label?]
+ */
+function buildBubblePoint(d, ctx) {
+    const s = typeof d[ctx.sizeField] === 'number' ? d[ctx.sizeField] : 1;
+    const scaledSize = scaleBubbleSize(s, ctx.minSize, ctx.sizeRange);
+    const xVal = ctx.xIsCategory ? ctx.xCategories.indexOf(String(d[ctx.xField] ?? '')) : (d[ctx.xField] ?? 0);
+    const yVal = ctx.yIsCategory ? ctx.yCategories.indexOf(String(d[ctx.yField] ?? '')) : (d[ctx.yField] ?? 0);
+    const point = [xVal, yVal, s, scaledSize];
+    if (ctx.labelField)
+        point.push(String(d[ctx.labelField] ?? ''));
+    return point;
+}
+/**
+ * Build series list and legend data for bubble chart.
+ */
+function buildBubbleSeries(data, ctx, seriesField, showLabels, palette, colors) {
+    const labelConfig = showLabels && ctx.labelField
+        ? buildPointLabelConfig(BUBBLE_LABEL_INDEX, colors)
+        : undefined;
+    const pointBuilder = (d) => buildBubblePoint(d, ctx);
+    if (seriesField) {
+        const groups = groupDataBySeries(data, seriesField, pointBuilder);
+        const legendData = [...groups.keys()];
+        const seriesList = legendData.map((name, idx) => {
+            const obj = {
+                type: 'scatter',
+                name,
+                data: groups.get(name),
+                symbolSize: { _js_: 'function(val) { return val[3] || 20; }' },
+                itemStyle: { color: palette[idx % palette.length], opacity: BUBBLE_OPACITY },
+            };
+            if (labelConfig)
+                obj.label = labelConfig;
+            return obj;
+        });
+        return { seriesList, legendData };
+    }
+    const bubbleData = data.map(pointBuilder);
+    const obj = {
+        type: 'scatter',
+        data: bubbleData,
+        symbolSize: { _js_: 'function(val) { return val[3] || 20; }' },
+        itemStyle: { color: palette[0], opacity: BUBBLE_OPACITY },
+    };
+    if (labelConfig)
+        obj.label = labelConfig;
+    return { seriesList: [obj], legendData: [] };
+}
+/**
+ * Build tooltip config for bubble chart.
+ */
+function buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors) {
+    const labelIdx = ctx.labelField ? BUBBLE_LABEL_INDEX : -1;
+    const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale);
+    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale);
+    const seriesNameLine = seriesField
+        ? "if (params.seriesName) result += '<strong>' + params.seriesName + '</strong><br/>';"
+        : '';
+    const formatterJs = `function(params) {
+    var d = params.value || params.data;
+    var result = '';
+    ${seriesNameLine}
+    ${labelIdx >= 0 ? "var label = d[" + labelIdx + "]; if (label) result += '<strong>' + label + '</strong><br/>';" : ''}
+    var value = d[0]; result += ${JSON.stringify(ctx.xField)} + ': ' + ${xFormatExpr} + '<br/>';
+    var value = d[1]; result += ${JSON.stringify(ctx.yField)} + ': ' + ${yFormatExpr} + '<br/>';
+    result += ${JSON.stringify(ctx.sizeField)} + ': ' + d[2];
+    return result;
+  }`;
+    return {
+        trigger: 'item',
+        backgroundColor: colors.paper,
+        borderColor: colors.border,
+        textStyle: { color: colors.text },
+        formatter: { _js_: formatterJs },
+    };
+}
+/**
+ * Build a single axis config for bubble chart.
+ */
+function buildBubbleAxis(field, isCategory, categories, formatter, nameGap, colors) {
+    return {
+        type: isCategory ? 'category' : 'value',
+        data: isCategory ? categories : undefined,
+        name: field,
+        nameLocation: 'middle',
+        nameGap,
+        nameTextStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
+        scale: !isCategory,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+            color: colors.textSecondary,
+            ...(formatter && { formatter }),
+        },
+        splitLine: { lineStyle: { color: colors.border, type: [2, 3], opacity: 0.6 } },
+    };
+}
+/**
+ * Build ECharts options for a bubble chart.
  */
 export function buildBubbleOptions(spec) {
     const data = (spec.data ?? []);
     const xField = spec.x ?? 'x';
     const yField = spec.y ?? 'y';
     const sizeField = spec.size ?? 'size';
+    const seriesField = spec.series;
     const labelField = spec.label;
+    const showLabels = spec.showLabels;
     const theme = (spec.theme ?? 'light');
     const colors = getThemeColors(theme);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
-    // Auto-detect axis types from data
-    const firstX = data.length > 0 ? data[0][xField] : null;
-    const firstY = data.length > 0 ? data[0][yField] : null;
-    const xIsCategory = typeof firstX === 'string';
-    const yIsCategory = typeof firstY === 'string';
-    // Extract unique categories if needed
-    let xCategories = [];
-    let yCategories = [];
-    if (xIsCategory) {
-        xCategories = [...new Set(data.map((d) => String(d[xField] ?? '')))];
-    }
-    if (yIsCategory) {
-        yCategories = [...new Set(data.map((d) => String(d[yField] ?? '')))];
-    }
-    // Find min/max for size scaling
-    const sizes = data.map((d) => (typeof d[sizeField] === 'number' ? d[sizeField] : 1));
-    const minSize = sizes.length > 0 ? Math.min(...sizes) : 1;
-    const maxSize = sizes.length > 0 ? Math.max(...sizes) : 1;
-    const sizeRange = maxSize - minSize || 1;
-    // Build bubble data with scaled sizes
-    // For category axes, convert string values to indices
-    const bubbleData = data.map((d) => {
-        const s = typeof d[sizeField] === 'number' ? d[sizeField] : 1;
-        const scaledSize = 10 + ((s - minSize) / sizeRange) * 40;
-        const xVal = xIsCategory ? xCategories.indexOf(String(d[xField] ?? '')) : (d[xField] ?? 0);
-        const yVal = yIsCategory ? yCategories.indexOf(String(d[yField] ?? '')) : (d[yField] ?? 0);
-        const point = [xVal, yVal, s, scaledSize];
-        if (labelField)
-            point.push(String(d[labelField] ?? ''));
-        return point;
-    });
-    // Build tooltip formatter with label support
-    const labelIdx = labelField ? 4 : -1;
-    const tooltipFormatterJs = `function(params) {
-    var d = params.value || params.data;
-    var result = '';
-    ${labelIdx >= 0 ? "var label = d[" + labelIdx + "]; if (label) result += '<strong>' + label + '</strong><br/>';" : ''}
-    result += '${xField}' + ': ' + d[0] + '<br/>';
-    result += '${yField}' + ': ' + d[1] + '<br/>';
-    result += '${sizeField}' + ': ' + d[2];
-    return result;
-  }`;
-    return {
+    // Infer axis formats
+    const xSample = data.length > 0 && data[0] ? data[0][xField] ?? 0 : 0;
+    const ySample = data.length > 0 && data[0] ? data[0][yField] ?? 0 : 0;
+    const xFormat = spec.xFormat ?? inferFormat(xField, xSample);
+    const yFormat = spec.yFormat ?? inferFormat(yField, ySample);
+    const currency = resolveCurrency(spec.currency);
+    // Build context for point construction
+    const xAxis = detectAxisCategories(data, xField);
+    const yAxis = detectAxisCategories(data, yField);
+    const { min: minSize, range: sizeRange } = computeSizeRange(data, sizeField);
+    const ctx = {
+        xField, yField, sizeField, labelField,
+        xIsCategory: xAxis.isCategory, yIsCategory: yAxis.isCategory,
+        xCategories: xAxis.categories, yCategories: yAxis.categories,
+        minSize, sizeRange,
+    };
+    // Build series and legend
+    const { seriesList, legendData } = buildBubbleSeries(data, ctx, seriesField, showLabels, palette, colors);
+    const hasLegend = seriesField && legendData.length > 1;
+    const option = {
         backgroundColor: 'transparent',
         animation: false,
         color: palette,
-        tooltip: {
-            trigger: 'item',
-            backgroundColor: colors.paper,
-            borderColor: colors.border,
-            textStyle: { color: colors.text },
-            formatter: { _js_: tooltipFormatterJs },
-        },
+        tooltip: buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors),
         grid: {
-            left: '6%',
-            right: '8%',
-            top: '12%',
-            bottom: '14%',
-            containLabel: true,
-        },
-        xAxis: {
-            type: xIsCategory ? 'category' : 'value',
-            data: xIsCategory ? xCategories : undefined,
-            name: xField,
-            nameLocation: 'middle',
-            nameGap: 24,
-            nameTextStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
-            scale: !xIsCategory,
-            axisLine: { show: false },
-            axisTick: { show: false },
-            axisLabel: { color: colors.textSecondary },
-            splitLine: { lineStyle: { color: colors.border, type: [2, 3], opacity: 0.6 } },
-        },
-        yAxis: {
-            type: yIsCategory ? 'category' : 'value',
-            data: yIsCategory ? yCategories : undefined,
-            name: yField,
-            nameLocation: 'middle',
-            nameGap: 32,
-            nameTextStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
-            scale: !yIsCategory,
-            axisLine: { show: false },
-            axisTick: { show: false },
-            axisLabel: { color: colors.textSecondary },
-            splitLine: { lineStyle: { color: colors.border, type: [2, 3], opacity: 0.6 } },
+            left: '6%', right: '8%',
+            top: hasLegend ? '14%' : '12%',
+            bottom: '14%', containLabel: true,
         },
-        series: [
-            {
-                type: 'scatter',
-                data: bubbleData,
-                symbolSize: { _js_: 'function(val) { return val[3] || 20; }' },
-                itemStyle: { color: palette[0], opacity: 0.55 },
-            },
-        ],
+        xAxis: buildBubbleAxis(xField, xAxis.isCategory, xAxis.categories, getAxisFormatterJs(xFormat, currency.symbol, currency.locale), 24, colors),
+        yAxis: buildBubbleAxis(yField, yAxis.isCategory, yAxis.categories, getAxisFormatterJs(yFormat, currency.symbol, currency.locale), 32, colors),
+        series: seriesList,
     };
+    if (hasLegend) {
+        option.legend = buildSeriesLegend(legendData, colors);
+    }
+    return option;
 }
 /**
- * Generate a bubble chart with JS function for symbol size
+ * Generate a bubble chart.
  */
 function generateBubble(spec) {
-    const option = buildBubbleOptions(spec);
-    const title = spec.title ?? '';
-    const theme = (spec.theme ?? 'light');
-    const colors = getThemeColors(theme);
-    const optionJson = serializeOption(option);
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>${title}</title>
-  <script src="${ECHARTS_CDN}"></script>
-  <style>
-    * { box-sizing: border-box; }
-    html, body {
-      margin: 0; padding: 0; width: 100%; height: 100%;
-      background-color: ${colors.background}; font-family: ${FONT_STACK};
-    }
-    .container { padding: 20px; width: 100%; height: 100%; display: flex; flex-direction: column; }
-    .red-line { width: 100%; height: 3px; background-color: ${colors.accent}; margin-bottom: 12px; }
-    h2 { font-family: ${FONT_STACK}; color: ${colors.text}; font-size: 18px; font-weight: 900; margin: 0 0 4px 0; }
-    #chart { width: 100%; flex: 1; min-height: 300px; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="red-line"></div>
-    <h2>${title}</h2>
-    <div id="chart"></div>
-  </div>
-  <script>
-    var chart = echarts.init(document.getElementById('chart'));
-    var option = ${optionJson};
-    chart.setOption(option);
-    window.addEventListener('resize', function() { chart.resize(); });
-  </script>
-</body>
-</html>`;
+    const height = typeof spec.height === 'number' ? spec.height : DEFAULT_CHART_HEIGHT;
+    return wrapHtml('chart', buildBubbleOptions(spec), '', '100%', height);
 }
 // Register the chart
 registerChart('bubble')(generateBubble);

package/dist/charts/scatter.js

@@ -5,6 +5,20 @@ import { SCATTER_SYMBOL_SIZE, FONT_SIZE_TINY, DEFAULT_CHART_HEIGHT, getThemeColo
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
 import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency } from '../core/formatting.js';
+import { buildPointLabelConfig, groupDataBySeries, buildSeriesLegend } from '../core/chart-helpers.js';
+/** Scatter point opacity */
+const SCATTER_OPACITY = 0.75;
+/** Label sits at index 2 in scatter point arrays: [x, y, label?] */
+const SCATTER_LABEL_INDEX = 2;
+/**
+ * Build a scatter data point: [x, y, label?]
+ */
+function buildScatterPoint(d, xField, yField, labelField) {
+    const point = [d[xField] ?? 0, d[yField] ?? 0];
+    if (labelField)
+        point.push(String(d[labelField] ?? ''));
+    return point;
+}
 /**
  * Build ECharts options for a scatter plot
  */
@@ -14,6 +28,7 @@ export function buildScatterOptions(spec) {
     const yField = spec.y ?? 'y';
     const seriesField = spec.series;
     const labelField = spec.label;
+    const showLabels = spec.showLabels;
     const theme = (spec.theme ?? 'light');
     const colors = getThemeColors(theme);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
@@ -25,48 +40,41 @@ export function buildScatterOptions(spec) {
     const currency = resolveCurrency(spec.currency);
     const xAxisFormatter = getAxisFormatterJs(xFormat, currency.symbol, currency.locale);
     const yAxisFormatter = getAxisFormatterJs(yFormat, currency.symbol, currency.locale);
+    // Label config for persistent point labels
+    const labelConfig = showLabels && labelField
+        ? buildPointLabelConfig(SCATTER_LABEL_INDEX, colors)
+        : undefined;
     // Build series - either single series or grouped by seriesField
     let seriesList;
     let legendData = [];
+    const pointBuilder = (d) => buildScatterPoint(d, xField, yField, labelField);
     if (seriesField) {
-        // Group data by the series field
-        const groups = new Map();
-        for (const d of data) {
-            const groupName = String(d[seriesField] ?? 'Unknown');
-            if (!groups.has(groupName)) {
-                groups.set(groupName, []);
-            }
-            const point = [d[xField] ?? 0, d[yField] ?? 0];
-            if (labelField)
-                point.push(String(d[labelField] ?? ''));
-            groups.get(groupName).push(point);
-        }
-        // Create a series for each group
+        const groups = groupDataBySeries(data, seriesField, pointBuilder);
         legendData = [...groups.keys()];
-        seriesList = legendData.map((name, idx) => ({
-            type: 'scatter',
-            name,
-            data: groups.get(name),
-            symbolSize: SCATTER_SYMBOL_SIZE,
-            itemStyle: { color: palette[idx % palette.length], opacity: 0.75 },
-        }));
-    }
-    else {
-        // Single series
-        const scatterData = data.map((d) => {
-            const point = [d[xField] ?? 0, d[yField] ?? 0];
-            if (labelField)
-                point.push(String(d[labelField] ?? ''));
-            return point;
-        });
-        seriesList = [
-            {
+        seriesList = legendData.map((name, idx) => {
+            const seriesObj = {
                 type: 'scatter',
-                data: scatterData,
+                name,
+                data: groups.get(name),
                 symbolSize: SCATTER_SYMBOL_SIZE,
-                itemStyle: { color: palette[0], opacity: 0.75 },
-            },
-        ];
+                itemStyle: { color: palette[idx % palette.length], opacity: SCATTER_OPACITY },
+            };
+            if (labelConfig)
+                seriesObj.label = labelConfig;
+            return seriesObj;
+        });
+    }
+    else {
+        const scatterData = data.map(pointBuilder);
+        const seriesObj = {
+            type: 'scatter',
+            data: scatterData,
+            symbolSize: SCATTER_SYMBOL_SIZE,
+            itemStyle: { color: palette[0], opacity: SCATTER_OPACITY },
+        };
+        if (labelConfig)
+            seriesObj.label = labelConfig;
+        seriesList = [seriesObj];
     }
     // Build tooltip formatter with label support and value formatting
     const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale);
@@ -129,12 +137,7 @@ export function buildScatterOptions(spec) {
     };
     // Add legend for multi-series
     if (seriesField && legendData.length > 1) {
-        option.legend = {
-            show: true,
-            data: legendData,
-            top: 0,
-            textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
-        };
+        option.legend = buildSeriesLegend(legendData, colors);
     }
     return option;
 }

package/dist/components/table.js

@@ -350,7 +350,10 @@ export function formatCell(value, colDef, themeColors, heatmapRanges, dumbbellRa
     if (colType === 'heatmap') {
         const range = heatmapRanges.get(colId);
         if (typeof rawValue === 'number' && range) {
-            const heatmapColors = colDef.heatmapColors ?? defaultHeatmapColors;
+            const baseColors = colDef.heatmapColors ?? defaultHeatmapColors;
+            const heatmapColors = colDef.higherIsBetter === false
+                ? [...baseColors].reverse()
+                : baseColors;
             const colorResult = calculateHeatmapColorWithContrast(rawValue, range.min, range.max, heatmapColors);
             bgColor = colorResult.bgColor;
             textColor = colorResult.textColor;

package/dist/core/chart-helpers.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Shared helpers for scatter-family charts (scatter, bubble).
+ *
+ * Consolidates series-grouping, label config, and legend patterns
+ * that were duplicated across scatter.ts and bubble.ts.
+ */
+import type { DataPoint, ThemeColors } from '../types.js';
+/**
+ * Build ECharts label config for persistent point labels.
+ * @param labelIndex - Index of the label value in the point array
+ */
+export declare function buildPointLabelConfig(labelIndex: number, colors: ThemeColors): Record<string, unknown>;
+/**
+ * Group data points by a series field, applying a point builder to each.
+ */
+export declare function groupDataBySeries<T>(data: DataPoint[], seriesField: string, buildPoint: (d: DataPoint) => T): Map<string, T[]>;
+/**
+ * Build ECharts legend config for multi-series charts.
+ */
+export declare function buildSeriesLegend(legendData: string[], colors: ThemeColors): Record<string, unknown>;
+//# sourceMappingURL=chart-helpers.d.ts.map

package/dist/core/chart-helpers.js

@@ -0,0 +1,46 @@
+/**
+ * Shared helpers for scatter-family charts (scatter, bubble).
+ *
+ * Consolidates series-grouping, label config, and legend patterns
+ * that were duplicated across scatter.ts and bubble.ts.
+ */
+import { FONT_SIZE_TINY } from './themes.js';
+/**
+ * Build ECharts label config for persistent point labels.
+ * @param labelIndex - Index of the label value in the point array
+ */
+export function buildPointLabelConfig(labelIndex, colors) {
+    return {
+        show: true,
+        formatter: { _js_: `function(params) { return params.value[${labelIndex}] || ""; }` },
+        position: 'right',
+        fontSize: FONT_SIZE_TINY,
+        color: colors.textSecondary,
+    };
+}
+/**
+ * Group data points by a series field, applying a point builder to each.
+ */
+export function groupDataBySeries(data, seriesField, buildPoint) {
+    const groups = new Map();
+    for (const d of data) {
+        const groupName = String(d[seriesField] ?? 'Unknown');
+        if (!groups.has(groupName)) {
+            groups.set(groupName, []);
+        }
+        groups.get(groupName).push(buildPoint(d));
+    }
+    return groups;
+}
+/**
+ * Build ECharts legend config for multi-series charts.
+ */
+export function buildSeriesLegend(legendData, colors) {
+    return {
+        show: true,
+        data: legendData,
+        top: 0,
+        textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
+    };
+}
+//# sourceMappingURL=chart-helpers.js.map

package/dist/core/index.d.ts

@@ -6,4 +6,5 @@ export * from './formatting.js';
 export * from './colors.js';
 export * from './exceptions.js';
 export * from './serializer.js';
+export * from './chart-helpers.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/core/index.js

@@ -6,4 +6,5 @@ export * from './formatting.js';
 export * from './colors.js';
 export * from './exceptions.js';
 export * from './serializer.js';
+export * from './chart-helpers.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mviz",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A chart & report builder designed for use by AI.",
   "type": "module",
   "main": "./dist/index.js",

package/schema/mviz.v1.schema.json

@@ -415,6 +415,10 @@
           "type": "string",
           "description": "Field name for point labels shown in tooltips"
         },
+        "showLabels": {
+          "type": "boolean",
+          "description": "Show persistent labels next to points (requires label field)"
+        },
         "title": {
           "type": "string"
         },
@@ -461,10 +465,18 @@
         "size": {
           "type": "string"
         },
+        "series": {
+          "type": "string",
+          "description": "Field name to group data points by (creates multiple colored series)"
+        },
         "label": {
           "type": "string",
           "description": "Field name for point labels shown in tooltips"
         },
+        "showLabels": {
+          "type": "boolean",
+          "description": "Show persistent labels next to points (requires label field)"
+        },
         "title": {
           "type": "string"
         },