@limetech/lime-elements 40.24.0 → 40.25.0

package/dist/esm/limel-chart.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
+import { r as registerInstance, c as createEvent, h, H as Host, f as forceUpdate, a as getElement } from './index-D3SUrFhp.js';
 import { g as getSupportedLocale, t as translations } from './translations--i932i_D.js';
-import { i as isNavigationKey, f as findNavigationTarget, a as findTabStop, N as NO_NAVIGATION_TARGET } from './keyboard-navigation-BF7IKmnG.js';
+import { i as isNavigationKey, f as findTabStop, a as findNavigationTarget, N as NO_NAVIGATION_TARGET } from './keyboard-navigation-DeMxdkNf.js';
 import './keycodes-DQ5DmW_Y.js';
 
 /*! *****************************************************************************
@@ -25328,7 +25328,7 @@ var tmpNotUsedArr = [];
 * specific language governing permissions and limitations
 * under the License.
 */
-var AXIS_TYPES = {
+var AXIS_TYPES$1 = {
   value: 1,
   category: 1,
   time: 1,
@@ -25344,7 +25344,7 @@ function determineAxisType(model) {
   // PENDING: Theoretically, a customized `Scale` is probably impossible, since
   // the interface of `Scale` does not guarantee stability. But we still literally
   // support it for backward compat, though type incorrect.
-  || !hasOwn(AXIS_TYPES, type) && !Scale.getClass(type)) {
+  || !hasOwn(AXIS_TYPES$1, type) && !Scale.getClass(type)) {
     type = 'value';
   }
   return type;
@@ -42059,7 +42059,7 @@ var axisDefault = {
  * @param axisName 'x' 'y' 'radius' 'angle' 'parallel' ...
  */
 function axisModelCreator(registers, axisName, BaseAxisModelClass, extraDefaultOption) {
-  each$3(AXIS_TYPES, function (v, axisType) {
+  each$3(AXIS_TYPES$1, function (v, axisType) {
     var defaultOption = merge(merge({}, axisDefault[axisType], true), extraDefaultOption, true);
     var AxisModel = /** @class */function (_super) {
       __extends$1(AxisModel, _super);
@@ -50188,12 +50188,21 @@ const WHOLE_TYPES = new Set([
     'doughnut',
     'ring',
 ]);
-const AXIS_INCREMENT_TYPES = new Set([
+/**
+ * Types that draw their values along an axis, against the texts of the items
+ * along another one.
+ */
+const AXIS_TYPES = new Set([
     'bar',
     'dot',
     'area',
     'line',
 ]);
+const STACK_TYPES = new Set([
+    'bar',
+    'area',
+    'line',
+]);
 /**
  * Whether the items of a chart of this type are parts of one whole.
  * @param type - the chart type
@@ -50207,7 +50216,21 @@ function isPartOfWhole(type) {
  * @param type - the chart type
  */
 function usesAxisIncrement(type) {
-    return AXIS_INCREMENT_TYPES.has(type);
+    return AXIS_TYPES.has(type);
+}
+/**
+ * Whether a chart of this type can draw `series`.
+ * @param type - the chart type
+ */
+function canDrawSeries(type) {
+    return AXIS_TYPES.has(type);
+}
+/**
+ * Whether a chart of this type can stack its `series` on each other.
+ * @param type - the chart type
+ */
+function canStack(type) {
+    return STACK_TYPES.has(type);
 }
 /**
  * Whether the item has a `[start, end]` range, or an `[x, y]` point in a
@@ -50779,11 +50802,123 @@ function findLocale(language) {
     return locales.get(language);
 }
 
+/**
+ * Lines up the items of the series by their text, since items of different
+ * series that have the same text belong to the same category. When a series
+ * has several items with the same text, its second item with that text lines
+ * up with the second one of the other series, and so on.
+ * @param series - the series
+ */
+function alignSeries(series) {
+    const categories = [];
+    const placesOfTexts = new Map();
+    const placedSeries = series.map((current) => {
+        var _a;
+        const timesSeen = new Map();
+        return ((_a = current.items) !== null && _a !== void 0 ? _a : []).map((item) => {
+            var _a, _b;
+            const occurrence = (_a = timesSeen.get(item.text)) !== null && _a !== void 0 ? _a : 0;
+            timesSeen.set(item.text, occurrence + 1);
+            const places = (_b = placesOfTexts.get(item.text)) !== null && _b !== void 0 ? _b : [];
+            placesOfTexts.set(item.text, places);
+            if (occurrence === places.length) {
+                places.push(categories.length);
+                categories.push(item.text);
+            }
+            return { item: item, index: places[occurrence] };
+        });
+    });
+    return {
+        categories: categories,
+        series: series.map((current, index) => {
+            const itemsByCategory = new Map(placedSeries[index].map((placed) => [placed.index, placed.item]));
+            return {
+                text: current.text,
+                color: current.color,
+                items: categories.map((_, category) => itemsByCategory.get(category)),
+            };
+        }),
+    };
+}
+/**
+ * The item at a position, if there is one.
+ * @param grid - the series
+ * @param position - where the item is
+ */
+function getItemAt(grid, position) {
+    var _a;
+    return (_a = grid.series[position.series]) === null || _a === void 0 ? void 0 : _a.items[position.index];
+}
+/**
+ * The series that has an item at a place on the axis and is nearest to a
+ * series: the series itself when it has an item there, otherwise the closest
+ * one, and the earlier of two that are as close.
+ * @param grid - the series
+ * @param position - the place on the axis, and the series to start from
+ */
+function getNearestSeries(grid, position) {
+    const distance = (series) => Math.abs(series - position.series);
+    const [nearest] = [...grid.series.keys()]
+        .filter((series) => getItemAt(grid, Object.assign(Object.assign({}, position), { series: series })))
+        .sort((a, b) => distance(a) - distance(b));
+    return nearest;
+}
+/**
+ * The items of every series, in no particular order.
+ * @param grid - the series
+ */
+function getAllItems(grid) {
+    return grid.series.flatMap((series) => series.items.filter((item) => item !== undefined));
+}
+/**
+ * The items that the value axis has to reach: every item, or, when the
+ * series are stacked, the two ends of the stack at each place on the axis.
+ * Positive and negative values are stacked on their own side of zero, and a
+ * range adds its extent to the stack.
+ * @param grid - the series
+ * @param stacked - whether the series are stacked on each other
+ */
+function getAxisItems(grid, stacked) {
+    if (!stacked) {
+        return getAllItems(grid);
+    }
+    return grid.categories.flatMap((text, index) => {
+        const values = grid.series
+            .map((series) => series.items[index])
+            .filter((item) => item !== undefined)
+            .map((item) => getValueSpan(item));
+        const sum = (side) => values.filter((value) => side(value)).reduce((a, b) => a + b, 0);
+        return [
+            { text: text, value: sum((value) => value > 0) },
+            { text: text, value: sum((value) => value < 0) },
+        ];
+    });
+}
+/**
+ * Whether the item at a position ends its stack, since no later series has
+ * an item on the same side of zero at that place on the axis.
+ * @param grid - the stacked series
+ * @param position - where the item is
+ */
+function endsStack(grid, position) {
+    const side = Math.sign(getStackedValue(grid, position));
+    return grid.series.slice(position.series + 1).every((_, offset) => Math.sign(getStackedValue(grid, {
+        series: position.series + 1 + offset,
+        index: position.index,
+    })) !== side);
+}
+function getStackedValue(grid, position) {
+    const item = getItemAt(grid, position);
+    return item ? getValueSpan(item) : 0;
+}
+
 const DOT_SIZE = 8;
 const LINE_DOT_SIZE = 6;
 const CONNECTOR_WIDTH = 2;
 const DIMMED_OPACITY = 0.4;
 const AREA_OPACITY = 0.4;
+const SERIES_AREA_OPACITY = 0.15;
+const SERIES_STACK = { stack: 'series', stackStrategy: 'samesign' };
 const PADDING = 8;
 const NPS_MIN = -100;
 const NPS_MAX = 100;
@@ -50794,6 +50929,15 @@ const NPS_ARC_WIDTH = 16;
 const ITEM_TEXT_MIN_WIDTH = 40;
 const ITEM_TEXT_GAP = 4;
 const ITEM_TEXT_LINE_HEIGHT = 14;
+const SWATCH = {
+    width: '0.625rem',
+    height: '0.625rem',
+    'border-radius': '0.125rem',
+};
+const SWATCH_SHAPES = {
+    line: { height: '0.125rem' },
+    dot: { 'border-radius': '50%' },
+};
 const emphasis = { focus: 'self' };
 const blur = { itemStyle: { opacity: DIMMED_OPACITY } };
 const hidden = { show: false };
@@ -50805,34 +50949,116 @@ const hidden = { show: false };
  * when it is known from an earlier drawing
  */
 function drawChart(settings, theme, itemSpace) {
-    const drawing = drawSeries(settings, theme, itemSpace);
-    return Object.assign(Object.assign({}, drawing), { option: Object.assign({ animation: theme.animate, textStyle: { fontFamily: theme.fontFamily, color: theme.textColor }, tooltip: {
-                trigger: 'item',
-                appendTo: 'body',
-                backgroundColor: theme.surfaceColor,
-                borderColor: theme.axisLineColor,
-                textStyle: { color: theme.textColor },
-                formatter: (params) => getTooltip(settings, getItemIndex(drawing, params)),
-            } }, drawing.option) });
-}
-/**
- * The index of the item drawn at a position, if an item is drawn there.
+    const drawn = getDrawnSettings(settings);
+    const grid = getSeriesGrid(drawn);
+    const drawing = drawSeries(drawn, grid, theme, itemSpace);
+    return Object.assign(Object.assign({}, drawing), { option: Object.assign({ animation: theme.animate, textStyle: { fontFamily: theme.fontFamily, color: theme.textColor }, tooltip: Object.assign({ appendTo: 'body', backgroundColor: theme.surfaceColor, borderColor: theme.axisLineColor, textStyle: { color: theme.textColor } }, (drawn.series
+                ? getCategoryTooltipOption(drawn, grid, theme)
+                : {
+                    trigger: 'item',
+                    formatter: (params) => getTooltip(drawn, findItem(drawing, params).index),
+                })) }, drawing.option) });
+}
+/**
+ * The item drawn at a position, if an item is drawn there. A position in a
+ * series of ECharts that draws no items of its own, such as the invisible
+ * column of an item, belongs to the first series.
  * @param drawing - the drawing of the chart
  * @param location - a position within the drawn series
  */
-function getItemIndex(drawing, location) {
-    return drawing.itemsAreSeries ? location.seriesIndex : location.dataIndex;
+function findItem(drawing, location) {
+    var _a, _b;
+    if (drawing.itemsAreSeries) {
+        return { series: 0, index: location.seriesIndex };
+    }
+    return {
+        series: (_b = (_a = drawing.partsOfSeries) === null || _a === void 0 ? void 0 : _a[location.seriesIndex]) !== null && _b !== void 0 ? _b : 0,
+        index: location.dataIndex,
+    };
 }
 /**
  * Where an item is drawn, for highlighting it and showing its tooltip.
  * @param drawing - the drawing of the chart
- * @param index - the index of the item
+ * @param position - where the item is among the series
  */
-function locateItem(drawing, index) {
+function locateItem(drawing, position) {
     if (drawing.itemsAreSeries) {
-        return { seriesIndex: index, dataIndex: 0 };
+        return { seriesIndex: position.index, dataIndex: 0 };
+    }
+    return {
+        seriesIndex: drawing.seriesIndexes[position.series],
+        dataIndex: position.index,
+    };
+}
+/**
+ * The series that the chart draws: its series, when its type can draw them.
+ * @param settings - what the chart is given
+ */
+function getDrawnSeries(settings) {
+    var _a;
+    if (!((_a = settings.series) === null || _a === void 0 ? void 0 : _a.length) || !canDrawSeries(settings.type)) {
+        return;
+    }
+    return settings.series;
+}
+/**
+ * The series whose items the chart draws as its items: its first series,
+ * when its type cannot draw series and it has no items.
+ * @param settings - what the chart is given
+ */
+function getSeriesOfDrawnItems(settings) {
+    var _a, _b;
+    if (getDrawnSeries(settings) || ((_a = settings.items) === null || _a === void 0 ? void 0 : _a.length)) {
+        return;
+    }
+    return (_b = settings.series) === null || _b === void 0 ? void 0 : _b[0];
+}
+/**
+ * The items that the chart draws when it draws no series: its items, or the
+ * items of its first series when it has no items.
+ * @param settings - what the chart is given
+ */
+function getDrawnItems(settings) {
+    var _a, _b, _c;
+    if (getDrawnSeries(settings)) {
+        return [];
     }
-    return { seriesIndex: drawing.seriesIndex, dataIndex: index };
+    return (_c = (_b = (_a = getSeriesOfDrawnItems(settings)) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : settings.items) !== null && _c !== void 0 ? _c : [];
+}
+/**
+ * Whether the chart stacks its series on each other. Only the types that
+ * can stack series do, and never with dates, since a sum of dates means
+ * nothing.
+ * @param settings - what the chart is given
+ */
+function isStacked(settings) {
+    return Boolean(settings.stacked &&
+        getDrawnSeries(settings) &&
+        canStack(settings.type) &&
+        settings.valueFormat !== 'date');
+}
+function getDrawnSettings(settings) {
+    return Object.assign(Object.assign({}, settings), { items: getDrawnItems(settings), series: getDrawnSeries(settings), stacked: isStacked(settings) });
+}
+/**
+ * The series that the chart draws lined up by category, or the items it
+ * draws as the only series when it draws no series.
+ * @param settings - what the chart is given
+ */
+function getSeriesGrid(settings) {
+    var _a;
+    return alignSeries((_a = getDrawnSeries(settings)) !== null && _a !== void 0 ? _a : [
+        { text: '', items: getDrawnItems(settings) },
+    ]);
+}
+/**
+ * The style of the marker of a series, in the legend and in the tooltip: a
+ * square for bars and areas, a line for lines, and a dot for dots.
+ * @param type - the chart type
+ * @param color - the color of the series
+ */
+function getSwatchStyle(type, color = '') {
+    return Object.assign(Object.assign(Object.assign({}, SWATCH), SWATCH_SHAPES[type]), { 'background-color': color });
 }
 /**
  * Shows the text of every item on the axis, cut short to the space of the
@@ -50891,7 +51117,51 @@ function getTooltip(settings, index) {
         .map((text) => encodeHTML(text))
         .join('<br/>');
 }
-function drawSeries(settings, theme, itemSpace) {
+/**
+ * The tooltip of a category of a chart with series, as HTML: its text, and
+ * the name and value of each series that has an item there.
+ * @param grid - the series of the chart, lined up by category
+ * @param style - how the chart writes values
+ * @param index - the index of the category
+ */
+function getCategoryTooltip(grid, style, index) {
+    const category = grid.categories[index];
+    if (category === undefined) {
+        return '';
+    }
+    const lines = grid.series
+        .filter((series) => series.items[index] !== undefined)
+        .map((series) => {
+        var _a;
+        const item = series.items[index];
+        return getTooltipLine(getSwatch(style.type, (_a = item.color) !== null && _a !== void 0 ? _a : series.color), series.text, formatValue(item, style));
+    });
+    return [`<div>${encodeHTML(category)}</div>`, ...lines].join('');
+}
+function getTooltipLine(swatch, name, value) {
+    return `<div style="display:flex;justify-content:space-between;gap:1rem"><span>${swatch}${encodeHTML(name)}</span><span>${encodeHTML(value)}</span></div>`;
+}
+function getSwatch(type, color = '') {
+    const style = Object.assign({ display: 'inline-block', 'vertical-align': 'middle', 'margin-right': '0.375rem' }, getSwatchStyle(type, encodeHTML(color)));
+    const declarations = Object.entries(style).map(([property, value]) => `${property}:${value}`);
+    return `<span style="${declarations.join(';')}"></span>`;
+}
+function getCategoryTooltipOption(settings, grid, theme) {
+    return {
+        trigger: 'axis',
+        axisPointer: settings.type === 'bar'
+            ? {
+                type: 'shadow',
+                shadowStyle: { color: theme.axisLineColor, opacity: 0.2 },
+            }
+            : { type: 'line', lineStyle: { color: theme.axisLineColor } },
+        formatter: (params) => {
+            const [first] = [params].flat();
+            return getCategoryTooltip(grid, settings, first === null || first === void 0 ? void 0 : first.dataIndex);
+        },
+    };
+}
+function drawSeries(settings, grid, theme, itemSpace) {
     switch (settings.type) {
         case 'pie':
         case 'doughnut': {
@@ -50910,46 +51180,54 @@ function drawSeries(settings, theme, itemSpace) {
             return drawNps(settings, theme);
         }
         default: {
-            return drawOnAxes(settings, theme, itemSpace);
+            return drawOnAxes(settings, grid, theme, itemSpace);
         }
     }
 }
-function drawOnAxes(settings, theme, itemSpace) {
-    const { items, orientation } = settings;
-    const range = settings.valueFormat === 'date'
-        ? getDateRange(items.flatMap((item) => [
-            getMinimumValue(item),
-            getMaximumValue(item),
-        ]), settings.maxValue)
-        : getAxisRange(items, settings.maxValue, settings.axisIncrement);
-    const itemTextAxis = getItemTextAxis(settings);
-    const categoryAxis = Object.assign(Object.assign(Object.assign({}, getCategoryAxis(settings)), { axisLabel: Object.assign({ show: settings.displayItemText, color: theme.textColor }, (itemTextAxis &&
+function drawOnAxes(settings, grid, theme, itemSpace) {
+    const { orientation } = settings;
+    const range = getValueRange(settings, grid);
+    const itemTextAxis = getItemTextAxis(settings, grid);
+    const categoryAxis = Object.assign(Object.assign(Object.assign({}, getCategoryAxis(settings, grid)), { axisLabel: Object.assign({ show: settings.displayItemText, color: theme.textColor }, (itemTextAxis &&
             itemSpace &&
             getItemTextLayout(itemTextAxis, itemSpace))), axisTick: hidden, axisLine: { lineStyle: { color: theme.axisLineColor } } }), getAxisName(settings, settings.itemsLabel, theme));
     const valueAxis = getValueAxis(range, getAxisName(settings, settings.valuesLabel, theme), settings, theme);
-    const { series, seriesIndex } = getAxisSeries(settings, theme);
+    const { series, seriesIndexes, partsOfSeries } = getAxisSeries(settings, grid, theme);
     const option = {
         grid: getGrid(theme),
         xAxis: orientation === 'landscape' ? categoryAxis : valueAxis,
         yAxis: orientation === 'landscape' ? valueAxis : categoryAxis,
         series: series,
     };
+    const hasColumns = settings.type !== 'bar' && !settings.series;
     return {
-        seriesIndex: seriesIndex,
+        seriesIndexes: seriesIndexes,
+        partsOfSeries: partsOfSeries,
         itemsAreSeries: false,
         itemTextAxis: itemTextAxis,
-        option: settings.type === 'bar' ? option : withColumns(option, settings),
+        valueRange: range,
+        option: hasColumns ? withColumns(option, settings, grid) : option,
     };
 }
-function getCategoryAxis(settings) {
+function getValueRange(settings, grid) {
+    const items = getAxisItems(grid, Boolean(settings.stacked));
+    if (settings.valueFormat === 'date') {
+        return getDateRange(items.flatMap((item) => [
+            getMinimumValue(item),
+            getMaximumValue(item),
+        ]), settings.maxValue);
+    }
+    return getAxisRange(items, settings.maxValue, settings.axisIncrement);
+}
+function getCategoryAxis(settings, grid) {
     return {
         type: 'category',
-        data: settings.items.map((item) => item.text),
+        data: grid.categories,
         inverse: settings.orientation === 'portrait',
     };
 }
-function getItemTextAxis(settings) {
-    if (!settings.displayItemText || settings.items.length < 2) {
+function getItemTextAxis(settings, grid) {
+    if (!settings.displayItemText || grid.categories.length < 2) {
         return;
     }
     return settings.orientation === 'landscape' ? 'xAxis' : 'yAxis';
@@ -50958,9 +51236,9 @@ function getItemTextAxis(settings) {
 // column across the whole plot that shows its tooltip and takes its clicks.
 // The columns have axes of their own, so they are not laid out next to the
 // bars that draw ranges.
-function withColumns(option, settings) {
+function withColumns(option, settings, grid) {
     const { items, orientation } = settings;
-    const categoryAxis = Object.assign(Object.assign({}, getCategoryAxis(settings)), { show: false });
+    const categoryAxis = Object.assign(Object.assign({}, getCategoryAxis(settings, grid)), { show: false });
     const valueAxis = { type: 'value', min: 0, max: 1, show: false };
     const columns = {
         type: 'bar',
@@ -50975,78 +51253,140 @@ function withColumns(option, settings) {
     const landscape = orientation === 'landscape';
     return Object.assign(Object.assign({}, option), { xAxis: [option.xAxis, landscape ? categoryAxis : valueAxis], yAxis: [option.yAxis, landscape ? valueAxis : categoryAxis], series: [...option.series, columns] });
 }
-function getAxisSeries(settings, theme) {
+function getAxisSeries(settings, grid, theme) {
+    const series = [];
+    const seriesIndexes = [];
+    const partsOfSeries = [];
+    for (const index of grid.series.keys()) {
+        const drawn = drawItemSeries(settings, grid, index, theme);
+        seriesIndexes.push(series.length + drawn.seriesIndex);
+        series.push(...drawn.series);
+        partsOfSeries.push(...drawn.series.map(() => index));
+    }
+    return {
+        series: series,
+        seriesIndexes: seriesIndexes,
+        partsOfSeries: partsOfSeries,
+    };
+}
+function drawItemSeries(settings, grid, index, theme) {
+    const series = grid.series[index];
     if (settings.type === 'line' || settings.type === 'area') {
-        return getLineSeries(settings, theme);
+        return getLineSeries(settings, series, index, theme);
     }
     if (settings.type === 'dot') {
-        return getDotSeries(settings, theme);
+        return getDotSeries(settings, series, index, theme);
     }
-    return getBarSeries(settings, theme);
+    if (settings.stacked) {
+        return {
+            series: [getStackedBars(settings, grid, index, theme)],
+            seriesIndex: 0,
+        };
+    }
+    return getBarSeries(settings, series, index, theme);
 }
-function getBarSeries(settings, theme) {
-    const { items } = settings;
+function getStackedBars(settings, grid, index, theme) {
+    const series = grid.series[index];
+    return Object.assign(Object.assign({ type: 'bar' }, SERIES_STACK), { data: series.items.map((item, category) => item
+            ? {
+                value: getValueSpan(item),
+                itemStyle: {
+                    color: item.color,
+                    borderRadius: endsStack(grid, {
+                        series: index,
+                        index: category,
+                    })
+                        ? getOuterCorners(settings, item, theme)
+                        : 0,
+                    borderColor: theme.dividerColor,
+                    borderWidth: 1,
+                },
+            }
+            : null), label: Object.assign(Object.assign({}, getValueLabel(settings, series, theme)), { position: 'inside', color: undefined }), cursor: getSeriesCursor(series.items), emphasis: emphasis, blur: blur });
+}
+function getOuterCorners(settings, item, theme) {
+    const [topLeft, topRight, bottomRight, bottomLeft] = theme.itemBorderRadius;
+    const positive = getValueSpan(item) >= 0;
+    if (settings.orientation === 'portrait') {
+        return positive
+            ? [0, topRight, bottomRight, 0]
+            : [topLeft, 0, 0, bottomLeft];
+    }
+    return positive
+        ? [topLeft, topRight, 0, 0]
+        : [0, 0, bottomRight, bottomLeft];
+}
+function getBarSeries(settings, series, index, theme) {
+    const { items } = series;
     const bars = {
         type: 'bar',
-        data: items.map((item) => ({
-            value: getValueSpan(item),
-            itemStyle: {
-                color: item.color,
-                borderRadius: theme.itemBorderRadius,
-            },
-        })),
-        label: getValueLabel(settings, theme),
+        data: items.map((item) => item
+            ? {
+                value: getValueSpan(item),
+                itemStyle: {
+                    color: item.color,
+                    borderRadius: theme.itemBorderRadius,
+                },
+            }
+            : null),
+        label: getValueLabel(settings, series, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
     };
-    if (items.every((item) => !isRangeItem(item))) {
+    if (!hasRanges(items)) {
         return { series: [bars], seriesIndex: 0 };
     }
     return {
         series: [
-            Object.assign(Object.assign({ type: 'bar' }, rangeBase), { data: getRangeStarts(items) }),
-            Object.assign(Object.assign({}, bars), stacked),
+            Object.assign(Object.assign({ type: 'bar' }, getRangeBase(index)), { data: getRangeStarts(items) }),
+            Object.assign(Object.assign({}, bars), getRangeStack(index)),
         ],
         seriesIndex: 1,
     };
 }
-function getDotSeries(settings, theme) {
-    const { items, orientation } = settings;
-    const point = (index, value) => orientation === 'landscape' ? [index, value] : [value, index];
+function getDotSeries(settings, series, index, theme) {
+    const { items } = series;
+    const { orientation } = settings;
+    const point = (category, value) => orientation === 'landscape' ? [category, value] : [value, category];
     const ends = {
         type: 'scatter',
         symbolSize: DOT_SIZE,
-        data: items.map((item, index) => ({
-            value: point(index, getMaximumValue(item)),
-            itemStyle: { color: item.color },
-        })),
-        label: getValueLabel(settings, theme),
+        data: items.map((item, category) => item
+            ? {
+                value: point(category, getMaximumValue(item)),
+                itemStyle: { color: item.color },
+            }
+            : null),
+        label: getValueLabel(settings, series, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
     };
-    if (items.every((item) => !isRangeItem(item))) {
+    if (!hasRanges(items)) {
         return { series: [ends], seriesIndex: 0 };
     }
-    const connectors = Object.assign(Object.assign({ type: 'bar' }, stacked), { silent: true, barWidth: CONNECTOR_WIDTH, data: items.map((item) => ({
-            value: isRangeItem(item) ? getValueSpan(item) : null,
-            itemStyle: { color: item.color },
-        })) });
+    const connectors = Object.assign(Object.assign({ type: 'bar' }, getRangeStack(index)), { cursor: getSeriesCursor(items), emphasis: { disabled: true }, barWidth: CONNECTOR_WIDTH, barGap: '-100%', data: items.map((item) => item && isRangeItem(item)
+            ? {
+                value: getValueSpan(item),
+                itemStyle: { color: item.color },
+            }
+            : null) });
     const starts = {
         type: 'scatter',
-        silent: true,
+        cursor: getSeriesCursor(items),
+        emphasis: { disabled: true },
         symbolSize: DOT_SIZE,
-        data: items.map((item, index) => ({
-            value: isRangeItem(item)
-                ? point(index, getMinimumValue(item))
-                : [null, null],
-            itemStyle: { color: item.color },
-        })),
+        data: items.map((item, category) => item && isRangeItem(item)
+            ? {
+                value: point(category, getMinimumValue(item)),
+                itemStyle: { color: item.color },
+            }
+            : null),
     };
     return {
         series: [
-            Object.assign(Object.assign({ type: 'bar' }, rangeBase), { data: getRangeStarts(items) }),
+            Object.assign(Object.assign({ type: 'bar' }, getRangeBase(index)), { barGap: '-100%', data: getRangeStarts(items) }),
             connectors,
             starts,
             ends,
@@ -51054,38 +51394,63 @@ function getDotSeries(settings, theme) {
         seriesIndex: 3,
     };
 }
-function getLineSeries(settings, theme) {
-    const { items } = settings;
-    const color = theme.lineColor;
+function getLineSeries(settings, series, index, theme) {
+    var _a;
+    const { items } = series;
+    const color = (_a = series.color) !== null && _a !== void 0 ? _a : theme.lineColor;
     const area = settings.type === 'area';
-    const line = {
-        type: 'line',
-        color: color,
-        symbol: 'circle',
-        symbolSize: LINE_DOT_SIZE,
-        data: items.map((item) => ({
-            value: getValueSpan(item),
-            itemStyle: { color: item.color },
-        })),
-        areaStyle: area ? { color: color, opacity: AREA_OPACITY } : undefined,
-        label: getValueLabel(settings, theme),
-        cursor: getSeriesCursor(items),
-        emphasis: emphasis,
-        blur: blur,
-    };
-    if (items.every((item) => !isRangeItem(item))) {
+    const line = Object.assign(Object.assign({ type: 'line', color: color, symbol: 'circle', symbolSize: LINE_DOT_SIZE }, (settings.series &&
+        hasClickableItems(items) && {
+        showAllSymbol: true,
+        labelLayout: { hideOverlap: true },
+    })), { data: items.map((item) => item
+            ? {
+                value: getValueSpan(item),
+                itemStyle: { color: item.color },
+            }
+            : null), areaStyle: area
+            ? { color: color, opacity: getAreaOpacity(settings) }
+            : undefined, label: getValueLabel(settings, series, theme), cursor: getSeriesCursor(items), emphasis: emphasis, blur: blur });
+    if (settings.stacked) {
+        return { series: [Object.assign(Object.assign({}, line), SERIES_STACK)], seriesIndex: 0 };
+    }
+    if (!hasRanges(items)) {
         return { series: [line], seriesIndex: 0 };
     }
-    const base = Object.assign(Object.assign({ type: 'line' }, rangeBase), { symbol: 'none', color: color, lineStyle: { opacity: area ? 0 : 1 }, data: getRangeStarts(items) });
-    return { series: [base, Object.assign(Object.assign({}, line), stacked)], seriesIndex: 1 };
+    const base = Object.assign(Object.assign({ type: 'line' }, getRangeBase(index)), { symbol: 'none', color: color, lineStyle: { opacity: area ? 0 : 1 }, data: getRangeStarts(items) });
+    return {
+        series: [base, Object.assign(Object.assign({}, line), getRangeStack(index))],
+        seriesIndex: 1,
+    };
+}
+function getAreaOpacity(settings) {
+    var _a;
+    return ((_a = settings.series) === null || _a === void 0 ? void 0 : _a.length) > 1 && !settings.stacked
+        ? SERIES_AREA_OPACITY
+        : AREA_OPACITY;
+}
+function hasClickableItems(items) {
+    return items.some((item) => item === null || item === void 0 ? void 0 : item.clickable);
+}
+function hasRanges(items) {
+    return items.some((item) => item && isRangeItem(item));
 }
-const stacked = { stack: 'range', stackStrategy: 'all' };
 // A range is drawn as a stack of an invisible part from zero to its start,
 // and a visible part from its start to its end. Items that are not ranges
-// start at zero.
-const rangeBase = Object.assign(Object.assign({}, stacked), { silent: true, tooltip: hidden, emphasis: { disabled: true }, itemStyle: { color: 'transparent' } });
+// start at zero. Each series has a stack of its own.
+function getRangeStack(index) {
+    return { stack: `range${index}`, stackStrategy: 'all' };
+}
+function getRangeBase(index) {
+    return Object.assign(Object.assign({}, getRangeStack(index)), { silent: true, tooltip: hidden, emphasis: { disabled: true }, itemStyle: { color: 'transparent' } });
+}
 function getRangeStarts(items) {
-    return items.map((item) => (isRangeItem(item) ? getMinimumValue(item) : 0));
+    return items.map((item) => {
+        if (!item) {
+            return null;
+        }
+        return isRangeItem(item) ? getMinimumValue(item) : 0;
+    });
 }
 function drawScatter(settings, theme) {
     const { items } = settings;
@@ -51115,7 +51480,7 @@ function drawScatter(settings, theme) {
         blur: blur,
     };
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: false,
         option: {
             grid: getGrid(theme),
@@ -51144,7 +51509,7 @@ function drawPie(settings, theme) {
     }
     const innerRadius = settings.type === 'doughnut' ? '50%' : 0;
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: false,
         option: {
             series: [
@@ -51179,7 +51544,7 @@ function drawProportionBar(settings, theme) {
     const categoryAxis = { type: 'category', data: [''], show: false };
     const landscape = settings.orientation === 'landscape';
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: true,
         option: {
             backgroundColor: theme.backgroundColor,
@@ -51208,7 +51573,7 @@ function drawRing(settings, theme) {
     const { items } = settings;
     const whole = getWholeRange(items, settings.maxValue).totalRange;
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: false,
         option: {
             polar: { radius: ['20%', '90%'] },
@@ -51245,7 +51610,7 @@ function drawRing(settings, theme) {
 function drawNps(settings, theme) {
     const { items } = settings;
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: false,
         option: {
             series: [
@@ -51334,8 +51699,8 @@ function getAxisName(settings, name, theme) {
         nameTextStyle: { color: theme.textColor },
     };
 }
-function getValueLabel(settings, theme) {
-    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings) });
+function getValueLabel(settings, series, theme) {
+    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(series.items[dataIndex], settings) });
 }
 function getLabelStyle(theme) {
     return { color: theme.textColor, textBorderWidth: 0 };
@@ -51351,7 +51716,7 @@ function getPointLabel(settings, item) {
     return parts.join(' ');
 }
 function getSeriesCursor(items) {
-    return getCursor(items.some((item) => item.clickable));
+    return getCursor(hasClickableItems(items));
 }
 function getCursor(clickable) {
     return clickable ? 'pointer' : 'default';
@@ -51503,9 +51868,18 @@ function paintToRgba(context, color) {
     return `rgba(${red}, ${green}, ${blue}, ${alpha / MAX_CHANNEL})`;
 }
 
-const chartCss = () => `@charset "UTF-8";:host(limel-chart){--limel-chart-item-color:var(       --chart-item-color,       rgb(var(--contrast-1100), 0.8)   );--limel-chart-axis-line-color:var(       --chart-axis-line-color,       rgb(var(--contrast-900), 0.4)   );--limel-chart-background-color:var(--chart-background-color, transparent);--limel-chart-item-divider-color:var(       --chart-item-divider-color,       rgb(var(--contrast-100), 0.6)   );--limel-chart-item-border-radius:var(--chart-item-border-radius, 0);--limel-chart-scatter-item-size:var(--chart-scatter-item-size, 0.5rem);--limel-chart-text-color:rgb(var(--contrast-1000));--limel-chart-line-color:rgb(var(--contrast-900));--limel-chart-surface-color:rgb(var(--contrast-100));--limel-chart-nps-detractors-color:rgb(var(--color-coral-default));--limel-chart-nps-passives-color:rgb(var(--color-amber-light));--limel-chart-nps-good-color:rgb(var(--color-lime-light));--limel-chart-nps-excellent-color:rgb(var(--color-lime-default));box-sizing:border-box;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}:host(limel-chart[type=bar]){--limel-chart-item-border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=proportion-bar]),:host(limel-chart[type=stacked-bar]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-800), 0.2)   )}:host(limel-chart[type=proportion-bar][orientation=landscape]),:host(limel-chart[type=proportion-bar][orientation=landscape]) .plot,:host(limel-chart[type=stacked-bar][orientation=landscape]),:host(limel-chart[type=stacked-bar][orientation=landscape]) .plot{min-height:0.5rem}:host(limel-chart[type=proportion-bar][orientation=portrait]),:host(limel-chart[type=proportion-bar][orientation=portrait]) .plot,:host(limel-chart[type=stacked-bar][orientation=portrait]),:host(limel-chart[type=stacked-bar][orientation=portrait]) .plot{min-width:0.5rem}:host(limel-chart[type=pie]),:host(limel-chart[type=doughnut]),:host(limel-chart[type=ring]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-200))   )}:host(limel-chart[type=nps]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-100))   )}:host(limel-chart[type=pie]),:host(limel-chart[type=doughnut]),:host(limel-chart[type=ring]),:host(limel-chart[type=nps]){aspect-ratio:1}:host(limel-chart[type=bar][data-fallback-height]),:host(limel-chart[type=dot][data-fallback-height]),:host(limel-chart[type=line][data-fallback-height]),:host(limel-chart[type=area][data-fallback-height]),:host(limel-chart[type=scatter][data-fallback-height]){aspect-ratio:2}.plot{flex-grow:1;contain:size}:host(limel-chart[type=proportion-bar]) .plot,:host(limel-chart[type=stacked-bar]) .plot{border-radius:0.25rem;overflow:hidden}table{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}limel-spinner{margin:auto}`;
+const chartCss = () => `@charset "UTF-8";:host(limel-chart){--limel-chart-item-color:var(       --chart-item-color,       rgb(var(--contrast-1100), 0.8)   );--limel-chart-axis-line-color:var(       --chart-axis-line-color,       rgb(var(--contrast-900), 0.4)   );--limel-chart-background-color:var(--chart-background-color, transparent);--limel-chart-item-divider-color:var(       --chart-item-divider-color,       rgb(var(--contrast-100), 0.6)   );--limel-chart-item-border-radius:var(--chart-item-border-radius, 0);--limel-chart-scatter-item-size:var(--chart-scatter-item-size, 0.5rem);--limel-chart-text-color:rgb(var(--contrast-1000));--limel-chart-line-color:rgb(var(--contrast-900));--limel-chart-surface-color:rgb(var(--contrast-100));--limel-chart-nps-detractors-color:rgb(var(--color-coral-default));--limel-chart-nps-passives-color:rgb(var(--color-amber-light));--limel-chart-nps-good-color:rgb(var(--color-lime-light));--limel-chart-nps-excellent-color:rgb(var(--color-lime-default));--limel-chart-series-color-1:rgb(var(--color-blue-default));--limel-chart-series-color-2:rgb(var(--color-coral-default));--limel-chart-series-color-3:rgb(var(--color-teal-default));--limel-chart-series-color-4:rgb(var(--color-amber-default));--limel-chart-series-color-5:rgb(var(--color-magenta-default));--limel-chart-series-color-6:rgb(var(--color-green-default));--limel-chart-series-color-7:rgb(var(--color-violet-default));--limel-chart-series-color-8:rgb(var(--color-red-default));box-sizing:border-box;position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0}:host(limel-chart[type=bar]){--limel-chart-item-border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=proportion-bar]),:host(limel-chart[type=stacked-bar]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-800), 0.2)   )}:host(limel-chart[type=proportion-bar][orientation=landscape]),:host(limel-chart[type=proportion-bar][orientation=landscape]) .plot,:host(limel-chart[type=stacked-bar][orientation=landscape]),:host(limel-chart[type=stacked-bar][orientation=landscape]) .plot{min-height:0.5rem}:host(limel-chart[type=proportion-bar][orientation=portrait]),:host(limel-chart[type=proportion-bar][orientation=portrait]) .plot,:host(limel-chart[type=stacked-bar][orientation=portrait]),:host(limel-chart[type=stacked-bar][orientation=portrait]) .plot{min-width:0.5rem}:host(limel-chart[type=pie]),:host(limel-chart[type=doughnut]),:host(limel-chart[type=ring]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-200))   )}:host(limel-chart[type=nps]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-100))   )}:host(limel-chart[type=pie]),:host(limel-chart[type=doughnut]),:host(limel-chart[type=ring]),:host(limel-chart[type=nps]){aspect-ratio:1}:host(limel-chart[type=bar][data-fallback-height]),:host(limel-chart[type=dot][data-fallback-height]),:host(limel-chart[type=line][data-fallback-height]),:host(limel-chart[type=area][data-fallback-height]),:host(limel-chart[type=scatter][data-fallback-height]){aspect-ratio:2}.plot{flex-grow:1;contain:size}ul{display:flex;flex-wrap:wrap;gap:0.25rem 0.875rem;margin:0 0 0.5rem 0;padding:0;list-style:none;font-size:0.75rem;color:rgb(var(--contrast-1100))}li{display:inline-flex;align-items:center;gap:0.375rem}li>span{flex-shrink:0}:host(limel-chart[type=proportion-bar]) .plot,:host(limel-chart[type=stacked-bar]) .plot{border-radius:0.25rem;overflow:hidden}table{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}limel-spinner{margin:auto}`;
 
 const orientations = ['horizontal', 'vertical'];
+const SERIES_COLOR_COUNT = 8;
+const getDefaultSeriesColor = (index) => `var(--limel-chart-series-color-${(index % SERIES_COLOR_COUNT) + 1})`;
+const copyItem = (item) => ({
+    text: item.text,
+    value: item.value,
+    formattedValue: item.formattedValue,
+    color: item.color,
+    clickable: item.clickable,
+});
 const extensions = [
     install$9,
     install$5,
@@ -51552,6 +51926,15 @@ const Chart = class {
          * Applies to `proportion-bar`, `pie`, `doughnut`, and `ring` charts.
          */
         this.displayItemPercentage = true;
+        /**
+         * Stacks the `series` on each other, so that each place on the axis
+         * shows their total, such as the revenue of each product, which adds up
+         * to the revenue of the month. Positive and negative values are stacked
+         * on their own side of zero, and a range adds its extent to the stack.
+         * Applies to `bar`, `line`, and `area` charts, but not when
+         * `valueFormat` is `date`.
+         */
+        this.stacked = false;
         /**
          * Defines how items are visualized in the chart.
          * `stacked-bar` is the old name of `proportion-bar`. It still works, but
@@ -51580,7 +51963,9 @@ const Chart = class {
         /**
          * The item that last had focus, which is the one that Tab returns to.
          */
-        this.focusedIndex = 0;
+        this.focusedPosition = { series: 0, index: 0 };
+        this.grid = { categories: [], series: [] };
+        this.seriesColors = [];
         this.themeMayHaveChanged = false;
         this.warnings = new Map();
         this.invalidColors = new Set();
@@ -51599,7 +51984,7 @@ const Chart = class {
             if (!this.drawing) {
                 return;
             }
-            const item = this.getClickableItem(getItemIndex(this.drawing, event));
+            const item = this.getClickableItem(this.getClickedPosition(event));
             if (!item) {
                 return;
             }
@@ -51613,7 +51998,7 @@ const Chart = class {
             this.highlightItemAt(event, false);
         };
         this.handleClick = (event) => {
-            const item = this.getClickableItem(this.getRowIndex(event));
+            const item = this.getClickableItem(this.getEventPosition(event));
             if (!item) {
                 return;
             }
@@ -51624,13 +52009,13 @@ const Chart = class {
             const orientation = orientations.find((option) => isNavigationKey(event, { orientation: option }));
             if (orientation) {
                 event.preventDefault();
-                this.focusItem(findNavigationTarget(this.items, event.key, this.getRowIndex(event), { orientation: orientation }));
+                this.focusItem(this.findTarget(event.key, this.getEventPosition(event), orientation));
                 return;
             }
             if (event.key !== 'Enter' && event.key !== ' ') {
                 return;
             }
-            const item = this.getClickableItem(this.getRowIndex(event));
+            const item = this.getClickableItem(this.getEventPosition(event));
             if (!item) {
                 return;
             }
@@ -51638,9 +52023,9 @@ const Chart = class {
             this.interact.emit(item);
         };
         this.handleFocus = (event) => {
-            const row = event.currentTarget;
-            this.focusedIndex = Number(row.dataset.index);
-            this.showItem(row, true);
+            const element = event.currentTarget;
+            this.focusedPosition = this.getPosition(element);
+            this.showItem(element, true);
         };
         this.handleBlur = (event) => {
             this.showItem(event.currentTarget, false);
@@ -51650,10 +52035,17 @@ const Chart = class {
         this.warnAboutOldTypeName();
     }
     componentWillRender() {
+        this.grid = getSeriesGrid({
+            type: this.chartType,
+            items: this.items,
+            series: this.series,
+        });
         this.warnOnChange('axisIncrement', this.getAxisIncrementWarning());
         this.warnOnChange('language', this.getLanguageWarning());
         this.warnOnChange('currency', this.getCurrencyWarning());
         this.warnOnChange('items', this.getDateWarning());
+        this.warnOnChange('series', this.getSeriesWarning());
+        this.warnOnChange('stacked', this.getStackedWarning());
     }
     connectedCallback() {
         this.draw();
@@ -51695,11 +52087,10 @@ const Chart = class {
         return `limel-chart: \`currency\` must be a three-letter code such as \`SEK\` when \`valueFormat\` is \`currency\`, but was ${JSON.stringify(this.currency)}. Writing the values as numbers instead.`;
     }
     getDateWarning() {
-        var _a;
         if (this.valueFormat !== 'date') {
             return;
         }
-        const wrong = ((_a = this.items) !== null && _a !== void 0 ? _a : [])
+        const wrong = getAllItems(this.grid)
             .flatMap((item) => [item.value].flat())
             .find((value) => !isDate(value));
         if (wrong === undefined) {
@@ -51708,6 +52099,56 @@ const Chart = class {
         const shown = typeof wrong === 'number' ? wrong : JSON.stringify(wrong);
         return `limel-chart: with \`valueFormat\` \`date\`, each value must be a date in milliseconds since 1970, as \`Date.getTime()\` gives, but was ${shown}. Showing it as it is.`;
     }
+    getSeriesWarning() {
+        var _a, _b, _c;
+        if (!((_a = this.series) === null || _a === void 0 ? void 0 : _a.length)) {
+            return;
+        }
+        if (!canDrawSeries(this.chartType)) {
+            const drawn = ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length)
+                ? '`items`'
+                : 'the items of the first series';
+            return `limel-chart: \`series\` can only be drawn by \`bar\`, \`dot\`, \`line\`, and \`area\` charts, but \`type\` is \`${this.type}\`. Drawing ${drawn} instead.`;
+        }
+        if ((_c = this.items) === null || _c === void 0 ? void 0 : _c.length) {
+            return 'limel-chart: both `items` and `series` are set. Drawing `series`, and leaving out `items`.';
+        }
+    }
+    getStackedWarning() {
+        if (!this.stacked) {
+            return;
+        }
+        if (!canStack(this.chartType)) {
+            return `limel-chart: \`stacked\` can only stack the series of \`bar\`, \`line\`, and \`area\` charts, but \`type\` is \`${this.type}\`. Ignoring \`stacked\`.`;
+        }
+        if (this.valueFormat === 'date') {
+            return 'limel-chart: `stacked` cannot stack dates. Ignoring `stacked`.';
+        }
+        if (!this.drawsSeries) {
+            return 'limel-chart: `stacked` stacks the `series` of a chart, but this chart has none. Ignoring `stacked`.';
+        }
+    }
+    get stacksSeries() {
+        return isStacked({
+            type: this.chartType,
+            series: this.series,
+            stacked: this.stacked,
+            valueFormat: this.valueFormat,
+        });
+    }
+    get drawsSeries() {
+        return Boolean(this.drawnSeries);
+    }
+    get drawnSeries() {
+        return getDrawnSeries({ type: this.chartType, series: this.series });
+    }
+    get drawnItems() {
+        return getDrawnItems({
+            type: this.chartType,
+            items: this.items,
+            series: this.series,
+        });
+    }
     get valueStyle() {
         return {
             type: this.chartType,
@@ -51720,7 +52161,6 @@ const Chart = class {
         return this.type === 'stacked-bar' ? 'proportion-bar' : this.type;
     }
     getAxisIncrementWarning() {
-        var _a;
         const increment = this.axisIncrement;
         if (increment === undefined ||
             increment === null ||
@@ -51733,7 +52173,7 @@ const Chart = class {
         if (!usesAxisIncrement(this.chartType)) {
             return;
         }
-        const range = getAxisRange((_a = this.items) !== null && _a !== void 0 ? _a : [], this.maxValue, increment);
+        const range = getAxisRange(getAxisItems(this.grid, this.stacksSeries), this.maxValue, increment);
         if (range.increment !== increment) {
             return `limel-chart: \`axisIncrement\` ${increment} would divide the axis into more than ${MAX_AXIS_STEPS} steps. Working out a step from the values instead.`;
         }
@@ -51742,7 +52182,19 @@ const Chart = class {
         if (this.loading) {
             return h("limel-spinner", { limeBranded: false });
         }
-        return (h(Host, null, h("div", { class: "plot", "aria-hidden": "true", ref: this.setPlot }), h("table", { "aria-live": "polite" }, this.renderCaption(), this.renderTableHeader(), h("tbody", null, this.renderItems()))));
+        return (h(Host, null, this.renderLegend(), h("div", { class: "plot", "aria-hidden": "true", ref: this.setPlot }), h("table", { "aria-live": "polite" }, this.renderCaption(), this.renderTableHeader(), h("tbody", null, this.drawsSeries
+            ? this.renderCategories()
+            : this.renderItems()))));
+    }
+    get hasLegend() {
+        var _a, _b;
+        return ((_b = (_a = this.drawnSeries) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 1;
+    }
+    renderLegend() {
+        if (!this.hasLegend) {
+            return;
+        }
+        return (h("ul", { "aria-hidden": "true" }, this.drawnSeries.map((series, index) => (h("li", null, h("span", { style: getSwatchStyle(this.chartType, this.seriesColors[index]) }), series.text)))));
     }
     renderCaption() {
         if (!this.accessibleLabel) {
@@ -51751,7 +52203,18 @@ const Chart = class {
         return h("caption", null, this.accessibleLabel);
     }
     renderTableHeader() {
-        return (h("thead", null, h("tr", null, h("th", { scope: "col" }, this.itemsLabel), h("th", { scope: "col" }, this.valuesLabel))));
+        var _a, _b;
+        const columns = (_b = (_a = this.drawnSeries) === null || _a === void 0 ? void 0 : _a.map((series) => series.text)) !== null && _b !== void 0 ? _b : [
+            this.valuesLabel,
+        ];
+        return (h("thead", null, this.renderSeriesGroupHeader(), h("tr", null, h("th", { scope: "col" }, this.itemsLabel), columns.map((column) => (h("th", { scope: "col" }, column))))));
+    }
+    renderSeriesGroupHeader() {
+        const allSeries = this.drawnSeries;
+        if (!allSeries || !this.accessibleValuesLabel) {
+            return;
+        }
+        return (h("tr", null, h("td", null), h("th", { scope: "col", colSpan: allSeries.length }, this.accessibleValuesLabel)));
     }
     get itemsLabel() {
         var _a;
@@ -51762,13 +52225,46 @@ const Chart = class {
         return ((_a = this.accessibleValuesLabel) !== null && _a !== void 0 ? _a : translations.get('value', this.language));
     }
     renderItems() {
-        var _a, _b;
-        const tabStop = findTabStop((_a = this.items) !== null && _a !== void 0 ? _a : [], this.focusedIndex);
-        return (_b = this.items) === null || _b === void 0 ? void 0 : _b.map((item, index) => (h("tr", { "data-index": index, "aria-description": this.getRowDescription(index), tabIndex: index === tabStop ? 0 : -1, role: item.clickable ? 'button' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("td", null, item.text), h("td", null, formatValue(item, this.valueStyle)))));
+        const items = this.drawnItems;
+        const tabStop = findTabStop(items, this.focusedPosition.index);
+        return items.map((item, index) => (h("tr", { "data-index": index, "aria-description": this.getRowDescription(index), tabIndex: index === tabStop ? 0 : -1, role: item.clickable ? 'button' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("td", null, item.text), h("td", null, formatValue(item, this.valueStyle)))));
     }
     getRowDescription(index) {
-        const label = getItemLabel(Object.assign(Object.assign({}, this.valueStyle), { items: this.items, maxValue: this.maxValue, displayItemPercentage: this.displayItemPercentage }), index);
-        return label === this.items[index].text ? undefined : label;
+        const items = this.drawnItems;
+        const label = getItemLabel(Object.assign(Object.assign({}, this.valueStyle), { items: items, maxValue: this.maxValue, displayItemPercentage: this.displayItemPercentage }), index);
+        return label === items[index].text ? undefined : label;
+    }
+    renderCategories() {
+        const grid = this.grid;
+        const tabStop = this.findTabStopInGrid(grid);
+        return grid.categories.map((category, index) => (h("tr", null, h("th", { scope: "row" }, category), grid.series.map((series, seriesIndex) => this.renderCell(series.items[index], { series: seriesIndex, index: index }, tabStop)))));
+    }
+    renderCell(item, position, tabStop) {
+        if (!item) {
+            return h("td", null);
+        }
+        const isTabStop = position.series === (tabStop === null || tabStop === void 0 ? void 0 : tabStop.series) &&
+            position.index === (tabStop === null || tabStop === void 0 ? void 0 : tabStop.index);
+        return (h("td", { "data-series": position.series, "data-index": position.index, tabIndex: isTabStop ? 0 : -1, role: item.clickable ? 'button' : undefined, "aria-label": item.clickable ? this.getButtonLabel(item, position) : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, formatValue(item, this.valueStyle)));
+    }
+    getButtonLabel(item, position) {
+        return [
+            this.grid.categories[position.index],
+            this.grid.series[position.series].text,
+            formatValue(item, this.valueStyle),
+        ].join(', ');
+    }
+    findTabStopInGrid(grid) {
+        const focused = this.focusedPosition;
+        if (getItemAt(grid, focused)) {
+            return focused;
+        }
+        const first = { series: 0, index: 0 };
+        const series = getNearestSeries(grid, first);
+        if (series === undefined) {
+            return;
+        }
+        return Object.assign(Object.assign({}, first), { series: series });
     }
     draw() {
         var _a;
@@ -51845,20 +52341,23 @@ const Chart = class {
         this.chart.on('mouseout', this.handleChartOut);
     }
     updateChart() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const settings = this.getSettings();
         const drawnSettings = JSON.stringify(settings);
         if (drawnSettings === this.drawnSettings && !this.themeMayHaveChanged) {
             return;
         }
         this.themeMayHaveChanged = false;
-        (_a = this.themeReader) !== null && _a !== void 0 ? _a : (this.themeReader = createThemeReader(this.host.shadowRoot));
-        (_b = this.stopWatchingTheme) !== null && _b !== void 0 ? _b : (this.stopWatchingTheme = watchTheme(this.host, this.handleThemeChange));
-        const theme = this.themeReader.theme();
+        (_a = this.stopWatchingTheme) !== null && _a !== void 0 ? _a : (this.stopWatchingTheme = watchTheme(this.host, this.handleThemeChange));
+        const theme = this.getThemeReader().theme();
         const coloredSettings = this.withItemColors(settings, theme);
         const drawnTheme = JSON.stringify({
             theme: theme,
             itemColors: coloredSettings.items.map((item) => item.color),
+            seriesColors: (_b = coloredSettings.series) === null || _b === void 0 ? void 0 : _b.map((series) => [
+                series.color,
+                ...series.items.map((item) => item.color),
+            ]),
         });
         if (drawnSettings === this.drawnSettings &&
             drawnTheme === this.drawnTheme) {
@@ -51868,9 +52367,10 @@ const Chart = class {
         this.drawnTheme = drawnTheme;
         this.drawing = drawChart(coloredSettings, theme, this.itemSpace);
         this.chart.setOption(this.drawing.option, { notMerge: true });
-        const focusedRow = this.host.shadowRoot.activeElement;
-        if (focusedRow instanceof HTMLElement && focusedRow.dataset.index) {
-            this.showItem(focusedRow, true);
+        this.showSeriesColors((_d = (_c = coloredSettings.series) === null || _c === void 0 ? void 0 : _c.map((series) => series.color)) !== null && _d !== void 0 ? _d : []);
+        const focused = this.host.shadowRoot.activeElement;
+        if (focused instanceof HTMLElement && focused.dataset.index) {
+            this.showItem(focused, true);
         }
     }
     fitItemTextsToSize() {
@@ -51890,33 +52390,74 @@ const Chart = class {
     }
     getSettings() {
         var _a;
-        return Object.assign(Object.assign({ items: ((_a = this.items) !== null && _a !== void 0 ? _a : []).map((item) => ({
-                text: item.text,
-                value: item.value,
-                formattedValue: item.formattedValue,
-                color: item.color,
-                clickable: item.clickable,
-            })) }, this.valueStyle), { orientation: this.orientation, maxValue: this.maxValue, axisIncrement: this.axisIncrement, displayAxisLabels: this.displayAxisLabels, itemsLabel: this.itemsLabel, valuesLabel: this.valuesLabel, displayItemText: this.displayItemText, displayItemValue: this.displayItemValue, displayItemPercentage: this.displayItemPercentage });
+        return Object.assign(Object.assign({ items: this.drawnItems.map((item) => copyItem(item)), series: (_a = this.drawnSeries) === null || _a === void 0 ? void 0 : _a.map((series) => {
+                var _a;
+                return ({
+                    text: series.text,
+                    color: series.color,
+                    items: ((_a = series.items) !== null && _a !== void 0 ? _a : []).map((item) => copyItem(item)),
+                });
+            }), stacked: this.stacksSeries }, this.valueStyle), { orientation: this.orientation, maxValue: this.maxValue, axisIncrement: this.axisIncrement, displayAxisLabels: this.displayAxisLabels, itemsLabel: this.itemsLabel, valuesLabel: this.valuesLabel, displayItemText: this.displayItemText, displayItemValue: this.displayItemValue, displayItemPercentage: this.displayItemPercentage });
     }
     withItemColors(settings, theme) {
-        return Object.assign(Object.assign({}, settings), { items: settings.items.map((item) => (Object.assign(Object.assign({}, item), { color: this.getItemColor(item, theme) }))) });
+        var _a;
+        const seriesOfItems = getSeriesOfDrawnItems({
+            type: this.chartType,
+            items: this.items,
+            series: this.series,
+        });
+        const itemColor = seriesOfItems
+            ? this.getSeriesColor(seriesOfItems, 0, theme)
+            : theme.itemColor;
+        const itemFallback = seriesOfItems
+            ? 'the color of its series'
+            : 'the default item color';
+        return Object.assign(Object.assign({}, settings), { items: settings.items.map((item) => {
+                var _a;
+                return (Object.assign(Object.assign({}, item), { color: (_a = this.readColor(item.color, 'item', itemFallback)) !== null && _a !== void 0 ? _a : itemColor }));
+            }), series: (_a = settings.series) === null || _a === void 0 ? void 0 : _a.map((series, index) => {
+                const color = this.getSeriesColor(series, index, theme);
+                return Object.assign(Object.assign({}, series), { color: color, items: series.items.map((item) => {
+                        var _a;
+                        return (Object.assign(Object.assign({}, item), { color: (_a = this.readColor(item.color, 'item', 'the color of its series')) !== null && _a !== void 0 ? _a : color }));
+                    }) });
+            }) });
+    }
+    getSeriesColor(series, index, theme) {
+        var _a, _b;
+        return ((_b = (_a = this.readColor(series.color, 'series', 'the default series color')) !== null && _a !== void 0 ? _a : this.getThemeReader().color(getDefaultSeriesColor(index))) !== null && _b !== void 0 ? _b : theme.itemColor);
     }
-    getItemColor(item, theme) {
-        if (!item.color) {
-            return theme.itemColor;
+    showSeriesColors(colors) {
+        const shown = this.seriesColors;
+        const same = colors.length === shown.length &&
+            colors.every((color, index) => color === shown[index]);
+        if (same) {
+            return;
         }
-        const color = this.themeReader.color(item.color);
-        if (color) {
-            return color;
+        this.seriesColors = colors;
+        if (this.hasLegend) {
+            forceUpdate(this);
+        }
+    }
+    readColor(color, owner, fallback) {
+        if (!color) {
+            return;
         }
-        if (!this.invalidColors.has(item.color)) {
-            this.invalidColors.add(item.color);
-            const hint = item.color.includes('var(')
+        const resolved = this.getThemeReader().color(color);
+        if (!resolved && !this.invalidColors.has(color)) {
+            this.invalidColors.add(color);
+            const hint = color.includes('var(')
                 ? ' Check that its variables are set, and that they make a color.'
                 : '';
-            console.warn(`limel-chart: the color of an item must be a CSS color, but was \`${item.color}\`.${hint} Using the default item color instead.`);
+            const article = owner === 'item' ? 'an' : 'a';
+            console.warn(`limel-chart: the color of ${article} ${owner} must be a CSS color, but was \`${color}\`.${hint} Using ${fallback} instead.`);
         }
-        return theme.itemColor;
+        return resolved;
+    }
+    getThemeReader() {
+        var _a;
+        (_a = this.themeReader) !== null && _a !== void 0 ? _a : (this.themeReader = createThemeReader(this.host.shadowRoot));
+        return this.themeReader;
     }
     observeSize() {
         if (this.resizeObserver || typeof ResizeObserver === 'undefined') {
@@ -51934,40 +52475,102 @@ const Chart = class {
         this.drawnTheme = undefined;
         this.itemSpace = undefined;
     }
+    getClickedPosition(event) {
+        const position = findItem(this.drawing, event);
+        if (event.seriesType !== 'line' || !event.event) {
+            return position;
+        }
+        return Object.assign(Object.assign({}, position), { index: this.getNearestPlace(event.event) });
+    }
+    getNearestPlace(pixel) {
+        const landscape = this.orientation === 'landscape';
+        const place = this.chart.convertFromPixel(landscape ? { xAxisIndex: 0 } : { yAxisIndex: 0 }, landscape ? pixel.offsetX : pixel.offsetY);
+        return Math.round(place);
+    }
     highlightItemAt(event, highlight) {
         if (!this.drawing) {
             return;
         }
-        const location = locateItem(this.drawing, getItemIndex(this.drawing, event));
+        const location = locateItem(this.drawing, findItem(this.drawing, event));
         if (location.seriesIndex === event.seriesIndex) {
             return;
         }
         this.chart.dispatchAction(Object.assign({ type: highlight ? 'highlight' : 'downplay' }, location));
     }
-    getClickableItem(index) {
-        const item = this.items[index];
+    getClickableItem(position) {
+        const item = getItemAt(this.grid, position);
         if (!(item === null || item === void 0 ? void 0 : item.clickable)) {
             return;
         }
         return item;
     }
-    getRowIndex(event) {
-        return Number(event.currentTarget.dataset.index);
+    getPosition(element) {
+        var _a;
+        return {
+            series: Number((_a = element.dataset.series) !== null && _a !== void 0 ? _a : 0),
+            index: Number(element.dataset.index),
+        };
+    }
+    getEventPosition(event) {
+        return this.getPosition(event.currentTarget);
     }
-    focusItem(index) {
-        if (index === NO_NAVIGATION_TARGET) {
+    findTarget(key, position, orientation) {
+        if (!this.drawsSeries) {
+            const items = this.drawnItems;
+            const index = findNavigationTarget(items, key, position.index, {
+                orientation: orientation,
+            });
+            return { series: 0, index: index };
+        }
+        const grid = this.grid;
+        if (orientation === 'horizontal') {
+            const items = grid.series.map((series) => series.items[position.index]);
+            const series = findNavigationTarget(items, key, position.series, {
+                orientation: orientation,
+                isDisabled: (item) => !item,
+            });
+            return { series: series, index: position.index };
+        }
+        const index = findNavigationTarget(grid.categories, key, position.index, { orientation: orientation });
+        const series = getNearestSeries(grid, {
+            series: position.series,
+            index: index,
+        });
+        return { series: series !== null && series !== void 0 ? series : NO_NAVIGATION_TARGET, index: index };
+    }
+    focusItem(position) {
+        if (position.series === NO_NAVIGATION_TARGET ||
+            position.index === NO_NAVIGATION_TARGET) {
             return;
         }
-        const rows = this.host.shadowRoot.querySelectorAll('tbody tr');
-        rows[index].focus();
+        const series = this.drawsSeries
+            ? `[data-series="${position.series}"]`
+            : '';
+        const element = this.host.shadowRoot.querySelector(`tbody [data-index="${position.index}"]${series}`);
+        element === null || element === void 0 ? void 0 : element.focus();
     }
-    showItem(row, show) {
+    showItem(element, show) {
         if (!this.chart || !this.drawing) {
             return;
         }
-        const location = locateItem(this.drawing, Number(row.dataset.index));
+        const position = this.getPosition(element);
+        const location = locateItem(this.drawing, position);
         this.chart.dispatchAction(Object.assign({ type: show ? 'highlight' : 'downplay' }, location));
-        this.chart.dispatchAction(Object.assign({ type: show ? 'showTip' : 'hideTip' }, location));
+        if (!show) {
+            this.chart.dispatchAction(this.drawsSeries
+                ? { type: 'updateAxisPointer', currTrigger: 'leave' }
+                : { type: 'hideTip' });
+            return;
+        }
+        this.chart.dispatchAction(Object.assign({ type: 'showTip' }, (this.drawsSeries
+            ? this.getMiddleOfPlace(position.index)
+            : location)));
+    }
+    getMiddleOfPlace(index) {
+        const { minValue, maxValue } = this.drawing.valueRange;
+        const middle = (minValue + maxValue) / 2;
+        const [x, y] = this.chart.convertToPixel({ gridIndex: 0 }, this.orientation === 'landscape' ? [index, middle] : [middle, index]);
+        return { x: x, y: y };
     }
     get host() { return getElement(this); }
     static get watchers() { return {