@limetech/lime-elements 40.23.0 → 40.25.0

package/dist/collection/components/chart/chart.js

@@ -1,15 +1,25 @@
-import { h, Host, } from "@stencil/core";
+import { forceUpdate, h, Host, } from "@stencil/core";
 import { BarChart, GaugeChart, LineChart, PieChart, ScatterChart, } from "echarts/charts";
 import { GridComponent, PolarComponent, TooltipComponent, } from "echarts/components";
 import { init, use } from "echarts/core";
 import { SVGRenderer } from "echarts/renderers";
 import translate from "../../global/translations";
 import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGET, } from "../../util/keyboard-navigation";
-import { drawChart, fitItemTexts, getItemIndex, getItemLabel, locateItem, } from "./options";
-import { getAxisRange, isDate, MAX_AXIS_STEPS, usesAxisIncrement, } from "./scale";
+import { drawChart, findItem, fitItemTexts, getDrawnItems, getDrawnSeries, getItemLabel, getSeriesGrid, getSeriesOfDrawnItems, getSwatchStyle, isStacked, locateItem, } from "./options";
+import { canDrawSeries, canStack, getAxisRange, isDate, MAX_AXIS_STEPS, usesAxisIncrement, } from "./scale";
+import { getAllItems, getAxisItems, getItemAt, getNearestSeries, } from "./series";
 import { canWriteIn, formatValue, isCurrencyCode } from "./format";
 import { createThemeReader, watchTheme, } from "./theme";
 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 = [
     BarChart,
     GaugeChart,
@@ -30,8 +40,6 @@ const extensions = [
  * @exampleComponent limel-example-chart-orientation
  * @exampleComponent limel-example-chart-max-value
  * @exampleComponent limel-example-chart-display-item-percentage
- * @exampleComponent limel-example-chart-value-format
- * @exampleComponent limel-example-chart-value-format-date
  * @exampleComponent limel-example-chart-type-bar
  * @exampleComponent limel-example-chart-type-dot
  * @exampleComponent limel-example-chart-type-area
@@ -47,9 +55,13 @@ const extensions = [
  * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
  * @exampleComponent limel-example-chart-type-scatter-negative
  * @exampleComponent limel-example-chart-axis-increment
+ * @exampleComponent limel-example-chart-value-format
+ * @exampleComponent limel-example-chart-value-format-date
  * @exampleComponent limel-example-chart-clickable-items
  * @exampleComponent limel-example-chart-accessibility
  * @exampleComponent limel-example-chart-axis-labels
+ * @exampleComponent limel-example-chart-series
+ * @exampleComponent limel-example-chart-series-stacked
  * @exampleComponent limel-example-chart-styling
  * @beta
  */
@@ -86,6 +98,15 @@ export class Chart {
          * 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
@@ -114,7 +135,9 @@ export class Chart {
         /**
          * 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();
@@ -133,7 +156,7 @@ export class Chart {
             if (!this.drawing) {
                 return;
             }
-            const item = this.getClickableItem(getItemIndex(this.drawing, event));
+            const item = this.getClickableItem(this.getClickedPosition(event));
             if (!item) {
                 return;
             }
@@ -147,7 +170,7 @@ export class Chart {
             this.highlightItemAt(event, false);
         };
         this.handleClick = (event) => {
-            const item = this.getClickableItem(this.getRowIndex(event));
+            const item = this.getClickableItem(this.getEventPosition(event));
             if (!item) {
                 return;
             }
@@ -158,13 +181,13 @@ export class Chart {
             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;
             }
@@ -172,9 +195,9 @@ export class Chart {
             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);
@@ -184,10 +207,17 @@ export class Chart {
         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();
@@ -229,11 +259,10 @@ export class Chart {
         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) {
@@ -242,6 +271,56 @@ export class Chart {
         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,
@@ -254,7 +333,6 @@ export class Chart {
         return this.type === 'stacked-bar' ? 'proportion-bar' : this.type;
     }
     getAxisIncrementWarning() {
-        var _a;
         const increment = this.axisIncrement;
         if (increment === undefined ||
             increment === null ||
@@ -267,7 +345,7 @@ export class Chart {
         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.`;
         }
@@ -276,7 +354,19 @@ export class Chart {
         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) {
@@ -285,7 +375,18 @@ export class Chart {
         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;
@@ -296,13 +397,46 @@ export class Chart {
         return ((_a = this.accessibleValuesLabel) !== null && _a !== void 0 ? _a : translate.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;
@@ -379,20 +513,23 @@ export class Chart {
         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) {
@@ -402,9 +539,10 @@ export class Chart {
         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() {
@@ -424,33 +562,74 @@ export class Chart {
     }
     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 }));
+                    }) });
+            }) });
     }
-    getItemColor(item, theme) {
-        if (!item.color) {
-            return theme.itemColor;
+    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);
+    }
+    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);
         }
-        if (!this.invalidColors.has(item.color)) {
-            this.invalidColors.add(item.color);
-            const hint = item.color.includes('var(')
+    }
+    readColor(color, owner, fallback) {
+        if (!color) {
+            return;
+        }
+        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') {
@@ -468,40 +647,102 @@ export class Chart {
         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),
+        };
     }
-    focusItem(index) {
-        if (index === NO_NAVIGATION_TARGET) {
+    getEventPosition(event) {
+        return this.getPosition(event.currentTarget);
+    }
+    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 };
     }
     static get is() { return "limel-chart"; }
     static get encapsulation() { return "shadow"; }
@@ -594,7 +835,7 @@ export class Chart {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Helps users of assistive technologies to understand\nwhat the values in the chart represent.\nDefaults to the translation for \"value\" in the current language."
+                    "text": "Helps users of assistive technologies to understand\nwhat the values in the chart represent.\nDefaults to the translation for \"value\" in the current language.\nIn a chart with series, the series name the columns of values, and\nthis label, when it is set, heads them all."
                 },
                 "getter": false,
                 "setter": false,
@@ -696,8 +937,8 @@ export class Chart {
                         }
                     }
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "List of items in the chart,\neach representing a data point."
@@ -705,6 +946,50 @@ export class Chart {
                 "getter": false,
                 "setter": false
             },
+            "series": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChartSeries[]",
+                    "resolved": "ChartSeries[]",
+                    "references": {
+                        "ChartSeries": {
+                            "location": "import",
+                            "path": "./chart.types",
+                            "id": "src/components/chart/chart.types.ts::ChartSeries",
+                            "referenceLocation": "ChartSeries"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Groups of items that are drawn side by side, each in a color of its\nown, such as the revenue and the costs of each month. Items of\ndifferent series that have the same `text` are drawn together, at the\nsame place on the axis. When there are two series or more, a legend\nnames them.\n\n`bar`, `dot`, `line`, and `area` charts draw `series` instead of\n`items`. Other types draw `items`, or the items of the first series\nwhen `items` is not set."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "stacked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stacks the `series` on each other, so that each place on the axis\nshows their total, such as the revenue of each product, which adds up\nto the revenue of the month. Positive and negative values are stacked\non their own side of zero, and a range adds its extent to the stack.\nApplies to `bar`, `line`, and `area` charts, but not when\n`valueFormat` is `date`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stacked",
+                "defaultValue": "false"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -860,7 +1145,7 @@ export class Chart {
     }
     static get states() {
         return {
-            "focusedIndex": {}
+            "focusedPosition": {}
         };
     }
     static get events() {
@@ -872,7 +1157,7 @@ export class Chart {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fired when a chart item with `clickable` set to `true` is clicked"
+                    "text": "Fired when a chart item with `clickable` set to `true` is clicked.\nThe detail is the item itself, the same object as in `items` or in\n`series`, so a chart with series can tell which series the item\nbelongs to by comparing it with the items of each series."
                 },
                 "complexType": {
                     "original": "ChartItem",