@odoo/o-spreadsheet 17.3.0-alpha.9 → 17.3.0

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.3.0-alpha.9
- * @date 2024-05-24T11:32:11.976Z
- * @hash aac246d
+ * @version 17.3.0
+ * @date 2024-05-31T14:21:26.547Z
+ * @hash 271202e
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -40,6 +40,8 @@ const COMPOSER_ASSISTANT_COLOR = "#9B359B";
 const CHART_WATERFALL_POSITIVE_COLOR = "#006FBE";
 const CHART_WATERFALL_NEGATIVE_COLOR = "#E40000";
 const CHART_WATERFALL_SUBTOTAL_COLOR = "#AAAAAA";
+const DEFAULT_CHART_PADDING = 20;
+const DEFAULT_CHART_FONT_SIZE = 22;
 // Color picker defaults as upper case HEX to match `toHex`helper
 const COLOR_PICKER_DEFAULTS = [
     "#000000",
@@ -1088,6 +1090,44 @@ function darkenColor(color, percentage) {
     hsla.l = hsla.l - percentage * hsla.l;
     return hslaToHex(hsla);
 }
+const ColorsList = [
+    // the same colors as those used in odoo reporting
+    "rgb(31,119,180)",
+    "rgb(255,127,14)",
+    "rgb(174,199,232)",
+    "rgb(255,187,120)",
+    "rgb(44,160,44)",
+    "rgb(152,223,138)",
+    "rgb(214,39,40)",
+    "rgb(255,152,150)",
+    "rgb(148,103,189)",
+    "rgb(197,176,213)",
+    "rgb(140,86,75)",
+    "rgb(196,156,148)",
+    "rgb(227,119,194)",
+    "rgb(247,182,210)",
+    "rgb(127,127,127)",
+    "rgb(199,199,199)",
+    "rgb(188,189,34)",
+    "rgb(219,219,141)",
+    "rgb(23,190,207)",
+    "rgb(158,218,229)",
+];
+function getNthColor(index) {
+    return ColorsList[index % ColorsList.length];
+}
+class ColorGenerator {
+    currentColorIndex = 0;
+    colors;
+    constructor(colors = []) {
+        this.colors = colors;
+    }
+    next() {
+        return this.colors?.[this.currentColorIndex]
+            ? this.colors[this.currentColorIndex++]
+            : getNthColor(this.currentColorIndex++);
+    }
+}
 
 //------------------------------------------------------------------------------
 // Coordinate
@@ -1933,11 +1973,13 @@ const invalidateEvaluationCommands = new Set([
     "RENAME_SHEET",
     "DELETE_SHEET",
     "CREATE_SHEET",
+    "DUPLICATE_SHEET",
     "ADD_COLUMNS_ROWS",
     "REMOVE_COLUMNS_ROWS",
     "UNDO",
     "REDO",
     "ADD_MERGE",
+    "REMOVE_MERGE",
     "UPDATE_LOCALE",
     "ADD_PIVOT",
     "UPDATE_PIVOT",
@@ -4876,18 +4918,22 @@ function copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
 /**
  * Create a range from a xc. If the xc is empty, this function returns undefined.
  */
-function createRange(getters, sheetId, range) {
-    return range ? getters.getRangeFromSheetXC(sheetId, range) : undefined;
+function createValidRange(getters, sheetId, xc) {
+    if (!xc)
+        return;
+    const range = getters.getRangeFromSheetXC(sheetId, xc);
+    return !(range.invalidSheetName || range.invalidXc) ? range : undefined;
 }
 /**
  * Spread multiple colrows zone to one row/col zone and add a many new input range as needed.
  * For example, A1:B4 will become [A1:A4, B1:B4]
  */
-function spreadRange(getters, ranges) {
+function spreadRange(getters, dataSets) {
     const postProcessedRanges = [];
-    for (const range of ranges) {
+    for (const dataSet of dataSets) {
+        const range = dataSet.dataRange;
         if (!getters.isRangeValid(range)) {
-            postProcessedRanges.push(range); // ignore invalid range
+            postProcessedRanges.push(dataSet); // ignore invalid range
             continue;
         }
         const { sheetName } = splitReference(range);
@@ -4896,27 +4942,33 @@ function spreadRange(getters, ranges) {
         if (zone.bottom !== zone.top && zone.left != zone.right) {
             if (zone.right) {
                 for (let j = zone.left; j <= zone.right; ++j) {
-                    postProcessedRanges.push(`${sheetPrefix}${zoneToXc({
-                        left: j,
-                        right: j,
-                        top: zone.top,
-                        bottom: zone.bottom,
-                    })}`);
+                    postProcessedRanges.push({
+                        ...dataSet,
+                        dataRange: `${sheetPrefix}${zoneToXc({
+                            left: j,
+                            right: j,
+                            top: zone.top,
+                            bottom: zone.bottom,
+                        })}`,
+                    });
                 }
             }
             else {
                 for (let j = zone.top; j <= zone.bottom; ++j) {
-                    postProcessedRanges.push(`${sheetPrefix}${zoneToXc({
-                        left: zone.left,
-                        right: zone.right,
-                        top: j,
-                        bottom: j,
-                    })}`);
+                    postProcessedRanges.push({
+                        ...dataSet,
+                        dataRange: `${sheetPrefix}${zoneToXc({
+                            left: zone.left,
+                            right: zone.right,
+                            top: j,
+                            bottom: j,
+                        })}`,
+                    });
                 }
             }
         }
         else {
-            postProcessedRanges.push(range);
+            postProcessedRanges.push(dataSet);
         }
     }
     return postProcessedRanges;
@@ -5035,6 +5087,11 @@ function getDefaultCellHeight(ctx, cell, colSize) {
     const fontSize = computeTextFontSizeInPixels(cell.style);
     return computeTextLinesHeight(fontSize, numberOfLines) + 2 * PADDING_AUTORESIZE_VERTICAL;
 }
+function getDefaultContextFont(fontSize, bold = false, italic = false) {
+    const italicStr = italic ? "italic" : "";
+    const weight = bold ? "bold" : "";
+    return `${italicStr} ${weight} ${fontSize}px ${DEFAULT_FONT}`;
+}
 const textWidthCache = {};
 function computeTextWidth(context, text, style, fontUnit = "pt") {
     const font = computeTextFont(style, fontUnit);
@@ -5055,6 +5112,28 @@ function computeCachedTextWidth(context, text) {
     }
     return textWidthCache[font][text];
 }
+const textDimensionsCache = {};
+function computeTextDimension(context, text, style, fontUnit = "pt") {
+    const font = computeTextFont(style, fontUnit);
+    context.save();
+    context.font = font;
+    const dimensions = computeCachedTextDimension(context, text);
+    context.restore();
+    return dimensions;
+}
+function computeCachedTextDimension(context, text) {
+    const font = context.font;
+    if (!textDimensionsCache[font]) {
+        textDimensionsCache[font] = {};
+    }
+    if (textDimensionsCache[font][text] === undefined) {
+        const measure = context.measureText(text);
+        const width = measure.width;
+        const height = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+        textDimensionsCache[font][text] = { width, height };
+    }
+    return textDimensionsCache[font][text];
+}
 function fontSizeInPixels(fontSize) {
     return Math.round((fontSize * 96) / 72);
 }
@@ -8824,7 +8903,7 @@ function drawHighlight(renderingContext, highlight, rect) {
         }
     }
     if (!highlight.noFill) {
-        ctx.fillStyle = setColorAlpha(color, highlight.fillAlpha ?? 0.12);
+        ctx.fillStyle = setColorAlpha(toHex(color), highlight.fillAlpha ?? 0.12);
         ctx.fillRect(x, y, width, height);
     }
 }
@@ -8873,7 +8952,32 @@ class HighlightStore extends SpreadsheetStore {
     }
 }
 
-const NotificationStore = createAbstractStore("Notifications");
+class NotificationStore {
+    mutators = [
+        "notifyUser",
+        "raiseError",
+        "askConfirmation",
+        "updateNotificationCallbacks",
+    ];
+    notifyUser = (notification) => window.alert(notification);
+    askConfirmation = (content, confirm, cancel) => {
+        if (window.confirm(content)) {
+            confirm();
+        }
+        else {
+            cancel?.();
+        }
+    };
+    raiseError = (text, callback) => {
+        window.alert(text);
+        callback?.();
+    };
+    updateNotificationCallbacks(methods) {
+        this.notifyUser = methods.notifyUser || this.notifyUser;
+        this.raiseError = methods.raiseError || this.raiseError;
+        this.askConfirmation = methods.askConfirmation || this.askConfirmation;
+    }
+}
 
 const CELL_DELETED_MESSAGE = _t("The cell you are trying to edit has been deleted.");
 class ComposerStore extends SpreadsheetStore {
@@ -9894,10 +9998,10 @@ function adaptChartRange(range, applyChange) {
 /**
  * Create the dataSet objects from xcs
  */
-function createDataSets(getters, dataSetsString, sheetId, dataSetsHaveTitle) {
+function createDataSets(getters, customizedDataSets, sheetId, dataSetsHaveTitle) {
     const dataSets = [];
-    for (const sheetXC of dataSetsString) {
-        const dataRange = getters.getRangeFromSheetXC(sheetId, sheetXC);
+    for (const dataSet of customizedDataSets) {
+        const dataRange = getters.getRangeFromSheetXC(sheetId, dataSet.dataRange);
         const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName, invalidXc } = dataRange;
         if (invalidSheetName || invalidXc) {
             continue;
@@ -9914,26 +10018,36 @@ function createDataSets(getters, dataSetsString, sheetId, dataSetsHaveTitle) {
                     left: column,
                     right: column,
                 };
-                dataSets.push(createDataSet(getters, dataSetSheetId, columnZone, dataSetsHaveTitle
-                    ? {
-                        top: columnZone.top,
-                        bottom: columnZone.top,
-                        left: columnZone.left,
-                        right: columnZone.left,
-                    }
-                    : undefined));
+                dataSets.push({
+                    ...createDataSet(getters, dataSetSheetId, columnZone, dataSetsHaveTitle
+                        ? {
+                            top: columnZone.top,
+                            bottom: columnZone.top,
+                            left: columnZone.left,
+                            right: columnZone.left,
+                        }
+                        : undefined),
+                    backgroundColor: dataSet.backgroundColor,
+                    rightYAxis: dataSet.yAxisId === "y1",
+                    customLabel: dataSet.label,
+                });
             }
         }
         else {
             /* 1 cell, 1 row or 1 column */
-            dataSets.push(createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
-                ? {
-                    top: zone.top,
-                    bottom: zone.top,
-                    left: zone.left,
-                    right: zone.left,
-                }
-                : undefined));
+            dataSets.push({
+                ...createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
+                    ? {
+                        top: zone.top,
+                        bottom: zone.top,
+                        left: zone.left,
+                        right: zone.left,
+                    }
+                    : undefined),
+                backgroundColor: dataSet.backgroundColor,
+                rightYAxis: dataSet.yAxisId === "y1",
+                customLabel: dataSet.label,
+            });
         }
     }
     return dataSets;
@@ -9973,11 +10087,24 @@ function toExcelDataset(getters, ds) {
         }
     }
     const dataRange = ds.dataRange.clone({ zone: dataZone });
+    let label = {};
+    if (ds.customLabel) {
+        label = {
+            text: ds.customLabel,
+        };
+    }
+    else if (ds.labelCell) {
+        label = {
+            reference: getters.getRangeString(ds.labelCell, "forceSheetReference", {
+                useFixedReference: true,
+            }),
+        };
+    }
     return {
-        label: ds.labelCell
-            ? getters.getRangeString(ds.labelCell, "forceSheetReference", { useFixedReference: true })
-            : undefined,
+        label,
         range: getters.getRangeString(dataRange, "forceSheetReference", { useFixedReference: true }),
+        backgroundColor: ds.backgroundColor,
+        rightYAxis: ds.rightYAxis,
     };
 }
 function toExcelLabelRange(getters, labelRange, shouldRemoveFirstLabel) {
@@ -10003,45 +10130,16 @@ function transformChartDefinitionWithDataSetsWithZone(definition, executed) {
         labelRange = labelZone ? zoneToXc(labelZone) : undefined;
     }
     const dataSets = definition.dataSets
-        .map(toUnboundedZone)
+        .map((ds) => toUnboundedZone(ds.dataRange))
         .map((zone) => transformZone(zone, executed))
         .filter(isDefined)
-        .map(zoneToXc);
+        .map((xc) => ({ dataRange: zoneToXc(xc) }));
     return {
         ...definition,
         labelRange,
         dataSets,
     };
 }
-const GraphColors = [
-    // the same colors as those used in odoo reporting
-    "rgb(31,119,180)",
-    "rgb(255,127,14)",
-    "rgb(174,199,232)",
-    "rgb(255,187,120)",
-    "rgb(44,160,44)",
-    "rgb(152,223,138)",
-    "rgb(214,39,40)",
-    "rgb(255,152,150)",
-    "rgb(148,103,189)",
-    "rgb(197,176,213)",
-    "rgb(140,86,75)",
-    "rgb(196,156,148)",
-    "rgb(227,119,194)",
-    "rgb(247,182,210)",
-    "rgb(127,127,127)",
-    "rgb(199,199,199)",
-    "rgb(188,189,34)",
-    "rgb(219,219,141)",
-    "rgb(23,190,207)",
-    "rgb(158,218,229)",
-];
-class ChartColors {
-    graphColorIndex = 0;
-    next() {
-        return GraphColors[this.graphColorIndex++ % GraphColors.length];
-    }
-}
 /**
  * Choose a font color based on a background color.
  * The font is white with a dark background.
@@ -10054,11 +10152,11 @@ function chartFontColor(backgroundColor) {
 }
 function checkDataset(definition) {
     if (definition.dataSets) {
-        const invalidRanges = definition.dataSets.find((range) => !rangeReference.test(range)) !== undefined;
+        const invalidRanges = definition.dataSets.find((range) => !rangeReference.test(range.dataRange)) !== undefined;
         if (invalidRanges) {
             return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
         }
-        const zones = definition.dataSets.map(toUnboundedZone);
+        const zones = definition.dataSets.map((ds) => toUnboundedZone(ds.dataRange));
         if (zones.some((zone) => zone.top !== zone.bottom && isFullRow(zone))) {
             return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
         }
@@ -10098,6 +10196,35 @@ function getChartPositionAtCenterOfViewport(getters, chartSize) {
     }; // Position at the center of the scrollable viewport
     return position;
 }
+function getChartAxisTitleRuntime(design) {
+    if (design?.title?.text) {
+        const { text, color, align, italic, bold } = design.title;
+        return {
+            display: true,
+            text,
+            color,
+            font: {
+                style: italic ? "italic" : "normal",
+                weight: bold ? "bold" : "normal",
+            },
+            align: align === "left" ? "start" : align === "right" ? "end" : "center",
+        };
+    }
+    return;
+}
+function getDefinedAxis(definition) {
+    let useLeftAxis = false, useRightAxis = false;
+    for (const design of definition.dataSets || []) {
+        if (design.yAxisId === "y1") {
+            useRightAxis = true;
+        }
+        else {
+            useLeftAxis = true;
+        }
+    }
+    useLeftAxis ||= !useRightAxis;
+    return { useLeftAxis, useRightAxis };
+}
 
 function getBaselineText(baseline, keyValue, baselineMode, humanize, locale) {
     if (!baseline) {
@@ -10199,8 +10326,8 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     type = "scorecard";
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
-        this.keyValue = createRange(getters, sheetId, definition.keyValue);
-        this.baseline = createRange(getters, sheetId, definition.baseline);
+        this.keyValue = createValidRange(getters, sheetId, definition.keyValue);
+        this.baseline = createValidRange(getters, sheetId, definition.baseline);
         this.baselineMode = definition.baselineMode;
         this.baselineDescr = definition.baselineDescr;
         this.background = definition.background;
@@ -10215,8 +10342,8 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
         return {
             background: context.background,
             type: "scorecard",
-            keyValue: context.range ? context.range[0] : undefined,
-            title: context.title || "",
+            keyValue: context.range ? context.range[0].dataRange : undefined,
+            title: context.title || { text: "" },
             baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
             baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
             baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
@@ -10254,7 +10381,9 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     getContextCreation() {
         return {
             ...this,
-            range: this.keyValue ? [this.getters.getRangeString(this.keyValue, this.sheetId)] : undefined,
+            range: this.keyValue
+                ? [{ dataRange: this.getters.getRangeString(this.keyValue, this.sheetId) }]
+                : undefined,
             auxiliaryRange: this.baseline
                 ? this.getters.getRangeString(this.baseline, this.sheetId)
                 : undefined,
@@ -10301,7 +10430,10 @@ function drawScoreChart(structure, canvas) {
     if (structure.title) {
         ctx.font = structure.title.style.font;
         ctx.fillStyle = structure.title.style.color;
+        const baseline = ctx.textBaseline;
+        ctx.textBaseline = "middle";
         ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, canvas.width - structure.title.position.x), structure.title.position.x, structure.title.position.y);
+        ctx.textBaseline = baseline;
     }
     if (structure.baseline) {
         ctx.font = structure.baseline.style.font;
@@ -10388,7 +10520,10 @@ function createScorecardChartRuntime(chart, getters) {
         ? toNumber(baselineDisplay, locale)
         : 0;
     return {
-        title: _t(chart.title),
+        title: {
+            ...chart.title,
+            text: _t(chart.title.text ?? ""),
+        },
         keyValue: formattedKeyValue,
         baselineDisplay,
         baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
@@ -10420,10 +10555,9 @@ function createScorecardChartRuntime(chart, getters) {
 }
 
 /* Sizes of boxes containing the texts, in percentage of the Chart size */
-const TITLE_FONT_SIZE = 18;
 const KEY_BOX_HEIGHT_RATIO = 0.8;
 /* Padding at the border of the chart */
-const CHART_PADDING = 10;
+const CHART_PADDING = DEFAULT_CHART_PADDING;
 const BOTTOM_PADDING_RATIO = 0.05;
 /**
  * Line height (in em)
@@ -10434,11 +10568,6 @@ function formatBaselineDescr(baselineDescr, baseline) {
     const _baselineDescr = baselineDescr || "";
     return baseline && _baselineDescr ? " " + _baselineDescr : _baselineDescr;
 }
-function getDefaultContextFont(fontSize, bold = false, italic = false) {
-    const italicStr = italic ? "italic" : "";
-    const weight = bold ? "bold" : "";
-    return `${italicStr} ${weight} ${fontSize}px ${DEFAULT_FONT}`;
-}
 function getScorecardConfiguration({ width, height }, runtime) {
     const designer = new ScorecardChartConfigBuilder({ width, height }, runtime);
     return designer.computeDesign();
@@ -10466,13 +10595,25 @@ class ScorecardChartConfigBuilder {
         const style = this.getTextStyles();
         let titleHeight = 0;
         if (this.title) {
-            ({ height: titleHeight } = this.getFullTextDimensions(this.title, style.title.font));
+            let x, titleWidth;
+            ({ height: titleHeight, width: titleWidth } = this.getFullTextDimensions(this.title, style.title.font));
+            switch (this.runtime.title.align) {
+                case "center":
+                    x = (this.width - titleWidth) / 2;
+                    break;
+                case "right":
+                    x = this.width - titleWidth - CHART_PADDING;
+                    break;
+                case "left":
+                default:
+                    x = CHART_PADDING;
+            }
             structure.title = {
                 text: this.title,
                 style: style.title,
                 position: {
-                    x: CHART_PADDING,
-                    y: CHART_PADDING / 2 + titleHeight,
+                    x,
+                    y: CHART_PADDING + titleHeight / 2,
                 },
             };
         }
@@ -10573,7 +10714,7 @@ class ScorecardChartConfigBuilder {
         return structure;
     }
     get title() {
-        return this.runtime.title;
+        return this.runtime.title.text ?? "";
     }
     get keyValue() {
         return this.runtime.keyValue;
@@ -10641,8 +10782,8 @@ class ScorecardChartConfigBuilder {
         }
         return {
             title: {
-                font: getDefaultContextFont(TITLE_FONT_SIZE),
-                color: this.secondaryFontColor,
+                font: getDefaultContextFont(DEFAULT_CHART_FONT_SIZE, this.runtime.title.bold, this.runtime.title.italic),
+                color: this.runtime.title.color ?? this.secondaryFontColor,
             },
             keyValue: {
                 color: this.runtime.keyValueStyle?.textColor || this.runtime.fontColor,
@@ -10675,7 +10816,7 @@ class ScorecardChartConfigBuilder {
     getDrawableHeight() {
         const verticalPadding = CHART_PADDING + this.height * BOTTOM_PADDING_RATIO;
         let availableHeight = this.height - 2 * verticalPadding;
-        availableHeight -= this.title ? TITLE_FONT_SIZE * LINE_HEIGHT : 0;
+        availableHeight -= this.title ? DEFAULT_CHART_FONT_SIZE * LINE_HEIGHT : 0;
         return availableHeight;
     }
 }
@@ -12025,7 +12166,7 @@ const COUNTUNIQUEIFS = {
     compute: function (range, ...args) {
         let uniqueValues = new Set();
         visitMatchingRanges(args, (i, j) => {
-            const data = range[i][j];
+            const data = range[i]?.[j];
             if (isDataNonEmpty(data)) {
                 uniqueValues.add(data.value);
             }
@@ -12655,7 +12796,7 @@ const SUMIF = {
         }
         let sum = 0;
         visitMatchingRanges([criteriaRange, criterion], (i, j) => {
-            const value = sumRange[i][j].value;
+            const value = sumRange[i]?.[j]?.value;
             if (typeof value === "number") {
                 sum += value;
             }
@@ -12680,7 +12821,7 @@ const SUMIFS = {
     compute: function (sumRange, ...criters) {
         let sum = 0;
         visitMatchingRanges(criters, (i, j) => {
-            const value = sumRange[i][j].value;
+            const value = sumRange[i]?.[j]?.value;
             if (typeof value === "number") {
                 sum += value;
             }
@@ -13227,7 +13368,7 @@ const AVERAGEIF = {
         let count = 0;
         let sum = 0;
         visitMatchingRanges([criteriaRange, criterion], (i, j) => {
-            const value = _averageRange[i][j].value;
+            const value = _averageRange[i]?.[j]?.value;
             if (typeof value === "number") {
                 count += 1;
                 sum += value;
@@ -13256,7 +13397,7 @@ const AVERAGEIFS = {
         let count = 0;
         let sum = 0;
         visitMatchingRanges(args, (i, j) => {
-            const value = _averageRange[i][j].value;
+            const value = _averageRange[i]?.[j]?.value;
             if (typeof value === "number") {
                 count += 1;
                 sum += value;
@@ -13561,7 +13702,7 @@ const MAXIFS = {
     compute: function (range, ...args) {
         let result = -Infinity;
         visitMatchingRanges(args, (i, j) => {
-            const value = range[i][j].value;
+            const value = range[i]?.[j]?.value;
             if (typeof value === "number") {
                 result = result < value ? value : result;
             }
@@ -13644,7 +13785,7 @@ const MINIFS = {
     compute: function (range, ...args) {
         let result = Infinity;
         visitMatchingRanges(args, (i, j) => {
-            const value = range[i][j].value;
+            const value = range[i]?.[j]?.value;
             if (typeof value === "number") {
                 result = result > value ? value : result;
             }
@@ -22101,9 +22242,9 @@ const GAUGE_TEXT_COLOR_HIGH_CONTRAST = "#C8C8C8";
 const GAUGE_INFLECTION_MARKER_COLOR = "#666666aa";
 const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
 const GAUGE_TITLE_SECTION_HEIGHT = 25;
-const GAUGE_TITLE_FONT_SIZE = 18;
-const GAUGE_TITLE_PADDING_LEFT = 10;
-const GAUGE_TITLE_PADDING_TOP = 5;
+const GAUGE_TITLE_FONT_SIZE = DEFAULT_CHART_FONT_SIZE;
+const GAUGE_TITLE_PADDING_LEFT = DEFAULT_CHART_PADDING;
+const GAUGE_TITLE_PADDING_TOP = DEFAULT_CHART_PADDING;
 function drawGaugeChart(canvas, runtime) {
     const canvasBoundingRect = canvas.getBoundingClientRect();
     canvas.width = canvasBoundingRect.width;
@@ -22178,7 +22319,8 @@ function drawInflectionValues(ctx, config) {
 function drawTitle(ctx, config) {
     ctx.save();
     const title = config.title;
-    ctx.font = `${title.fontSize}px ${DEFAULT_FONT}`;
+    ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
+    ctx.textBaseline = "middle";
     ctx.fillStyle = title.color;
     ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
     ctx.restore();
@@ -22187,7 +22329,7 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
     const maxValue = runtime.maxValue;
     const minValue = runtime.minValue;
     const gaugeValue = runtime.gaugeValue;
-    const gaugeRect = getGaugeRect(boundingRect, runtime.title);
+    const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
     const gaugeArcWidth = gaugeRect.width / 6;
     const gaugePercentage = gaugeValue
         ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
@@ -22217,17 +22359,35 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
     };
     const textColor = getContrastedTextColor(runtime.background);
     const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
+    let x = 0, titleWidth = 0, titleHeight = 0;
+    if (runtime.title.text) {
+        ({ width: titleWidth, height: titleHeight } = computeTextDimension(ctx, runtime.title.text, { ...runtime.title, fontSize: GAUGE_TITLE_FONT_SIZE }, "px"));
+    }
+    switch (runtime.title.align) {
+        case "right":
+            x = boundingRect.width - titleWidth - GAUGE_TITLE_PADDING_LEFT;
+            break;
+        case "center":
+            x = (boundingRect.width - titleWidth) / 2;
+            break;
+        case "left":
+        default:
+            x = GAUGE_TITLE_PADDING_LEFT;
+            break;
+    }
     return {
         width: boundingRect.width,
         height: boundingRect.height,
         title: {
-            label: runtime.title,
+            label: runtime.title.text ?? "",
             fontSize: GAUGE_TITLE_FONT_SIZE,
             textPosition: {
-                x: GAUGE_TITLE_PADDING_LEFT,
-                y: GAUGE_TITLE_PADDING_TOP + GAUGE_TITLE_FONT_SIZE,
+                x,
+                y: GAUGE_TITLE_PADDING_TOP + titleHeight / 2,
             },
-            color: textColor,
+            color: runtime.title.color ?? textColor,
+            bold: runtime.title.bold,
+            italic: runtime.title.italic,
         },
         backgroundColor: runtime.background,
         gauge: {
@@ -22517,12 +22677,18 @@ function truncateLabel(label) {
  * Get a default chart js configuration
  */
 function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, truncateLabels }) {
+    const chartTitle = chart.title.text ? chart.title : { ...chart.title, content: "" };
     const options = {
         // https://www.chartjs.org/docs/latest/general/responsive.html
         responsive: true, // will resize when its container is resized
         maintainAspectRatio: false, // doesn't maintain the aspect ration (width/height =2 by default) so the user has the choice of the exact layout
         layout: {
-            padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
+            padding: {
+                left: DEFAULT_CHART_PADDING,
+                right: DEFAULT_CHART_PADDING,
+                top: chartTitle.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5,
+                bottom: DEFAULT_CHART_PADDING,
+            },
         },
         elements: {
             line: {
@@ -22535,10 +22701,15 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, tr
         animation: false,
         plugins: {
             title: {
-                display: !!chart.title,
-                text: _t(chart.title),
-                color: fontColor,
-                font: { size: 22, weight: "normal" },
+                display: !!chartTitle.text,
+                text: _t(chartTitle.text),
+                color: chartTitle?.color ?? fontColor,
+                align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
+                font: {
+                    size: DEFAULT_CHART_FONT_SIZE,
+                    weight: chartTitle.bold ? "bold" : "normal",
+                    style: chartTitle.italic ? "italic" : "normal",
+                },
             },
             legend: {
                 // Disable default legend onClick (show/hide dataset), to allow us to set a global onClick on the chart container.
@@ -22673,9 +22844,10 @@ function chartToImage(runtime, figure, type) {
     // we have to add the canvas to the DOM otherwise it won't be rendered
     document.body.append(div);
     if ("chartJsConfig" in runtime) {
-        runtime.chartJsConfig.plugins = [backgroundColorChartJSPlugin];
+        const config = deepCopy(runtime.chartJsConfig);
+        config.plugins = [backgroundColorChartJSPlugin];
         // @ts-ignore
-        const chart = new window.Chart(canvas, runtime.chartJsConfig);
+        const chart = new window.Chart(canvas, config);
         const imgContent = chart.toBase64Image();
         chart.destroy();
         div.remove();
@@ -22716,22 +22888,24 @@ class BarChart extends AbstractChart {
     dataSets;
     labelRange;
     background;
-    verticalAxisPosition;
     legendPosition;
     stacked;
     aggregated;
     type = "bar";
     dataSetsHaveTitle;
+    dataSetDesign;
+    axesDesign;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
-        this.labelRange = createRange(getters, sheetId, definition.labelRange);
+        this.labelRange = createValidRange(getters, sheetId, definition.labelRange);
         this.background = definition.background;
-        this.verticalAxisPosition = definition.verticalAxisPosition;
         this.legendPosition = definition.legendPosition;
         this.stacked = definition.stacked;
         this.aggregated = definition.aggregated;
         this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+        this.dataSetDesign = definition.dataSets;
+        this.axesDesign = definition.axesDesign;
     }
     static transformDefinition(definition, executed) {
         return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -22742,21 +22916,28 @@ class BarChart extends AbstractChart {
     static getDefinitionFromContextCreation(context) {
         return {
             background: context.background,
-            dataSets: context.range ? context.range : [],
+            dataSets: context.range ?? [],
             dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             stacked: context.stacked ?? false,
             aggregated: context.aggregated ?? false,
             legendPosition: context.legendPosition ?? "top",
-            title: context.title || "",
+            title: context.title || { text: "" },
             type: "bar",
-            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
+            axesDesign: context.axesDesign,
         };
     }
     getContextCreation() {
+        const range = [];
+        for (const [i, dataSet] of this.dataSets.entries()) {
+            range.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, this.sheetId),
+            });
+        }
         return {
             ...this,
-            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            range,
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
@@ -22776,19 +22957,26 @@ class BarChart extends AbstractChart {
         return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
     }
     getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        const ranges = [];
+        for (const [i, dataSet] of dataSets.entries()) {
+            ranges.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, targetSheetId || this.sheetId),
+            });
+        }
         return {
             type: "bar",
             dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
             background: this.background,
-            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            dataSets: ranges,
             legendPosition: this.legendPosition,
-            verticalAxisPosition: this.verticalAxisPosition,
             labelRange: labelRange
                 ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
                 : undefined,
             title: this.title,
             stacked: this.stacked,
             aggregated: this.aggregated,
+            axesDesign: this.axesDesign,
         };
     }
     getDefinitionForExcel() {
@@ -22799,12 +22987,14 @@ class BarChart extends AbstractChart {
             .map((ds) => toExcelDataset(this.getters, ds))
             .filter((ds) => ds.range !== "" && ds.range !== CellErrorType.InvalidReference);
         const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+        const definition = this.getDefinition();
         return {
-            ...this.getDefinition(),
+            ...definition,
             backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
             fontColor: toXlsxHexColor(chartFontColor(this.background)),
             dataSets,
             labelRange,
+            verticalAxis: getDefinedAxis(definition),
         };
     }
     updateRanges(applyChange) {
@@ -22838,30 +23028,51 @@ function getBarConfiguration(chart, labels, localeFormat) {
                 padding: 5,
                 color: fontColor,
             },
+            title: getChartAxisTitleRuntime(chart.axesDesign?.x),
         },
-        y: {
-            position: chart.verticalAxisPosition,
-            beginAtZero: true, // the origin of the y axis is always zero
-            ticks: {
-                color: fontColor,
-                callback: (value) => {
-                    value = Number(value);
-                    if (isNaN(value))
-                        return value;
-                    const { locale, format } = localeFormat;
-                    return formatValue(value, {
-                        locale,
-                        format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
-                    });
-                },
+    };
+    const yAxis = {
+        beginAtZero: true, // the origin of the y axis is always zero
+        ticks: {
+            color: fontColor,
+            callback: (value) => {
+                value = Number(value);
+                if (isNaN(value))
+                    return value;
+                const { locale, format } = localeFormat;
+                return formatValue(value, {
+                    locale,
+                    format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
+                });
             },
         },
     };
+    const { useLeftAxis, useRightAxis } = getDefinedAxis(chart.getDefinition());
+    if (useLeftAxis) {
+        config.options.scales.y = {
+            ...yAxis,
+            position: "left",
+            title: getChartAxisTitleRuntime(chart.axesDesign?.y),
+        };
+    }
+    if (useRightAxis) {
+        config.options.scales.y1 = {
+            ...yAxis,
+            position: "right",
+            title: getChartAxisTitleRuntime(chart.axesDesign?.y1),
+        };
+    }
     if (chart.stacked) {
         // @ts-ignore chart.js type is broken
         config.options.scales.x.stacked = true;
-        // @ts-ignore chart.js type is broken
-        config.options.scales.y.stacked = true;
+        if (useLeftAxis) {
+            // @ts-ignore chart.js type is broken
+            config.options.scales.y.stacked = true;
+        }
+        if (useRightAxis) {
+            // @ts-ignore chart.js type is broken
+            config.options.scales.y1.stacked = true;
+        }
     }
     return config;
 }
@@ -22881,8 +23092,9 @@ function createBarChartRuntime(chart, getters) {
     const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
     const locale = getters.getLocale();
     const config = getBarConfiguration(chart, labels, { format: dataSetFormat, locale });
-    const colors = new ChartColors();
-    for (let { label, data } of dataSetsValues) {
+    const colors = new ColorGenerator();
+    const definition = chart.getDefinition();
+    for (const { label, data } of dataSetsValues) {
         const color = colors.next();
         const dataset = {
             label,
@@ -22892,29 +23104,43 @@ function createBarChartRuntime(chart, getters) {
         };
         config.data.datasets.push(dataset);
     }
+    for (const [index, dataset] of config.data.datasets.entries()) {
+        if (definition.dataSets?.[index]?.backgroundColor) {
+            const color = definition.dataSets[index].backgroundColor;
+            dataset.backgroundColor = color;
+            dataset.borderColor = color;
+        }
+        if (definition.dataSets?.[index]?.label) {
+            const label = definition.dataSets[index].label;
+            dataset.label = label;
+        }
+        if (definition.dataSets?.[index]?.yAxisId) {
+            dataset["yAxisID"] = definition.dataSets[index].yAxisId;
+        }
+    }
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
 class ComboChart extends AbstractChart {
-    useBothYAxis;
     dataSets;
     labelRange;
     background;
-    verticalAxisPosition;
     legendPosition;
     aggregated;
     dataSetsHaveTitle;
+    dataSetDesign;
+    axesDesign;
     type = "combo";
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
-        this.labelRange = createRange(getters, sheetId, definition.labelRange);
+        this.labelRange = createValidRange(getters, sheetId, definition.labelRange);
         this.background = definition.background;
-        this.verticalAxisPosition = definition.verticalAxisPosition;
         this.legendPosition = definition.legendPosition;
         this.aggregated = definition.aggregated;
         this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
-        this.useBothYAxis = definition.useBothYAxis;
+        this.dataSetDesign = definition.dataSets;
+        this.axesDesign = definition.axesDesign;
     }
     static transformDefinition(definition, executed) {
         return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -22923,9 +23149,16 @@ class ComboChart extends AbstractChart {
         return validator.checkValidations(definition, checkDataset, checkLabelRange);
     }
     getContextCreation() {
+        const range = [];
+        for (const [i, dataSet] of this.dataSets.entries()) {
+            range.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, this.sheetId),
+            });
+        }
         return {
             ...this,
-            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            range,
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
@@ -22935,19 +23168,25 @@ class ComboChart extends AbstractChart {
         return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
     }
     getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        const ranges = [];
+        for (const [i, dataSet] of dataSets.entries()) {
+            ranges.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, targetSheetId || this.sheetId),
+            });
+        }
         return {
             type: "combo",
             dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
             background: this.background,
-            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            dataSets: ranges,
             legendPosition: this.legendPosition,
-            verticalAxisPosition: this.verticalAxisPosition,
             labelRange: labelRange
                 ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
                 : undefined,
             title: this.title,
             aggregated: this.aggregated,
-            useBothYAxis: this.useBothYAxis,
+            axesDesign: this.axesDesign,
         };
     }
     getDefinitionForExcel() {
@@ -22959,12 +23198,14 @@ class ComboChart extends AbstractChart {
             .map((ds) => toExcelDataset(this.getters, ds))
             .filter((ds) => ds.range !== "" && ds.range !== CellErrorType.InvalidReference);
         const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+        const definition = this.getDefinition();
         return {
-            ...this.getDefinition(),
+            ...definition,
             backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
             fontColor: toXlsxHexColor(chartFontColor(this.background)),
             dataSets,
             labelRange,
+            verticalAxis: getDefinedAxis(definition),
         };
     }
     updateRanges(applyChange) {
@@ -22982,11 +23223,10 @@ class ComboChart extends AbstractChart {
             dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             aggregated: context.aggregated,
             legendPosition: context.legendPosition ?? "top",
-            title: context.title || "",
-            verticalAxisPosition: context.verticalAxisPosition ?? "left",
+            title: context.title || { text: "" },
             labelRange: context.auxiliaryRange || undefined,
             type: "combo",
-            useBothYAxis: false,
+            axesDesign: context.axesDesign,
         };
     }
     copyForSheetId(sheetId) {
@@ -23001,7 +23241,10 @@ class ComboChart extends AbstractChart {
     }
 }
 function createComboChartRuntime(chart, getters) {
-    const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
+    const mainDataSetFormat = chart.dataSets.length
+        ? getChartDatasetFormat(getters, [chart.dataSets[0]])
+        : undefined;
+    const lineDataSetsFormat = getChartDatasetFormat(getters, chart.dataSets.slice(1));
     const locale = getters.getLocale();
     const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
     let labels = labelValues.formattedValues;
@@ -23015,11 +23258,12 @@ function createComboChartRuntime(chart, getters) {
     if (chart.aggregated) {
         ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
     }
-    const localeFormat = { format: dataSetFormat, locale };
+    const localeFormat = { format: mainDataSetFormat, locale };
     const fontColor = chartFontColor(chart.background);
     const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
     const legend = {
         labels: { color: fontColor },
+        reverse: true,
     };
     if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
         legend.display = false;
@@ -23037,52 +23281,64 @@ function createComboChartRuntime(chart, getters) {
                 padding: 5,
                 color: fontColor,
             },
+            title: getChartAxisTitleRuntime(chart.axesDesign?.x),
         },
     };
-    const verticalAxis = {
+    const formatCallback = (format) => {
+        return (value) => {
+            value = Number(value);
+            if (isNaN(value))
+                return value;
+            const { locale } = localeFormat;
+            return formatValue(value, {
+                locale,
+                format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
+            });
+        };
+    };
+    const leftVerticalAxis = {
         beginAtZero: true, // the origin of the y axis is always zero
         ticks: {
             color: fontColor,
-            callback: (value) => {
-                value = Number(value);
-                if (isNaN(value))
-                    return value;
-                const { locale, format } = localeFormat;
-                return formatValue(value, {
-                    locale,
-                    format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
-                });
-            },
+            callback: formatCallback(mainDataSetFormat),
         },
     };
-    if (chart.useBothYAxis) {
+    const rightVerticalAxis = {
+        beginAtZero: true, // the origin of the y axis is always zero
+        ticks: {
+            color: fontColor,
+            callback: formatCallback(lineDataSetsFormat),
+        },
+    };
+    const definition = chart.getDefinition();
+    const { useLeftAxis, useRightAxis } = getDefinedAxis(definition);
+    if (useLeftAxis) {
         config.options.scales.y = {
-            ...verticalAxis,
+            ...leftVerticalAxis,
             position: "left",
+            title: getChartAxisTitleRuntime(chart.axesDesign?.y),
         };
+    }
+    if (useRightAxis) {
         config.options.scales.y1 = {
-            ...verticalAxis,
+            ...rightVerticalAxis,
             position: "right",
             grid: {
                 display: false,
             },
+            title: getChartAxisTitleRuntime(chart.axesDesign?.y1),
         };
     }
-    else {
-        config.options.scales.y = {
-            ...verticalAxis,
-            position: chart.verticalAxisPosition,
-        };
-    }
-    const colors = new ChartColors();
+    const colors = new ColorGenerator();
     for (let [index, { label, data }] of dataSetsValues.entries()) {
+        const design = definition.dataSets[index];
         const color = colors.next();
         const dataset = {
-            label,
+            label: design?.label ?? label,
             data,
-            borderColor: color,
-            backgroundColor: color,
-            yAxisID: index > 0 && chart.useBothYAxis ? "y1" : "y",
+            borderColor: design?.backgroundColor ?? color,
+            backgroundColor: design.backgroundColor ?? color,
+            yAxisID: design?.yAxisId ?? "y",
             type: index === 0 ? "bar" : "line",
             order: -index,
         };
@@ -23163,7 +23419,7 @@ class GaugeChart extends AbstractChart {
     type = "gauge";
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
-        this.dataRange = createRange(this.getters, this.sheetId, definition.dataRange);
+        this.dataRange = createValidRange(this.getters, this.sheetId, definition.dataRange);
         this.sectionRule = definition.sectionRule;
         this.background = definition.background;
     }
@@ -23183,9 +23439,9 @@ class GaugeChart extends AbstractChart {
     static getDefinitionFromContextCreation(context) {
         return {
             background: context.background,
-            title: context.title || "",
+            title: context.title || { text: "" },
             type: "gauge",
-            dataRange: context.range ? context.range[0] : undefined,
+            dataRange: context.range ? context.range[0].dataRange : undefined,
             sectionRule: {
                 colors: {
                     lowerColor: DEFAULT_GAUGE_LOWER_COLOR,
@@ -23236,7 +23492,7 @@ class GaugeChart extends AbstractChart {
         return {
             ...this,
             range: this.dataRange
-                ? [this.getters.getRangeString(this.dataRange, this.sheetId)]
+                ? [{ dataRange: this.getters.getRangeString(this.dataRange, this.sheetId) }]
                 : undefined,
         };
     }
@@ -23299,7 +23555,7 @@ function createGaugeChartRuntime(chart, getters) {
     colors.push(chartColors.upperColor);
     return {
         background: getters.getStyleOfSingleCellChart(chart.background, dataRange).background,
-        title: chart.title,
+        title: chart.title ?? { text: "" },
         minValue: {
             value: minValue,
             label: formatValue(minValue, { locale, format }),
@@ -23557,28 +23813,49 @@ function getLineOrScatterConfiguration(chart, labels, options) {
                 padding: 5,
                 color: fontColor,
             },
+            title: getChartAxisTitleRuntime(chart.axesDesign?.x),
         },
-        y: {
-            position: chart.verticalAxisPosition,
-            beginAtZero: true, // the origin of the y axis is always zero
-            ticks: {
-                color: fontColor,
-                callback: (value) => {
-                    value = Number(value);
-                    if (isNaN(value))
-                        return value;
-                    const { locale, format } = options;
-                    return formatValue(value, {
-                        locale,
-                        format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
-                    });
-                },
+    };
+    const yAxis = {
+        beginAtZero: true, // the origin of the y axis is always zero
+        ticks: {
+            color: fontColor,
+            callback: (value) => {
+                value = Number(value);
+                if (isNaN(value))
+                    return value;
+                const { locale, format } = options;
+                return formatValue(value, {
+                    locale,
+                    format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
+                });
             },
         },
     };
-    if ("stacked" in chart && chart.stacked && config.options?.scales?.y) {
-        // @ts-ignore chart.js type is wrong
-        config.options.scales.y.stacked = true;
+    const { useLeftAxis, useRightAxis } = getDefinedAxis(chart.getDefinition());
+    if (useLeftAxis) {
+        config.options.scales.y = {
+            ...yAxis,
+            position: "left",
+            title: getChartAxisTitleRuntime(chart.axesDesign?.y),
+        };
+    }
+    if (useRightAxis) {
+        config.options.scales.y1 = {
+            ...yAxis,
+            position: "right",
+            title: getChartAxisTitleRuntime(chart.axesDesign?.y1),
+        };
+    }
+    if ("stacked" in chart && chart.stacked) {
+        if (useLeftAxis) {
+            // @ts-ignore chart.js type is broken
+            config.options.scales.y.stacked = true;
+        }
+        if (useRightAxis) {
+            // @ts-ignore chart.js type is broken
+            config.options.scales.y1.stacked = true;
+        }
     }
     return config;
 }
@@ -23625,7 +23902,8 @@ function createLineOrScatterChartRuntime(chart, getters) {
     }
     const stacked = "stacked" in chart ? chart.stacked : false;
     const cumulative = "cumulative" in chart ? chart.cumulative : false;
-    const colors = new ChartColors();
+    const colors = new ColorGenerator();
+    const definition = chart.getDefinition();
     for (let [index, { label, data }] of dataSetsValues.entries()) {
         if (["linear", "time"].includes(axisType)) {
             // Replace empty string labels by undefined to make sure chartJS doesn't decide that "" is the same as 0
@@ -23658,6 +23936,22 @@ function createLineOrScatterChartRuntime(chart, getters) {
         };
         config.data.datasets.push(dataset);
     }
+    for (const [index, dataset] of config.data.datasets.entries()) {
+        if (definition.dataSets?.[index]?.backgroundColor) {
+            const color = definition.dataSets[index].backgroundColor;
+            dataset.backgroundColor = color;
+            dataset.borderColor = color;
+            //@ts-ignore
+            dataset.pointBackgroundColor = color;
+        }
+        if (definition.dataSets?.[index]?.label) {
+            const label = definition.dataSets[index].label;
+            dataset.label = label;
+        }
+        if (definition.dataSets?.[index]?.yAxisId) {
+            dataset["yAxisID"] = definition.dataSets[index].yAxisId;
+        }
+    }
     return {
         chartJsConfig: config,
         background: chart.background || BACKGROUND_CHART_COLOR,
@@ -23672,7 +23966,6 @@ class LineChart extends AbstractChart {
     dataSets;
     labelRange;
     background;
-    verticalAxisPosition;
     legendPosition;
     labelsAsText;
     stacked;
@@ -23680,18 +23973,21 @@ class LineChart extends AbstractChart {
     type = "line";
     dataSetsHaveTitle;
     cumulative;
+    dataSetDesign;
+    axesDesign;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
-        this.labelRange = createRange(this.getters, sheetId, definition.labelRange);
+        this.labelRange = createValidRange(this.getters, sheetId, definition.labelRange);
         this.background = definition.background;
-        this.verticalAxisPosition = definition.verticalAxisPosition;
         this.legendPosition = definition.legendPosition;
         this.labelsAsText = definition.labelsAsText;
         this.stacked = definition.stacked;
         this.aggregated = definition.aggregated;
         this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
         this.cumulative = definition.cumulative;
+        this.dataSetDesign = definition.dataSets;
+        this.axesDesign = definition.axesDesign;
     }
     static validateChartDefinition(validator, definition) {
         return validator.checkValidations(definition, checkDataset, checkLabelRange);
@@ -23702,30 +23998,36 @@ class LineChart extends AbstractChart {
     static getDefinitionFromContextCreation(context) {
         return {
             background: context.background,
-            dataSets: context.range ? context.range : [],
+            dataSets: context.range ?? [],
             dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             labelsAsText: context.labelsAsText ?? false,
             legendPosition: context.legendPosition ?? "top",
-            title: context.title || "",
+            title: context.title || { text: "" },
             type: "line",
-            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
             stacked: context.stacked ?? false,
             aggregated: context.aggregated ?? false,
             cumulative: context.cumulative ?? false,
+            axesDesign: context.axesDesign,
         };
     }
     getDefinition() {
         return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
     }
     getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        const ranges = [];
+        for (const [i, dataSet] of dataSets.entries()) {
+            ranges.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, targetSheetId || this.sheetId),
+            });
+        }
         return {
             type: "line",
             dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
             background: this.background,
-            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            dataSets: ranges,
             legendPosition: this.legendPosition,
-            verticalAxisPosition: this.verticalAxisPosition,
             labelRange: labelRange
                 ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
                 : undefined,
@@ -23734,12 +24036,20 @@ class LineChart extends AbstractChart {
             stacked: this.stacked,
             aggregated: this.aggregated,
             cumulative: this.cumulative,
+            axesDesign: this.axesDesign,
         };
     }
     getContextCreation() {
+        const range = [];
+        for (const [i, dataSet] of this.dataSets.entries()) {
+            range.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, this.sheetId),
+            });
+        }
         return {
             ...this,
-            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            range,
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
@@ -23761,12 +24071,14 @@ class LineChart extends AbstractChart {
             .map((ds) => toExcelDataset(this.getters, ds))
             .filter((ds) => ds.range !== "" && ds.range !== CellErrorType.InvalidReference);
         const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+        const definition = this.getDefinition();
         return {
-            ...this.getDefinition(),
+            ...definition,
             backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
             fontColor: toXlsxHexColor(chartFontColor(this.background)),
             dataSets,
             labelRange,
+            verticalAxis: getDefinedAxis(definition),
         };
     }
     copyForSheetId(sheetId) {
@@ -23796,7 +24108,7 @@ class PieChart extends AbstractChart {
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
-        this.labelRange = createRange(getters, sheetId, definition.labelRange);
+        this.labelRange = createValidRange(getters, sheetId, definition.labelRange);
         this.background = definition.background;
         this.legendPosition = definition.legendPosition;
         this.aggregated = definition.aggregated;
@@ -23811,10 +24123,10 @@ class PieChart extends AbstractChart {
     static getDefinitionFromContextCreation(context) {
         return {
             background: context.background,
-            dataSets: context.range ? context.range : [],
+            dataSets: context.range ?? [],
             dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             legendPosition: context.legendPosition ?? "top",
-            title: context.title || "",
+            title: context.title || { text: "" },
             type: "pie",
             labelRange: context.auxiliaryRange || undefined,
             aggregated: context.aggregated ?? false,
@@ -23826,7 +24138,9 @@ class PieChart extends AbstractChart {
     getContextCreation() {
         return {
             ...this,
-            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            range: this.dataSets.map((ds) => ({
+                dataRange: this.getters.getRangeString(ds.dataRange, this.sheetId),
+            })),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
@@ -23837,7 +24151,9 @@ class PieChart extends AbstractChart {
             type: "pie",
             dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
             background: this.background,
-            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            dataSets: dataSets.map((ds) => ({
+                dataRange: this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId),
+            })),
             legendPosition: this.legendPosition,
             labelRange: labelRange
                 ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
@@ -23868,7 +24184,6 @@ class PieChart extends AbstractChart {
             ...this.getDefinition(),
             backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
             fontColor: toXlsxHexColor(chartFontColor(this.background)),
-            verticalAxisPosition: "left", //TODO ExcelChartDefinition should be adapted, but can be done later
             dataSets,
             labelRange,
         };
@@ -23969,9 +24284,8 @@ function createPieChartRuntime(chart, getters) {
     const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
     const locale = getters.getLocale();
     const config = getPieConfiguration(chart, labels, { format: dataSetFormat, locale });
-    const colors = new ChartColors();
-    for (let { label, data } of dataSetsValues) {
-        const backgroundColor = getPieColors(colors, dataSetsValues);
+    const backgroundColor = getPieColors(new ColorGenerator(), dataSetsValues);
+    for (const { label, data } of dataSetsValues) {
         const dataset = {
             label,
             data,
@@ -23987,22 +24301,24 @@ class ScatterChart extends AbstractChart {
     dataSets;
     labelRange;
     background;
-    verticalAxisPosition;
     legendPosition;
     labelsAsText;
     aggregated;
     type = "scatter";
     dataSetsHaveTitle;
+    dataSetDesign;
+    axesDesign;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
-        this.labelRange = createRange(this.getters, sheetId, definition.labelRange);
+        this.labelRange = createValidRange(this.getters, sheetId, definition.labelRange);
         this.background = definition.background;
-        this.verticalAxisPosition = definition.verticalAxisPosition;
         this.legendPosition = definition.legendPosition;
         this.labelsAsText = definition.labelsAsText;
         this.aggregated = definition.aggregated;
         this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+        this.dataSetDesign = definition.dataSets;
+        this.axesDesign = definition.axesDesign;
     }
     static validateChartDefinition(validator, definition) {
         return validator.checkValidations(definition, checkDataset, checkLabelRange);
@@ -24013,40 +24329,54 @@ class ScatterChart extends AbstractChart {
     static getDefinitionFromContextCreation(context) {
         return {
             background: context.background,
-            dataSets: context.range ? context.range : [],
+            dataSets: context.range ?? [],
             dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             labelsAsText: context.labelsAsText ?? false,
             legendPosition: context.legendPosition ?? "top",
-            title: context.title || "",
+            title: context.title || { text: "" },
             type: "scatter",
-            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
             aggregated: context.aggregated ?? false,
+            axesDesign: context.axesDesign,
         };
     }
     getDefinition() {
         return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
     }
     getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        const ranges = [];
+        for (const [i, dataSet] of dataSets.entries()) {
+            ranges.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, targetSheetId || this.sheetId),
+            });
+        }
         return {
             type: "scatter",
             dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
             background: this.background,
-            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            dataSets: ranges,
             legendPosition: this.legendPosition,
-            verticalAxisPosition: this.verticalAxisPosition,
             labelRange: labelRange
                 ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
                 : undefined,
             title: this.title,
             labelsAsText: this.labelsAsText,
             aggregated: this.aggregated,
+            axesDesign: this.axesDesign,
         };
     }
     getContextCreation() {
+        const range = [];
+        for (const [i, dataSet] of this.dataSets.entries()) {
+            range.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, this.sheetId),
+            });
+        }
         return {
             ...this,
-            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            range,
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
@@ -24069,12 +24399,14 @@ class ScatterChart extends AbstractChart {
             .map((ds) => toExcelDataset(this.getters, ds))
             .filter((ds) => ds.range !== "");
         const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+        const definition = this.getDefinition();
         return {
-            ...this.getDefinition(),
+            ...definition,
             backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
             fontColor: toXlsxHexColor(chartFontColor(this.background)),
             dataSets,
             labelRange,
+            verticalAxis: getDefinedAxis(definition),
         };
     }
     copyForSheetId(sheetId) {
@@ -24094,13 +24426,6 @@ function createScatterChartRuntime(chart, getters) {
     // have less options than the line chart (it only works with linear labels)
     chartJsConfig.type = "line";
     const configOptions = chartJsConfig.options;
-    configOptions.elements = {
-        point: {
-            radius: 3,
-            hoverRadius: 3, // chartJS seems bugged, the point starts with the "hoverRadius" value
-            hitRadius: 8,
-        },
-    };
     const locale = getters.getLocale();
     configOptions.plugins.tooltip.callbacks.title = () => "";
     configOptions.plugins.tooltip.callbacks.label = (tooltipItem) => {
@@ -24137,10 +24462,12 @@ class WaterfallChart extends AbstractChart {
     positiveValuesColor;
     negativeValuesColor;
     subTotalValuesColor;
+    dataSetDesign;
+    axesDesign;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
-        this.labelRange = createRange(getters, sheetId, definition.labelRange);
+        this.labelRange = createValidRange(getters, sheetId, definition.labelRange);
         this.background = definition.background;
         this.verticalAxisPosition = definition.verticalAxisPosition;
         this.legendPosition = definition.legendPosition;
@@ -24152,6 +24479,8 @@ class WaterfallChart extends AbstractChart {
         this.negativeValuesColor = definition.negativeValuesColor;
         this.subTotalValuesColor = definition.subTotalValuesColor;
         this.firstValueAsSubtotal = definition.firstValueAsSubtotal;
+        this.dataSetDesign = definition.dataSets;
+        this.axesDesign = definition.axesDesign;
     }
     static transformDefinition(definition, executed) {
         return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -24166,19 +24495,27 @@ class WaterfallChart extends AbstractChart {
             dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             aggregated: context.aggregated ?? false,
             legendPosition: context.legendPosition ?? "top",
-            title: context.title || "",
+            title: context.title || { text: "" },
             type: "waterfall",
-            verticalAxisPosition: context.verticalAxisPosition ?? "left",
+            verticalAxisPosition: "left",
             labelRange: context.auxiliaryRange || undefined,
             showSubTotals: context.showSubTotals ?? false,
             showConnectorLines: context.showConnectorLines ?? true,
             firstValueAsSubtotal: context.firstValueAsSubtotal ?? false,
+            axesDesign: context.axesDesign,
         };
     }
     getContextCreation() {
+        const range = [];
+        for (const [i, dataSet] of this.dataSets.entries()) {
+            range.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, this.sheetId),
+            });
+        }
         return {
             ...this,
-            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            range,
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
@@ -24198,11 +24535,18 @@ class WaterfallChart extends AbstractChart {
         return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
     }
     getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        const ranges = [];
+        for (const [i, dataSet] of dataSets.entries()) {
+            ranges.push({
+                ...this.dataSetDesign?.[i],
+                dataRange: this.getters.getRangeString(dataSet.dataRange, targetSheetId || this.sheetId),
+            });
+        }
         return {
             type: "waterfall",
             dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
             background: this.background,
-            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            dataSets: ranges,
             legendPosition: this.legendPosition,
             verticalAxisPosition: this.verticalAxisPosition,
             labelRange: labelRange
@@ -24216,6 +24560,7 @@ class WaterfallChart extends AbstractChart {
             negativeValuesColor: this.negativeValuesColor,
             subTotalValuesColor: this.subTotalValuesColor,
             firstValueAsSubtotal: this.firstValueAsSubtotal,
+            axesDesign: this.axesDesign,
         };
     }
     getDefinitionForExcel() {
@@ -24275,6 +24620,7 @@ function getWaterfallConfiguration(chart, labels, dataSeriesLabels, localeFormat
             grid: {
                 display: false,
             },
+            title: getChartAxisTitleRuntime(chart.axesDesign?.x),
         },
         y: {
             position: chart.verticalAxisPosition,
@@ -24295,6 +24641,7 @@ function getWaterfallConfiguration(chart, labels, dataSeriesLabels, localeFormat
                     return context.tick.value === 0 ? 2 : 1;
                 },
             },
+            title: getChartAxisTitleRuntime(chart.axesDesign?.y),
         },
     };
     config.options.plugins.tooltip = {
@@ -26354,13 +26701,14 @@ function getSmartChartDefinition(zone, getters) {
     if (!singleColumn) {
         dataSetZone = { ...zone, left: zone.left + 1 };
     }
-    const dataSets = [zoneToXc(dataSetZone)];
+    const dataRange = zoneToXc(dataSetZone);
+    const dataSets = [{ dataRange, yAxisId: "y" }];
     const sheetId = getters.getActiveSheetId();
     const topLeftCell = getters.getCell({ sheetId, col: zone.left, row: zone.top });
     if (getZoneArea(zone) === 1 && topLeftCell?.content) {
         return {
             type: "scorecard",
-            title: "",
+            title: { text: "" },
             background: topLeftCell.style?.fillColor || undefined,
             keyValue: zoneToXc(zone),
             baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
@@ -26396,7 +26744,7 @@ function getSmartChartDefinition(zone, getters) {
     const labelRange = labelRangeXc ? getters.getRangeFromSheetXC(sheetId, labelRangeXc) : undefined;
     if (canChartParseLabels(labelRange, getters)) {
         return {
-            title,
+            title: { text: title },
             dataSets,
             labelsAsText: false,
             stacked: false,
@@ -26405,7 +26753,6 @@ function getSmartChartDefinition(zone, getters) {
             labelRange: labelRangeXc,
             type: "line",
             dataSetsHaveTitle,
-            verticalAxisPosition: "left",
             legendPosition: newLegendPos,
         };
     }
@@ -26413,24 +26760,23 @@ function getSmartChartDefinition(zone, getters) {
     if (singleColumn &&
         getData(getters, _dataSets[0]).every((e) => typeof e === "string" && !isEvaluationError(e))) {
         return {
-            title: "",
-            dataSets,
+            title: { text: "" },
+            dataSets: [{ dataRange }],
             aggregated: true,
-            labelRange: dataSets[0],
+            labelRange: dataRange,
             type: "pie",
             legendPosition: "top",
             dataSetsHaveTitle: false,
         };
     }
     return {
-        title,
+        title: { text: title },
         dataSets,
         labelRange: labelRangeXc,
         type: "bar",
         stacked: false,
         aggregated: false,
         dataSetsHaveTitle,
-        verticalAxisPosition: "left",
         legendPosition: newLegendPos,
     };
 }
@@ -29471,6 +29817,41 @@ class OTRegistry extends Registry {
 }
 const otRegistry = new OTRegistry();
 
+css /* scss */ `
+  .o-checkbox {
+    display: flex;
+    justify-items: center;
+    input {
+      margin-right: 5px;
+    }
+  }
+`;
+class Checkbox extends Component {
+    static template = "o-spreadsheet.Checkbox";
+    static props = {
+        label: { type: String, optional: true },
+        value: { type: Boolean, optional: true },
+        className: { type: String, optional: true },
+        name: { type: String, optional: true },
+        title: { type: String, optional: true },
+        disabled: { type: Boolean, optional: true },
+        onChange: Function,
+    };
+    static defaultProps = { value: false };
+    onChange(ev) {
+        const value = ev.target.checked;
+        this.props.onChange(value);
+    }
+}
+
+class Section extends Component {
+    static template = "o_spreadsheet.Section";
+    static props = {
+        class: { type: String, optional: true },
+        slots: Object,
+    };
+}
+
 // The name is misleading and can be confused with the DOM focus.
 class FocusStore {
     mutators = ["focus", "unfocus"];
@@ -29495,6 +29876,7 @@ class FocusStore {
 class SelectionInputStore extends SpreadsheetStore {
     initialRanges;
     inputHasSingleRange;
+    colors;
     mutators = [
         "resetWithRanges",
         "focusById",
@@ -29510,10 +29892,11 @@ class SelectionInputStore extends SpreadsheetStore {
     inputSheetId;
     focusStore = this.get(FocusStore);
     highlightStore = this.get(HighlightStore);
-    constructor(get, initialRanges = [], inputHasSingleRange = false) {
+    constructor(get, initialRanges = [], inputHasSingleRange = false, colors = []) {
         super(get);
         this.initialRanges = initialRanges;
         this.inputHasSingleRange = inputHasSingleRange;
+        this.colors = colors;
         if (inputHasSingleRange && initialRanges.length > 1) {
             throw new Error("Input with a single range cannot be instantiated with several range references.");
         }
@@ -29655,11 +30038,12 @@ class SelectionInputStore extends SpreadsheetStore {
      * e.g. ["A1", "Sheet2!B3", "E12"]
      */
     get selectionInputs() {
+        const generator = new ColorGenerator(this.colors);
         return this.ranges.map((input, index) => Object.assign({}, input, {
             color: this.hasMainFocus &&
                 this.focusedRangeIndex !== null &&
                 this.getters.isRangeValid(input.xc)
-                ? input.color
+                ? generator.next()
                 : null,
             isFocused: this.hasMainFocus && this.focusedRangeIndex === index,
             isValidRange: input.xc === "" || this.getters.isRangeValid(input.xc),
@@ -29736,10 +30120,14 @@ class SelectionInputStore extends SpreadsheetStore {
      */
     insertNewRange(index, values) {
         const currentMaxId = Math.max(0, ...this.ranges.map((range) => Number(range.id)));
+        const colors = new ColorGenerator(this.colors);
+        for (let i = 0; i < index; i++) {
+            colors.next();
+        }
         this.ranges.splice(index, 0, ...values.map((xc, i) => ({
             xc,
             id: currentMaxId + i + 1,
-            color: colors$1[(currentMaxId + i) % colors$1.length],
+            color: colors.next(),
         })));
     }
     /**
@@ -29883,6 +30271,7 @@ class SelectionInput extends Component {
         class: { type: String, optional: true },
         onSelectionChanged: { type: Function, optional: true },
         onSelectionConfirmed: { type: Function, optional: true },
+        colors: { type: Array, optional: true, default: [] },
     };
     state = useState({
         isMissing: false,
@@ -29907,7 +30296,7 @@ class SelectionInput extends Component {
     }
     setup() {
         useEffect(() => this.focusedInput.el?.focus(), () => [this.focusedInput.el]);
-        this.store = useLocalStore(SelectionInputStore, this.props.ranges, this.props.hasSingleRange || false);
+        this.store = useLocalStore(SelectionInputStore, this.props.ranges, this.props.hasSingleRange || false, this.props.colors);
         onWillUpdateProps((nextProps) => {
             if (nextProps.ranges.join() !== this.store.selectionInputValues.join()) {
                 this.triggerChange();
@@ -29982,6 +30371,26 @@ class SelectionInput extends Component {
     }
 }
 
+class ChartDataSeries extends Component {
+    static template = "o-spreadsheet.ChartDataSeries";
+    static components = { SelectionInput, Section };
+    static props = {
+        ranges: Array,
+        hasSingleRange: { type: Boolean, optional: true },
+        onSelectionChanged: Function,
+        onSelectionConfirmed: Function,
+    };
+    get ranges() {
+        return this.props.ranges.map((r) => r.dataRange);
+    }
+    get colors() {
+        return this.props.ranges.map((r) => r.backgroundColor);
+    }
+    get title() {
+        return this.props.hasSingleRange ? _t("Data range") : _t("Data series");
+    }
+}
+
 css /* scss */ `
   .o-validation-error,
   .o-validation-warning {
@@ -30008,55 +30417,6 @@ class ValidationMessages extends Component {
     }
 }
 
-css /* scss */ `
-  .o-checkbox {
-    display: flex;
-    justify-items: center;
-    input {
-      margin-right: 5px;
-    }
-  }
-`;
-class Checkbox extends Component {
-    static template = "o-spreadsheet.Checkbox";
-    static props = {
-        label: { type: String, optional: true },
-        value: { type: Boolean, optional: true },
-        className: { type: String, optional: true },
-        name: { type: String, optional: true },
-        title: { type: String, optional: true },
-        disabled: { type: Boolean, optional: true },
-        onChange: Function,
-    };
-    static defaultProps = { value: false };
-    onChange(ev) {
-        const value = ev.target.checked;
-        this.props.onChange(value);
-    }
-}
-
-class Section extends Component {
-    static template = "o_spreadsheet.Section";
-    static props = {
-        class: { type: String, optional: true },
-        slots: Object,
-    };
-}
-
-class ChartDataSeries extends Component {
-    static template = "o-spreadsheet.ChartDataSeries";
-    static components = { SelectionInput, Section };
-    static props = {
-        ranges: Array,
-        hasSingleRange: { type: Boolean, optional: true },
-        onSelectionChanged: Function,
-        onSelectionConfirmed: Function,
-    };
-    get title() {
-        return this.props.hasSingleRange ? _t("Data range") : _t("Data series");
-    }
-}
-
 class ChartErrorSection extends Component {
     static template = "o-spreadsheet.ChartErrorSection";
     static components = { Section, ValidationMessages };
@@ -30085,8 +30445,6 @@ class ChartLabelRange extends Component {
 class GenericChartConfigPanel extends Component {
     static template = "o-spreadsheet-GenericChartConfigPanel";
     static components = {
-        SelectionInput,
-        ValidationMessages,
         ChartDataSeries,
         ChartLabelRange,
         Section,
@@ -30145,7 +30503,10 @@ class GenericChartConfigPanel extends Component {
      * button "confirm" is clicked
      */
     onDataSeriesRangesChanged(ranges) {
-        this.dataSeriesRanges = ranges;
+        this.dataSeriesRanges = ranges.map((dataRange, i) => ({
+            ...this.dataSeriesRanges?.[i],
+            dataRange,
+        }));
         this.state.datasetDispatchResult = this.props.canUpdateChart(this.props.figureId, {
             dataSets: this.dataSeriesRanges,
         });
@@ -30188,7 +30549,7 @@ class GenericChartConfigPanel extends Component {
         }
         const getters = this.env.model.getters;
         const sheetId = getters.getActiveSheetId();
-        const labelRange = createRange(getters, sheetId, this.labelRange);
+        const labelRange = createValidRange(getters, sheetId, this.labelRange);
         const dataSets = createDataSets(getters, this.dataSeriesRanges, sheetId, this.props.definition.dataSetsHaveTitle);
         if (dataSets.length) {
             return dataSets[0].dataRange.zone.top + 1;
@@ -30217,15 +30578,102 @@ class BarConfigPanel extends GenericChartConfigPanel {
     }
 }
 
+const ANGLE_DOWN = /*xml*/ `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 256">
+    <path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" transform="translate(0, 9) scale(0.5,0.5)"/>
+</svg>
+`;
+const BACKGROUND_COLOR = "#fdfdfd";
+const BORDER_COLOR = "#8b8b8b";
+css /* scss */ `
+  .o_side_panel_collapsible_title {
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 6px 0px 6px 6px !important;
+
+    .collapsor:before {
+      transform: rotate(-90deg);
+      content: url("data:image/svg+xml,${encodeURIComponent(ANGLE_DOWN)}");
+      width: 12px;
+      display: inline-block;
+      margin: 0 5px 0px 2px;
+      height: 22px;
+      transform-origin: 7px 10px;
+      transition: transform 0.2s ease-in-out;
+    }
+    .collapsor:not(.collapsed):before {
+      transform: rotate(0);
+    }
+
+    .collapsor:not(.collapsed) {
+      background-color: ${BACKGROUND_COLOR};
+      border: solid ${BORDER_COLOR} 1px;
+      margin: -3px 1px -6px -5px;
+      border-radius: 5px 5px 0px 0px;
+      border-bottom: 0px;
+      transition-delay: 0s;
+    }
+
+    .collapsor {
+      width: 100%;
+      margin: -2px 2px -5px -4px;
+      padding: 2px 0 6px 4px;
+      background-color: transparent;
+      border: solid ${BORDER_COLOR} 0px;
+      transition-delay: 0.35s;
+      transition-property: all;
+    }
+
+    .collapsor.collapsed {
+    }
+  }
+
+  .collapsible_section {
+    background-color: #fff;
+    border: solid ${BORDER_COLOR} 1px;
+    border-top: 0;
+    border-radius: 0 0 5px 5px;
+    margin: 0px 1px 0px 1px;
+
+    &.collapsing,
+    &.show {
+      background-color: ${BACKGROUND_COLOR};
+    }
+
+    &.collapsing {
+      transition: height 0.35s, background-color 0.35s !important;
+    }
+  }
+`;
+let CURRENT_COLLAPSIBLE_ID = 0;
+class SidePanelCollapsible extends Component {
+    static template = "o-spreadsheet-SidePanelCollapsible";
+    static props = {
+        slots: Object,
+        collapsedAtInit: { type: Boolean, optional: true },
+        class: { type: String, optional: true },
+    };
+    currentId = (CURRENT_COLLAPSIBLE_ID++).toString();
+}
+
+/**
+ * Start listening to pointer events and apply the given callbacks.
+ *
+ * @returns A function to remove the listeners.
+ */
 function startDnd(onMouseMove, onMouseUp, onMouseDown = () => { }) {
-    const _onMouseUp = (ev) => {
-        onMouseUp(ev);
+    const removeListeners = () => {
         window.removeEventListener("pointerdown", onMouseDown);
         window.removeEventListener("pointerup", _onMouseUp);
         window.removeEventListener("dragstart", _onDragStart);
         window.removeEventListener("pointermove", onMouseMove);
         window.removeEventListener("wheel", onMouseMove);
     };
+    const _onMouseUp = (ev) => {
+        onMouseUp(ev);
+        removeListeners();
+    };
     function _onDragStart(ev) {
         ev.preventDefault();
     }
@@ -30237,6 +30685,7 @@ function startDnd(onMouseMove, onMouseUp, onMouseDown = () => { }) {
     // preventDefault() is not allowed in passive event handler.
     // https://chromestatus.com/feature/6662647093133312
     window.addEventListener("wheel", onMouseMove, { passive: false });
+    return removeListeners;
 }
 /**
  * Function to be used during a pointerdown event, this function allows to
@@ -30798,63 +31247,325 @@ class RoundColorPicker extends Component {
     }
 }
 
+css /* scss */ `
+  .o-chart-title-designer {
+    > span {
+      height: 30px;
+    }
+
+    .o-menu-item-button.active {
+      background-color: #e6f4ea;
+      color: #188038;
+    }
+
+    .o-dropdown-content {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 2px;
+      z-index: 100;
+      box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
+
+      .o-dropdown-line {
+        > span {
+          padding: 4px;
+        }
+      }
+    }
+  }
+`;
 class ChartTitle extends Component {
     static template = "o-spreadsheet.ChartTitle";
-    static components = { Section };
-    static props = { title: String, update: Function };
+    static components = { Section, ColorPickerWidget };
+    static props = {
+        title: String,
+        updateTitle: Function,
+        name: { type: String, optional: true },
+        toggleItalic: { type: Function, optional: true },
+        toggleBold: { type: Function, optional: true },
+        updateAlignment: { type: Function, optional: true },
+        updateColor: { type: Function, optional: true },
+        style: { type: Object, optional: true },
+    };
+    openedEl = null;
+    setup() {
+        useExternalListener(window, "click", this.onExternalClick);
+    }
+    state = useState({
+        activeTool: "",
+    });
     updateTitle(ev) {
-        this.props.update(ev.target.value);
+        this.props.updateTitle(ev.target.value);
+    }
+    toggleDropdownTool(tool, ev) {
+        const isOpen = this.state.activeTool === tool;
+        this.closeMenus();
+        this.state.activeTool = isOpen ? "" : tool;
+        this.openedEl = isOpen ? null : ev.target;
+    }
+    /**
+     * TODO: This is clearly not a goot way to handle external click, but
+     * we currently have no other way to do it ... Should be done in
+     * another task to handle the fact we want only one menu opened at a
+     * time with something like a menuStore ?
+     */
+    onExternalClick(ev) {
+        if (this.openedEl === ev.target) {
+            return;
+        }
+        this.closeMenus();
+    }
+    onColorPicked(color) {
+        this.props.updateColor?.(color);
+        this.closeMenus();
+    }
+    updateAlignment(aligment) {
+        this.props.updateAlignment?.(aligment);
+        this.closeMenus();
+    }
+    closeMenus() {
+        this.state.activeTool = "";
+        this.openedEl = null;
     }
 }
 
-class GenericChartDesignPanel extends Component {
-    static template = "o-spreadsheet-GenericChartDesignPanel";
-    static components = { RoundColorPicker, ChartTitle, Section };
+class AxisDesignEditor extends Component {
+    static template = "o-spreadsheet-AxisDesignEditor";
+    static components = {
+        Section,
+        ChartTitle,
+    };
+    state = useState({ currentAxis: "x" });
+    get axisTitleStyle() {
+        const axisDesign = this.props.definition.axesDesign?.[this.state.currentAxis] ?? {};
+        return {
+            color: "",
+            align: "center",
+            ...axisDesign.title,
+        };
+    }
+    updateAxisTitleColor(color) {
+        const axesDesign = this.props.definition.axesDesign ?? {};
+        axesDesign[this.state.currentAxis] = {
+            ...axesDesign[this.state.currentAxis],
+            title: {
+                ...(axesDesign[this.state.currentAxis]?.title ?? {}),
+                color,
+            },
+        };
+        this.props.updateChart(this.props.figureId, { axesDesign });
+    }
+    toggleBoldAxisTitle() {
+        const axesDesign = this.props.definition.axesDesign ?? {};
+        const title = axesDesign[this.state.currentAxis]?.title ?? {};
+        axesDesign[this.state.currentAxis] = {
+            ...axesDesign[this.state.currentAxis],
+            title: {
+                ...title,
+                bold: !title?.bold,
+            },
+        };
+        this.props.updateChart(this.props.figureId, { axesDesign });
+    }
+    toggleItalicAxisTitle() {
+        const axesDesign = this.props.definition.axesDesign ?? {};
+        const title = axesDesign[this.state.currentAxis]?.title ?? {};
+        axesDesign[this.state.currentAxis] = {
+            ...axesDesign[this.state.currentAxis],
+            title: {
+                ...title,
+                italic: !title?.italic,
+            },
+        };
+        this.props.updateChart(this.props.figureId, { axesDesign });
+    }
+    updateAxisTitleAlignment(align) {
+        const axesDesign = this.props.definition.axesDesign ?? {};
+        const title = axesDesign[this.state.currentAxis]?.title ?? {};
+        axesDesign[this.state.currentAxis] = {
+            ...axesDesign[this.state.currentAxis],
+            title: {
+                ...title,
+                align,
+            },
+        };
+        this.props.updateChart(this.props.figureId, { axesDesign });
+    }
+    updateAxisEditor(ev) {
+        const axis = ev.target.value;
+        this.state.currentAxis = axis;
+    }
+    getAxisTitle() {
+        const axesDesign = this.props.definition.axesDesign ?? {};
+        return axesDesign[this.state.currentAxis]?.title.text || "";
+    }
+    updateAxisTitle(text) {
+        const axesDesign = this.props.definition.axesDesign ?? {};
+        axesDesign[this.state.currentAxis] = {
+            ...axesDesign[this.state.currentAxis],
+            title: {
+                ...axesDesign?.[this.state.currentAxis]?.title,
+                text,
+            },
+        };
+        this.props.updateChart(this.props.figureId, { axesDesign });
+    }
+}
+
+class GeneralDesignEditor extends Component {
+    static template = "o-spreadsheet-GeneralDesignEditor";
+    static components = {
+        RoundColorPicker,
+        ChartTitle,
+        Section,
+        SidePanelCollapsible,
+    };
     static props = {
         figureId: String,
         definition: Object,
         updateChart: Function,
-        canUpdateChart: Function,
+        slots: { type: Object, optional: true },
     };
+    state;
+    setup() {
+        this.state = useState({
+            activeTool: "",
+        });
+    }
     get title() {
-        return _t(this.props.definition.title);
+        return this.props.definition.title;
+    }
+    toggleDropdownTool(tool, ev) {
+        const isOpen = this.state.activeTool === tool;
+        this.state.activeTool = isOpen ? "" : tool;
     }
     updateBackgroundColor(color) {
         this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
-    updateTitle(title) {
+    updateTitle(newTitle) {
+        const title = { ...this.title, text: newTitle };
         this.props.updateChart(this.props.figureId, { title });
     }
-    updateSelect(attr, ev) {
-        this.props.updateChart(this.props.figureId, {
-            [attr]: ev.target.value,
-        });
+    get titleStyle() {
+        return {
+            align: "left",
+            ...this.title,
+        };
     }
-    get backgroundColorTitle() {
-        return ChartTerms.BackgroundColor;
+    updateChartTitleColor(color) {
+        const title = { ...this.title, color };
+        this.props.updateChart(this.props.figureId, { title });
+        this.state.activeTool = "";
+    }
+    toggleBoldChartTitle() {
+        let title = this.title;
+        title = { ...title, bold: !title.bold };
+        this.props.updateChart(this.props.figureId, { title });
+    }
+    toggleItalicChartTitle() {
+        let title = this.title;
+        title = { ...title, italic: !title.italic };
+        this.props.updateChart(this.props.figureId, { title });
+    }
+    updateChartTitleAlignment(align) {
+        const title = { ...this.title, align };
+        this.props.updateChart(this.props.figureId, { title });
+        this.state.activeTool = "";
     }
 }
 
-class BarChartDesignPanel extends GenericChartDesignPanel {
-    static template = "o-spreadsheet-BarChartDesignPanel";
-}
-
-class ComboChartConfigPanel extends GenericChartConfigPanel {
-    static template = "o-spreadsheet-ComboChartConfigPanel";
-    get shouldUseRightAxis() {
-        return _t("Use right axis for line series");
+class ChartWithAxisDesignPanel extends Component {
+    static template = "o-spreadsheet-ChartWithAxisDesignPanel";
+    static components = {
+        GeneralDesignEditor,
+        SidePanelCollapsible,
+        Section,
+        AxisDesignEditor,
+        RoundColorPicker,
+    };
+    state = useState({ index: 0 });
+    get axesList() {
+        const { useLeftAxis, useRightAxis } = getDefinedAxis(this.props.definition);
+        let axes = [{ id: "x", name: _t("Horizontal axis") }];
+        if (useLeftAxis) {
+            axes.push({ id: "y", name: _t("Vertical (left) axis") });
+        }
+        if (useRightAxis) {
+            axes.push({ id: "y1", name: _t("Vertical (right) axis") });
+        }
+        return axes;
     }
-    onUpdateUseRightAxis(useBothYAxis) {
+    updateLegendPosition(ev) {
         this.props.updateChart(this.props.figureId, {
-            useBothYAxis,
+            legendPosition: ev.target.value,
         });
     }
-}
-
-class ComboChartDesignPanel extends GenericChartDesignPanel {
-    static template = "o-spreadsheet-ComboChartDesignPanel";
+    getDataSeries() {
+        const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+        if (!runtime || !("chartJsConfig" in runtime)) {
+            return [];
+        }
+        return runtime.chartJsConfig.data.datasets.map((d) => d.label);
+    }
+    updateSerieEditor(ev) {
+        const chartId = this.props.figureId;
+        const selectedIndex = ev.target.selectedIndex;
+        const runtime = this.env.model.getters.getChartRuntime(chartId);
+        if (!runtime) {
+            return;
+        }
+        this.state.index = selectedIndex;
+    }
+    updateDataSeriesColor(color) {
+        const dataSets = this.props.definition.dataSets;
+        if (!dataSets?.[this.state.index])
+            return;
+        dataSets[this.state.index] = {
+            ...dataSets[this.state.index],
+            backgroundColor: color,
+        };
+        this.props.updateChart(this.props.figureId, { dataSets });
+    }
+    getDataSerieColor() {
+        const dataSets = this.props.definition.dataSets;
+        if (!dataSets?.[this.state.index])
+            return "";
+        const color = dataSets[this.state.index].backgroundColor;
+        return color ? toHex(color) : getNthColor(this.state.index);
+    }
+    updateDataSeriesAxis(ev) {
+        const axis = ev.target.value;
+        const dataSets = this.props.definition.dataSets;
+        if (!dataSets?.[this.state.index])
+            return;
+        dataSets[this.state.index] = {
+            ...dataSets[this.state.index],
+            yAxisId: axis === "left" ? "y" : "y1",
+        };
+        this.props.updateChart(this.props.figureId, { dataSets });
+    }
+    getDataSerieAxis() {
+        const dataSets = this.props.definition.dataSets;
+        if (!dataSets?.[this.state.index])
+            return "left";
+        return dataSets[this.state.index].yAxisId === "y1" ? "right" : "left";
+    }
+    updateDataSeriesLabel(ev) {
+        const label = ev.target.value;
+        const dataSets = this.props.definition.dataSets;
+        if (!dataSets?.[this.state.index])
+            return;
+        dataSets[this.state.index] = {
+            ...dataSets[this.state.index],
+            label,
+        };
+        this.props.updateChart(this.props.figureId, { dataSets });
+    }
+    getDataSerieLabel() {
+        const dataSets = this.props.definition.dataSets;
+        return dataSets[this.state.index]?.label || this.getDataSeries()[this.state.index];
+    }
 }
 
 class GaugeChartConfigPanel extends Component {
@@ -30889,7 +31600,7 @@ class GaugeChartConfigPanel extends Component {
         });
     }
     getDataRange() {
-        return this.dataRange || "";
+        return { dataRange: this.dataRange || "" };
     }
 }
 
@@ -30931,24 +31642,24 @@ css /* scss */ `
 class GaugeChartDesignPanel extends Component {
     static template = "o-spreadsheet-GaugeChartDesignPanel";
     static components = {
-        ChartErrorSection,
-        RoundColorPicker,
-        ChartTitle,
+        SidePanelCollapsible,
         Section,
+        RoundColorPicker,
+        GeneralDesignEditor,
+        ChartErrorSection,
     };
     static props = {
         figureId: String,
         definition: Object,
         updateChart: Function,
-        canUpdateChart: Function,
+        canUpdateChart: { type: Function, optional: true },
     };
-    state = useState({
-        openedMenu: undefined,
-        sectionRuleDispatchResult: undefined,
-        sectionRule: deepCopy(this.props.definition.sectionRule),
-    });
-    get title() {
-        return _t(this.props.definition.title);
+    state;
+    setup() {
+        this.state = useState({
+            sectionRuleDispatchResult: undefined,
+            sectionRule: deepCopy(this.props.definition.sectionRule),
+        });
     }
     get designErrorMessages() {
         const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
@@ -30959,8 +31670,8 @@ class GaugeChartDesignPanel extends Component {
             background: color,
         });
     }
-    updateTitle(title) {
-        this.props.updateChart(this.props.figureId, { title });
+    updateTitle(content) {
+        this.props.updateChart(this.props.figureId, { title: { text: content } });
     }
     isRangeMinInvalid() {
         return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
@@ -31055,8 +31766,23 @@ class LineConfigPanel extends GenericChartConfigPanel {
     }
 }
 
-class LineChartDesignPanel extends GenericChartDesignPanel {
-    static template = "o-spreadsheet-LineChartDesignPanel";
+class PieChartDesignPanel extends Component {
+    static template = "o-spreadsheet-PieChartDesignPanel";
+    static components = {
+        GeneralDesignEditor,
+        Section,
+    };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: { type: Function, optional: true },
+    };
+    updateLegendPosition(ev) {
+        this.props.updateChart(this.props.figureId, {
+            legendPosition: ev.target.value,
+        });
+    }
 }
 
 class ScatterConfigPanel extends GenericChartConfigPanel {
@@ -31150,16 +31876,19 @@ class ScorecardChartConfigPanel extends Component {
 
 class ScorecardChartDesignPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartDesignPanel";
-    static components = { RoundColorPicker, ChartTitle, Section, Checkbox };
+    static components = {
+        GeneralDesignEditor,
+        RoundColorPicker,
+        SidePanelCollapsible,
+        Section,
+        Checkbox,
+    };
     static props = {
         figureId: String,
         definition: Object,
         updateChart: Function,
-        canUpdateChart: Function,
+        canUpdateChart: { type: Function, optional: true },
     };
-    get title() {
-        return _t(this.props.definition.title);
-    }
     get colorsSectionTitle() {
         return this.props.definition.baselineMode === "progress"
             ? _t("Progress bar colors")
@@ -31168,8 +31897,8 @@ class ScorecardChartDesignPanel extends Component {
     get humanizeNumbersLabel() {
         return _t("Humanize numbers");
     }
-    updateTitle(title) {
-        this.props.updateChart(this.props.figureId, { title });
+    updateTitle(content) {
+        this.props.updateChart(this.props.figureId, { title: { text: content } });
     }
     updateHumanizeNumbers(humanize) {
         this.props.updateChart(this.props.figureId, { humanize });
@@ -31198,14 +31927,22 @@ class ScorecardChartDesignPanel extends Component {
     }
 }
 
-class WaterfallChartDesignPanel extends GenericChartDesignPanel {
+class WaterfallChartDesignPanel extends Component {
     static template = "o-spreadsheet-WaterfallChartDesignPanel";
-    static components = { ...GenericChartDesignPanel.components, Checkbox, RoundColorPicker };
-    state = useState({ pickerOpened: false });
-    setup() {
-        super.setup();
-        useExternalListener(window, "click", this.closePicker);
-    }
+    static components = {
+        GeneralDesignEditor,
+        Checkbox,
+        SidePanelCollapsible,
+        Section,
+        RoundColorPicker,
+        AxisDesignEditor,
+    };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: { type: Function, optional: true },
+    };
     onUpdateShowSubTotals(showSubTotals) {
         this.props.updateChart(this.props.figureId, { showSubTotals });
     }
@@ -31218,11 +31955,11 @@ class WaterfallChartDesignPanel extends GenericChartDesignPanel {
     updateColor(colorName, color) {
         this.props.updateChart(this.props.figureId, { [colorName]: color });
     }
-    closePicker() {
-        this.state.pickerOpened = false;
-    }
-    togglePicker() {
-        this.state.pickerOpened = !this.state.pickerOpened;
+    get axesList() {
+        return [
+            { id: "x", name: _t("Horizontal axis") },
+            { id: "y", name: _t("Vertical axis") },
+        ];
     }
     get positiveValuesColor() {
         return (this.props.definition.positiveValuesColor ||
@@ -31236,29 +31973,39 @@ class WaterfallChartDesignPanel extends GenericChartDesignPanel {
         return (this.props.definition.subTotalValuesColor ||
             CHART_WATERFALL_SUBTOTAL_COLOR);
     }
+    updateLegendPosition(ev) {
+        this.props.updateChart(this.props.figureId, {
+            legendPosition: ev.target.value,
+        });
+    }
+    updateVerticalAxisPosition(ev) {
+        this.props.updateChart(this.props.figureId, {
+            verticalAxisPosition: ev.target.value,
+        });
+    }
 }
 
 const chartSidePanelComponentRegistry = new Registry();
 chartSidePanelComponentRegistry
     .add("line", {
     configuration: LineConfigPanel,
-    design: LineChartDesignPanel,
+    design: ChartWithAxisDesignPanel,
 })
     .add("scatter", {
     configuration: ScatterConfigPanel,
-    design: LineChartDesignPanel,
+    design: ChartWithAxisDesignPanel,
 })
     .add("bar", {
     configuration: BarConfigPanel,
-    design: BarChartDesignPanel,
+    design: ChartWithAxisDesignPanel,
 })
     .add("combo", {
-    configuration: ComboChartConfigPanel,
-    design: ComboChartDesignPanel,
+    configuration: GenericChartConfigPanel,
+    design: ChartWithAxisDesignPanel,
 })
     .add("pie", {
     configuration: GenericChartConfigPanel,
-    design: GenericChartDesignPanel,
+    design: PieChartDesignPanel,
 })
     .add("gauge", {
     configuration: GaugeChartConfigPanel,
@@ -31544,6 +32291,7 @@ function useDragAndDropListItems() {
             state.itemsStyle = {};
             document.body.style.cursor = previousCursor;
             args.onCancel?.();
+            cleanUp();
         };
         const onDragEnd = (itemId, indexAtEnd) => {
             state.draggedItemId = undefined;
@@ -31564,7 +32312,8 @@ function useDragAndDropListItems() {
             onDragEnd,
             onCancel: state.cancel,
         });
-        startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
+        const stopListening = startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
+        cleanupFns.push(stopListening);
         const onScroll = dndHelper.onScroll.bind(dndHelper);
         args.containerEl.addEventListener("scroll", onScroll);
         cleanupFns.push(() => args.containerEl.removeEventListener("scroll", onScroll));
@@ -31641,7 +32390,7 @@ class DOMDndHelper {
         this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
     }
     onMouseMove(ev) {
-        if (ev.button !== -1) {
+        if (ev.button > 1) {
             this.onCancel();
             return;
         }
@@ -34384,7 +35133,7 @@ class SpreadsheetPivotTable {
  * This function converts a list of data entry into a spreadsheet pivot table.
  */
 function dataEntriesToSpreadsheetPivotTable(dataEntries, definition) {
-    const columnsTree = dateEntriesToColumnsTree(dataEntries, definition.columns, 0);
+    const columnsTree = dataEntriesToColumnsTree(dataEntries, definition.columns, 0);
     computeWidthOfColumnsNodes(columnsTree, definition.measures.length);
     const cols = columnsTreeToColumns(columnsTree, definition);
     const rows = dataEntriesToRows(dataEntries, 0, definition.rows, [], []);
@@ -34435,7 +35184,7 @@ function dataEntriesToRows(dataEntries, index, rows, fields, values) {
 /**
  * Create the columns tree from data entries.
  */
-function dateEntriesToColumnsTree(dataEntries, columns, index) {
+function dataEntriesToColumnsTree(dataEntries, columns, index) {
     if (index >= columns.length) {
         return [];
     }
@@ -34447,7 +35196,7 @@ function dateEntriesToColumnsTree(dataEntries, columns, index) {
         return {
             value,
             field: colName,
-            children: dateEntriesToColumnsTree(groups[value] || [], columns, index + 1),
+            children: dataEntriesToColumnsTree(groups[value] || [], columns, index + 1),
             width: 0,
         };
     });
@@ -34954,7 +35703,12 @@ class SpreadsheetPivot {
                 if (!field) {
                     throw new Error(`Field ${this.fieldKeys[index]} does not exist`);
                 }
-                entry[field.name] = cell;
+                if (cell.value === "") {
+                    entry[field.name] = { value: null, type: CellValueType.empty };
+                }
+                else {
+                    entry[field.name] = cell;
+                }
             }
             entry["__count"] = { value: 1, type: CellValueType.number };
             dataEntries.push(entry);
@@ -36710,14 +37464,15 @@ class FigureComponent extends Component {
     }
     onKeyDown(ev) {
         const figure = this.props.figure;
-        switch (ev.key) {
+        const keyDownShortcut = keyboardEventToShortcutString(ev);
+        switch (keyDownShortcut) {
             case "Delete":
+            case "Backspace":
                 this.env.model.dispatch("DELETE_FIGURE", {
                     sheetId: this.env.model.getters.getActiveSheetId(),
                     id: figure.id,
                 });
                 this.props.onFigureDeleted();
-                ev.stopPropagation();
                 ev.preventDefault();
                 ev.stopPropagation();
                 break;
@@ -36738,7 +37493,22 @@ class FigureComponent extends Component {
                     x: figure.x + delta[0],
                     y: figure.y + delta[1],
                 });
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "Ctrl+A":
+                // Maybe in the future we will implement a way to select all figures
+                ev.preventDefault();
                 ev.stopPropagation();
+                break;
+            case "Ctrl+Y":
+            case "Ctrl+Z":
+                if (keyDownShortcut === "Ctrl+Y") {
+                    this.env.model.dispatch("REQUEST_REDO");
+                }
+                else if (keyDownShortcut === "Ctrl+Z") {
+                    this.env.model.dispatch("REQUEST_UNDO");
+                }
                 ev.preventDefault();
                 ev.stopPropagation();
                 break;
@@ -38018,9 +38788,6 @@ class FilterIcon extends Component {
 
 class FilterIconsOverlay extends Component {
     static template = "o-spreadsheet-FilterIconsOverlay";
-    static props = {
-        onMouseDown: Function,
-    };
     static components = {
         GridCellIcon,
         FilterIcon,
@@ -38260,6 +39027,7 @@ class GridOverlay extends Component {
     };
     gridOverlay = useRef("gridOverlay");
     gridOverlayRect = useAbsoluteBoundingRect(this.gridOverlay);
+    cellPopovers;
     setup() {
         useCellHovered(this.env, this.gridOverlay, this.props.onCellHovered);
         const resizeObserver = new ResizeObserver(() => {
@@ -38281,6 +39049,7 @@ class GridOverlay extends Component {
             const { scrollY } = this.env.model.getters.getActiveSheetDOMScrollInfo();
             return scrollY > 0;
         });
+        this.cellPopovers = useStore(CellPopoverStore);
     }
     get gridOverlayEl() {
         if (!this.gridOverlay.el) {
@@ -38294,16 +39063,18 @@ class GridOverlay extends Component {
     get isPaintingFormat() {
         return this.env.model.getters.isPaintingFormat();
     }
-    onMouseDown(ev, modifiers) {
+    onMouseDown(ev) {
         if (ev.button > 0) {
             // not main button, probably a context menu
             return;
         }
+        if (ev.target === this.gridOverlay.el && this.cellPopovers.isOpen) {
+            this.cellPopovers.close();
+        }
         const [col, row] = this.getCartesianCoordinates(ev);
         this.props.onCellClicked(col, row, {
             expandZone: ev.shiftKey,
             addZone: isCtrlKey(ev),
-            closePopover: modifiers?.closePopover ?? true,
         });
     }
     onDoubleClick(ev) {
@@ -40447,9 +41218,6 @@ class Grid extends Component {
     // Zone selection with mouse
     // ---------------------------------------------------------------------------
     onCellClicked(col, row, modifiers) {
-        if (modifiers.closePopover && this.cellPopovers.isOpen) {
-            this.cellPopovers.close();
-        }
         if (this.composerStore.editionMode === "editing") {
             this.composerStore.stopEdition();
         }
@@ -42322,11 +43090,20 @@ function isImageData(data) {
     return "imageSrc" in data;
 }
 function convertChartData(chartData) {
-    const dataSetsHaveTitle = chartData.dataSets[0].label !== undefined;
+    const dataSetsHaveTitle = chartData.dataSets.some((ds) => "reference" in (ds.label ?? {}));
     const labelRange = chartData.labelRange
         ? convertExcelRangeToSheetXC(chartData.labelRange, dataSetsHaveTitle)
         : undefined;
-    let dataSets = chartData.dataSets.map((data) => convertExcelRangeToSheetXC(data.range, dataSetsHaveTitle));
+    const dataSets = chartData.dataSets.map((data) => {
+        let label = undefined;
+        if (data.label && "text" in data.label) {
+            label = data.label.text;
+        }
+        return {
+            dataRange: convertExcelRangeToSheetXC(data.range, dataSetsHaveTitle),
+            label,
+        };
+    });
     // For doughnut charts, in chartJS first dataset = outer dataset, in excel first dataset = inner dataset
     if (chartData.type === "pie") {
         dataSets.reverse();
@@ -42335,10 +43112,9 @@ function convertChartData(chartData) {
         dataSets,
         dataSetsHaveTitle,
         labelRange,
-        title: chartData.title || "",
+        title: chartData.title ?? { text: "" },
         type: chartData.type,
         background: convertColor({ rgb: chartData.backgroundColor }) || "#FFFFFF",
-        verticalAxisPosition: chartData.verticalAxisPosition,
         legendPosition: chartData.legendPosition,
         stacked: chartData.stacked || false,
         aggregated: false,
@@ -43453,25 +44229,20 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
                 return this.extractComboChart(rootChartElement);
             }
             // Title can be separated into multiple xml elements (for styling and such), we only import the text
-            const chartTitle = this.mapOnElements({ parent: rootChartElement, query: "c:title a:t" }, (textElement) => {
+            const chartTitle = this.mapOnElements({ parent: rootChartElement, query: "c:chart > c:title a:t" }, (textElement) => {
                 return textElement.textContent || "";
             }).join("");
             const barChartGrouping = this.extractChildAttr(rootChartElement, "c:grouping", "val", {
                 default: "clustered",
             }).asString();
             return {
-                title: chartTitle,
+                title: { text: chartTitle },
                 type: CHART_TYPE_CONVERSION_MAP[chartType],
-                dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`), chartType),
+                dataSets: this.extractChartDatasets(this.querySelectorAll(rootChartElement, `c:${chartType}`), chartType),
                 labelRange: this.extractChildTextContent(rootChartElement, `c:ser ${chartType === "scatterChart" ? "c:numRef" : "c:cat"} c:f`),
                 backgroundColor: this.extractChildAttr(rootChartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
                     default: "ffffff",
                 }).asString(),
-                verticalAxisPosition: this.extractChildAttr(rootChartElement, "c:valAx > c:axPos", "val", {
-                    default: "l",
-                }).asString() === "r"
-                    ? "right"
-                    : "left",
                 legendPosition: DRAWING_LEGEND_POSITION_CONVERSION_MAP[this.extractChildAttr(rootChartElement, "c:legendPos", "val", {
                     default: "b",
                 }).asString()],
@@ -43489,21 +44260,16 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             default: "clustered",
         }).asString();
         return {
-            title: chartTitle,
+            title: { text: chartTitle },
             type: "combo",
             dataSets: [
-                ...this.extractChartDatasets(this.querySelector(chartElement, `c:barChart`), "comboChart"),
-                ...this.extractChartDatasets(this.querySelector(chartElement, `c:lineChart`), "comboChart"),
+                ...this.extractChartDatasets(this.querySelectorAll(chartElement, `c:barChart`), "comboChart"),
+                ...this.extractChartDatasets(this.querySelectorAll(chartElement, `c:lineChart`), "comboChart"),
             ],
             labelRange: this.extractChildTextContent(chartElement, "c:ser c:cat c:f"),
             backgroundColor: this.extractChildAttr(chartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
                 default: "ffffff",
             }).asString(),
-            verticalAxisPosition: this.extractChildAttr(chartElement, "c:valAx > c:axPos", "val", {
-                default: "l",
-            }).asString() === "r"
-                ? "right"
-                : "left",
             legendPosition: DRAWING_LEGEND_POSITION_CONVERSION_MAP[this.extractChildAttr(chartElement, "c:legendPos", "val", {
                 default: "b",
             }).asString()],
@@ -43511,21 +44277,49 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             fontColor: "000000",
         };
     }
-    extractChartDatasets(chartElement, chartType) {
-        if (chartType === "scatterChart") {
-            return this.extractScatterChartDatasets(chartElement);
-        }
-        return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
-            return {
-                label: this.extractChildTextContent(chartDataElement, "c:tx c:f"),
-                range: this.extractChildTextContent(chartDataElement, "c:val c:f", { required: true }),
-            };
-        });
+    extractChartDatasets(chartElements, chartType) {
+        return Array.from(chartElements)
+            .map((element) => {
+            if (chartType === "scatterChart") {
+                return this.extractScatterChartDatasets(element);
+            }
+            return this.mapOnElements({ parent: element, query: "c:ser" }, (chartDataElement) => {
+                let label = {};
+                const reference = this.extractChildTextContent(chartDataElement, "c:tx c:f");
+                if (reference) {
+                    label = { reference };
+                }
+                else {
+                    const text = this.extractChildTextContent(chartDataElement, "c:tx c:v");
+                    if (text) {
+                        label = { text };
+                    }
+                }
+                return {
+                    label,
+                    range: this.extractChildTextContent(chartDataElement, "c:val c:f", {
+                        required: true,
+                    }),
+                };
+            });
+        })
+            .flat();
     }
     extractScatterChartDatasets(chartElement) {
         return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
+            let label = {};
+            const reference = this.extractChildTextContent(chartDataElement, "c:tx c:f");
+            if (reference) {
+                label = { reference };
+            }
+            else {
+                const text = this.extractChildTextContent(chartDataElement, "c:tx c:v");
+                if (text) {
+                    label = { text };
+                }
+            }
             return {
-                label: this.extractChildTextContent(chartDataElement, "c:xVal c:f", { required: false }),
+                label,
                 range: this.extractChildTextContent(chartDataElement, "c:yVal c:f", { required: true }),
             };
         });
@@ -44257,7 +45051,7 @@ function getRelationFile(file, xmls) {
     return relsFile;
 }
 
-const EXCEL_IMPORT_VERSION = 12;
+const EXCEL_IMPORT_VERSION = 16;
 class XlsxReader {
     warningManager;
     xmls;
@@ -44735,6 +45529,30 @@ const MIGRATIONS = [
             return data;
         },
     },
+    {
+        description: "transform chart data structure (2)",
+        from: 16,
+        to: 17,
+        applyMigration(data) {
+            for (const sheet of data.sheets || []) {
+                for (const f in sheet.figures || []) {
+                    const figure = sheet.figures[f];
+                    if ("title" in figure.data && typeof figure.data.title === "string") {
+                        figure.data.title = { text: figure.data.title };
+                    }
+                    const figureType = figure.data.type;
+                    if (!["line", "bar", "pie", "scatter", "waterfall", "combo"].includes(figureType)) {
+                        continue;
+                    }
+                    const { dataSets, ...newData } = sheet.figures[f].data;
+                    const newDataSets = dataSets.map((dataRange) => ({ dataRange }));
+                    newData.dataSets = newDataSets;
+                    sheet.figures[f].data = newData;
+                }
+            }
+            return data;
+        },
+    },
 ];
 /**
  * This function is used to repair faulty data independently of the migration.
@@ -48346,6 +49164,9 @@ class RangeAdapter {
         if (range.invalidXc) {
             return range.invalidXc;
         }
+        if (!this.getters.tryGetSheet(range.sheetId)) {
+            return CellErrorType.InvalidReference;
+        }
         if (range.zone.bottom - range.zone.top < 0 || range.zone.right - range.zone.left < 0) {
             return CellErrorType.InvalidReference;
         }
@@ -51764,7 +52585,6 @@ class PositionSet {
  *
  */
 class SpreadingRelation {
-    createEmptyPositionSet;
     /**
      * Internal structure:
      * For something like
@@ -51795,9 +52615,6 @@ class SpreadingRelation {
      */
     resultsToArrayFormulas = new PositionMap();
     arrayFormulasToResults = new PositionMap();
-    constructor(createEmptyPositionSet) {
-        this.createEmptyPositionSet = createEmptyPositionSet;
-    }
     getFormulaPositionsSpreadingOn(resultPosition) {
         return this.resultsToArrayFormulas.get(resultPosition) || EMPTY_ARRAY;
     }
@@ -51816,13 +52633,13 @@ class SpreadingRelation {
      */
     addRelation({ arrayFormulaPosition, resultPosition, }) {
         if (!this.resultsToArrayFormulas.has(resultPosition)) {
-            this.resultsToArrayFormulas.set(resultPosition, this.createEmptyPositionSet());
+            this.resultsToArrayFormulas.set(resultPosition, []);
         }
-        this.resultsToArrayFormulas.get(resultPosition)?.add(arrayFormulaPosition);
+        this.resultsToArrayFormulas.get(resultPosition)?.push(arrayFormulaPosition);
         if (!this.arrayFormulasToResults.has(arrayFormulaPosition)) {
-            this.arrayFormulasToResults.set(arrayFormulaPosition, this.createEmptyPositionSet());
+            this.arrayFormulasToResults.set(arrayFormulaPosition, []);
         }
-        this.arrayFormulasToResults.get(arrayFormulaPosition)?.add(resultPosition);
+        this.arrayFormulasToResults.get(arrayFormulaPosition)?.push(resultPosition);
     }
     hasArrayFormulaResult(position) {
         return this.resultsToArrayFormulas.has(position);
@@ -51843,7 +52660,7 @@ class Evaluator {
     evaluatedCells = new PositionMap();
     formulaDependencies = lazy(new FormulaDependencyGraph(this.createEmptyPositionSet.bind(this)));
     blockedArrayFormulas = new PositionSet({});
-    spreadingRelations = new SpreadingRelation(this.createEmptyPositionSet.bind(this));
+    spreadingRelations = new SpreadingRelation();
     constructor(context, getters) {
         this.context = context;
         this.getters = getters;
@@ -51937,7 +52754,7 @@ class Evaluator {
     }
     buildDependencyGraph() {
         this.blockedArrayFormulas = this.createEmptyPositionSet();
-        this.spreadingRelations = new SpreadingRelation(this.createEmptyPositionSet.bind(this));
+        this.spreadingRelations = new SpreadingRelation();
         this.formulaDependencies = lazy(() => {
             const dependencies = [...this.getAllCells()].flatMap((position) => this.getDirectDependencies(position)
                 .filter((range) => !range.invalidSheetName && !range.invalidXc)
@@ -52069,6 +52886,7 @@ class Evaluator {
         const nbColumns = formulaReturn.length;
         const nbRows = formulaReturn[0].length;
         forEachSpreadPositionInMatrix(nbColumns, nbRows, this.updateSpreadRelation(formulaPosition));
+        this.assertNoMergedCellsInSpreadZone(formulaPosition, formulaReturn);
         forEachSpreadPositionInMatrix(nbColumns, nbRows, this.checkCollision(formulaPosition));
         forEachSpreadPositionInMatrix(nbColumns, nbRows, 
         // thanks to the isMatrix check above, we know that formulaReturn is MatrixFunctionReturn
@@ -52091,6 +52909,18 @@ class Evaluator {
         }
         throw new SplillBlockedError(_t("Result couldn't be automatically expanded. Please insert more columns and rows."));
     }
+    assertNoMergedCellsInSpreadZone({ sheetId, col, row }, matrixResult) {
+        const mergedCells = this.getters.getMergesInZone(sheetId, {
+            top: row,
+            bottom: row + matrixResult.length,
+            left: col,
+            right: col + matrixResult[0].length,
+        });
+        if (mergedCells.length === 0) {
+            return;
+        }
+        throw new SplillBlockedError(_t("Merged cells found in the spill zone. Please unmerge cells before using array formulas."));
+    }
     updateSpreadRelation({ sheetId, col, row, }) {
         const arrayFormulaPosition = { sheetId, col, row };
         return (i, j) => {
@@ -52328,10 +53158,6 @@ class EvaluationPlugin extends UIPlugin {
                     this.evaluator.updateDependencies(cmd);
                 }
                 break;
-            case "DUPLICATE_SHEET":
-            case "CREATE_SHEET":
-                this.shouldRebuildDependenciesGraph = true;
-                break;
             case "EVALUATE_CELLS":
                 this.evaluator.evaluateAllCells();
                 break;
@@ -52432,16 +53258,22 @@ class EvaluationPlugin extends UIPlugin {
             let newContent = undefined;
             let newFormat = undefined;
             let isExported = true;
+            const exportedSheetData = data.sheets.find((sheet) => sheet.id === position.sheetId);
             const formulaCell = this.getCorrespondingFormulaCell(position);
             if (formulaCell) {
                 isExported = isExportableToExcel(formulaCell.compiledFormula.tokens);
                 isFormula = isExported;
                 if (!isExported) {
-                    newContent = (value ?? "").toString();
-                    newFormat = evaluatedCell.format;
+                    // If the cell contains a non-exported formula and that is evaluates to
+                    // nothing* ,we don't export it.
+                    // * non-falsy value are relevant and so are 0 and FALSE, which only leaves
+                    // the empty string.
+                    if (value !== "") {
+                        newContent = (value ?? "").toString();
+                        newFormat = evaluatedCell.format;
+                    }
                 }
             }
-            const exportedSheetData = data.sheets.find((sheet) => sheet.id === position.sheetId);
             const exportedCellData = exportedSheetData.cells[xc] || {};
             const format = newFormat
                 ? getItemId(newFormat, data.formats)
@@ -57064,7 +57896,7 @@ class ClipboardPlugin extends UIPlugin {
     paintFormatStatus = "inactive";
     originSheetId;
     copiedData;
-    _isCutOperation;
+    _isCutOperation = false;
     // ---------------------------------------------------------------------------
     // Command Handling
     // ---------------------------------------------------------------------------
@@ -57076,14 +57908,17 @@ class ClipboardPlugin extends UIPlugin {
             case "PASTE_FROM_OS_CLIPBOARD": {
                 const copiedData = this.convertOSClipboardData(cmd.text);
                 const pasteOption = cmd.pasteOption || (this.paintFormatStatus !== "inactive" ? "onlyFormat" : undefined);
-                return this.isPasteAllowed(cmd.target, copiedData, { pasteOption });
+                return this.isPasteAllowed(cmd.target, copiedData, { pasteOption, isCutOperation: false });
             }
             case "PASTE": {
                 if (!this.copiedData) {
                     return "EmptyClipboard" /* CommandResult.EmptyClipboard */;
                 }
                 const pasteOption = cmd.pasteOption || (this.paintFormatStatus !== "inactive" ? "onlyFormat" : undefined);
-                return this.isPasteAllowed(cmd.target, this.copiedData, { pasteOption });
+                return this.isPasteAllowed(cmd.target, this.copiedData, {
+                    pasteOption: pasteOption,
+                    isCutOperation: this._isCutOperation,
+                });
             }
             case "COPY_PASTE_CELLS_ABOVE": {
                 const zones = this.getters.getSelectedZones();
@@ -57101,13 +57936,13 @@ class ClipboardPlugin extends UIPlugin {
             }
             case "INSERT_CELL": {
                 const { cut, paste } = this.getInsertCellsTargets(cmd.zone, cmd.shiftDimension);
-                const copiedData = this.copy("CUT", cut);
-                return this.isPasteAllowed(paste, copiedData, {});
+                const copiedData = this.copy(cut);
+                return this.isPasteAllowed(paste, copiedData, { isCutOperation: true });
             }
             case "DELETE_CELL": {
                 const { cut, paste } = this.getDeleteCellsTargets(cmd.zone, cmd.shiftDimension);
-                const copiedData = this.copy("CUT", cut);
-                return this.isPasteAllowed(paste, copiedData, {});
+                const copiedData = this.copy(cut);
+                return this.isPasteAllowed(paste, copiedData, { isCutOperation: true });
             }
             case "ACTIVATE_PAINT_FORMAT": {
                 if (this.paintFormatStatus !== "inactive") {
@@ -57125,23 +57960,27 @@ class ClipboardPlugin extends UIPlugin {
                 const zones = this.getters.getSelectedZones();
                 this.status = "visible";
                 this.originSheetId = this.getters.getActiveSheetId();
-                this.copiedData = this.copy(cmd.type, zones);
+                this.copiedData = this.copy(zones);
+                this._isCutOperation = cmd.type === "CUT";
                 break;
             case "PASTE_FROM_OS_CLIPBOARD": {
+                this._isCutOperation = false;
                 this.copiedData = this.convertOSClipboardData(cmd.text);
                 const pasteOption = cmd.pasteOption || (this.paintFormatStatus !== "inactive" ? "onlyFormat" : undefined);
-                this.paste(cmd.target, {
+                this.paste(cmd.target, this.copiedData, {
                     pasteOption,
                     selectTarget: true,
+                    isCutOperation: false,
                 });
                 this.status = "invisible";
                 break;
             }
             case "PASTE": {
                 const pasteOption = cmd.pasteOption || (this.paintFormatStatus !== "inactive" ? "onlyFormat" : undefined);
-                this.paste(cmd.target, {
+                this.paste(cmd.target, this.copiedData, {
                     pasteOption,
                     selectTarget: true,
+                    isCutOperation: this._isCutOperation,
                 });
                 if (this.paintFormatStatus === "oneOff") {
                     this.paintFormatStatus = "inactive";
@@ -57162,9 +58001,9 @@ class ClipboardPlugin extends UIPlugin {
                         top: multipleRowsInSelection ? zone.top : zone.top - 1,
                     };
                     this.originSheetId = this.getters.getActiveSheetId();
-                    this.copiedData = this.copy("COPY", [copyTarget]);
-                    this.paste([zone], {
-                        pasteOption: undefined,
+                    const copiedData = this.copy([copyTarget]);
+                    this.paste([zone], copiedData, {
+                        isCutOperation: false,
                         selectTarget: true,
                     });
                 }
@@ -57179,9 +58018,9 @@ class ClipboardPlugin extends UIPlugin {
                         left: multipleColsInSelection ? zone.left : zone.left - 1,
                     };
                     this.originSheetId = this.getters.getActiveSheetId();
-                    this.copiedData = this.copy("COPY", [copyTarget]);
-                    this.paste([zone], {
-                        pasteOption: undefined,
+                    const copiedData = this.copy([copyTarget]);
+                    this.paste([zone], copiedData, {
+                        isCutOperation: false,
                         selectTarget: true,
                     });
                 }
@@ -57197,14 +58036,14 @@ class ClipboardPlugin extends UIPlugin {
                     }
                     break;
                 }
-                this.copiedData = this.copy("CUT", cut);
-                this.paste(paste, {});
+                const copiedData = this.copy(cut);
+                this.paste(paste, copiedData, { isCutOperation: true });
                 break;
             }
             case "INSERT_CELL": {
                 const { cut, paste } = this.getInsertCellsTargets(cmd.zone, cmd.shiftDimension);
-                this.copiedData = this.copy("CUT", cut);
-                this.paste(paste, {});
+                const copiedData = this.copy(cut);
+                this.paste(paste, copiedData, { isCutOperation: true });
                 break;
             }
             case "ADD_COLUMNS_ROWS": {
@@ -57236,7 +58075,8 @@ class ClipboardPlugin extends UIPlugin {
                 break;
             }
             case "REPEAT_PASTE": {
-                this.paste(cmd.target, {
+                this.paste(cmd.target, this.copiedData, {
+                    isCutOperation: false,
                     pasteOption: cmd.pasteOption,
                     selectTarget: true,
                 });
@@ -57244,7 +58084,7 @@ class ClipboardPlugin extends UIPlugin {
             }
             case "ACTIVATE_PAINT_FORMAT": {
                 const zones = this.getters.getSelectedZones();
-                this.copiedData = this.copy("COPY", zones);
+                this.copiedData = this.copy(zones);
                 this.status = "visible";
                 if (cmd.persistent) {
                     this.paintFormatStatus = "persistent";
@@ -57275,7 +58115,6 @@ class ClipboardPlugin extends UIPlugin {
         }
     }
     convertOSClipboardData(clipboardData) {
-        this._isCutOperation = false;
         const handlers = clipboardHandlersRegistries.figureHandlers
             .getAll()
             .map((handler) => new handler(this.getters, this.dispatch));
@@ -57313,7 +58152,6 @@ class ClipboardPlugin extends UIPlugin {
         for (const handler of this.selectClipboardHandlers(copiedData)) {
             const result = handler.isPasteAllowed(this.getters.getActiveSheetId(), target, copiedData, {
                 ...options,
-                isCutOperation: this.isCutOperation(),
             });
             if (result !== "Success" /* CommandResult.Success */) {
                 return result;
@@ -57336,9 +58174,8 @@ class ClipboardPlugin extends UIPlugin {
         }
         return false;
     }
-    copy(operation, zones) {
+    copy(zones) {
         let copiedData = {};
-        this._isCutOperation = operation === "CUT";
         const clipboardData = this.getClipboardData(zones);
         for (const handler of this.selectClipboardHandlers(clipboardData)) {
             const data = handler.copy(clipboardData);
@@ -57346,8 +58183,8 @@ class ClipboardPlugin extends UIPlugin {
         }
         return copiedData;
     }
-    paste(zones, options) {
-        if (!this.copiedData) {
+    paste(zones, copiedData, options) {
+        if (!copiedData) {
             return;
         }
         let zone = undefined;
@@ -57355,12 +58192,9 @@ class ClipboardPlugin extends UIPlugin {
         let target = {
             zones,
         };
-        const handlers = this.selectClipboardHandlers(this.copiedData);
+        const handlers = this.selectClipboardHandlers(copiedData);
         for (const handler of handlers) {
-            const currentTarget = handler.getPasteTarget(zones, this.copiedData, {
-                ...options,
-                isCutOperation: this.isCutOperation(),
-            });
+            const currentTarget = handler.getPasteTarget(zones, copiedData, options);
             if (currentTarget.figureId) {
                 target.figureId = currentTarget.figureId;
             }
@@ -57376,7 +58210,7 @@ class ClipboardPlugin extends UIPlugin {
         if (zone !== undefined) {
             this.addMissingDimensions(this.getters.getActiveSheetId(), zone.right - zone.left + 1, zone.bottom - zone.top + 1, zone.left, zone.top);
         }
-        handlers.forEach((handler) => handler.paste(target, this.copiedData, { ...options, isCutOperation: this.isCutOperation() }));
+        handlers.forEach((handler) => handler.paste(target, copiedData, options));
         if (!options?.selectTarget) {
             return;
         }
@@ -59762,6 +60596,7 @@ class BottomBarSheet extends Component {
     sheetDivRef = useRef("sheetDiv");
     sheetNameRef = useRef("sheetNameSpan");
     editionState = "initializing";
+    DOMFocusableElementStore;
     setup() {
         onMounted(() => {
             if (this.isSheetActive) {
@@ -59774,6 +60609,7 @@ class BottomBarSheet extends Component {
                 this.focusInputAndSelectContent();
             }
         });
+        this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
     }
     focusInputAndSelectContent() {
         if (!this.state.isEditing || !this.sheetNameRef.el)
@@ -59815,9 +60651,11 @@ class BottomBarSheet extends Component {
         if (ev.key === "Enter") {
             ev.preventDefault();
             this.stopEdition();
+            this.DOMFocusableElementStore.focus();
         }
         if (ev.key === "Escape") {
             this.cancelEdition();
+            this.DOMFocusableElementStore.focus();
         }
     }
     onClickSheetName(ev) {
@@ -61866,6 +62704,9 @@ class Spreadsheet extends Component {
     static template = "o-spreadsheet-Spreadsheet";
     static props = {
         model: Object,
+        notifyUser: { type: Function, optional: true },
+        raiseError: { type: Function, optional: true },
+        askConfirmation: { type: Function, optional: true },
     };
     static components = {
         TopBar,
@@ -61912,7 +62753,11 @@ class Spreadsheet extends Component {
             toggleSidePanel: this.sidePanel.toggle.bind(this.sidePanel),
             clipboard: this.env.clipboard || instantiateClipboard(),
             startCellEdition: (content) => this.composerFocusStore.focusGridComposerCell(content),
+            notifyUser: (notification) => this.notificationStore.notifyUser(notification),
+            askConfirmation: (text, confirm, cancel) => this.notificationStore.askConfirmation(text, confirm, cancel),
+            raiseError: (text, cb) => this.notificationStore.raiseError(text, cb),
         });
+        this.notificationStore.updateNotificationCallbacks({ ...this.props });
         useEffect(() => {
             /**
              * Only refocus the grid if the active element is not a child of the spreadsheet
@@ -61935,6 +62780,9 @@ class Spreadsheet extends Component {
             if (nextProps.model !== this.props.model) {
                 throw new Error("Changing the props model is not supported at the moment.");
             }
+            if (!deepEquals(nextProps, this.props)) {
+                this.notificationStore.updateNotificationCallbacks({ ...nextProps });
+            }
         });
         const render = batched(this.render.bind(this, true));
         onMounted(() => {
@@ -61952,7 +62800,7 @@ class Spreadsheet extends Component {
     bindModelEvents() {
         this.model.on("update", this, () => this.render(true));
         this.model.on("notify-ui", this, (notification) => this.notificationStore.notifyUser(notification));
-        this.model.on("raise-error-ui", this, ({ text }) => this.env.raiseError(text));
+        this.model.on("raise-error-ui", this, ({ text }) => this.notificationStore.raiseError(text));
     }
     unbindModelEvents() {
         this.model.off("update", this);
@@ -63507,10 +64355,13 @@ function createChart(chart, chartSheetIndex, data) {
     });
     // <manualLayout/> to manually position the chart in the figure container
     let title = escapeXml ``;
-    if (chart.data.title) {
+    if (chart.data.title?.text) {
+        const color = chart.data.title.color
+            ? toXlsxHexColor(chart.data.title.color)
+            : chart.data.fontColor;
         title = escapeXml /*xml*/ `
       <c:title>
-        ${insertText(chart.data.title, chart.data.fontColor)}
+        ${insertText(chart.data.title.text, color, DEFAULT_CHART_FONT_SIZE, chart.data.title)}
         <c:overlay val="0" />
       </c:title>
     `;
@@ -63598,7 +64449,7 @@ function lineAttributes(params) {
     </a:ln>
   `;
 }
-function insertText(text, fontColor = "000000", fontsize = 22) {
+function insertText(text, fontColor = "000000", fontsize = DEFAULT_CHART_FONT_SIZE, style = {}) {
     return escapeXml /*xml*/ `
     <c:tx>
       <c:rich>
@@ -63606,13 +64457,13 @@ function insertText(text, fontColor = "000000", fontsize = 22) {
         <a:lstStyle />
         <a:p>
           <a:pPr lvl="0">
-            <a:defRPr b="0">
+            <a:defRPr b="${style?.bold ? 1 : 0}" i="${style?.italic ? 1 : 0}">
               ${solidFill(fontColor)}
               <a:latin typeface="+mn-lt"/>
             </a:defRPr>
           </a:pPr>
           <a:r> <!-- Runs -->
-            <a:rPr sz="${fontsize * 100}"/>
+            <a:rPr b="${style?.bold ? 1 : 0}" i="${style?.italic ? 1 : 0}" sz="${fontsize * 100}"/>
             <a:t>${text}</a:t>
           </a:r>
         </a:p>
@@ -63641,6 +64492,24 @@ function insertTextProperties(fontsize = 12, fontColor = "000000", bold = false,
     </c:txPr>
   `;
 }
+function extractDataSetLabel(label) {
+    if (!label) {
+        return escapeXml /*xml*/ ``;
+    }
+    if ("text" in label && label.text) {
+        return escapeXml /*xml*/ `
+      <c:tx><c:v>${label.text}</c:v></c:tx>
+    `;
+    }
+    if ("reference" in label && label.reference) {
+        return escapeXml /*xml*/ `
+      <c:tx>
+      ${stringRef(label.reference)}
+      </c:tx>
+    `;
+    }
+    return escapeXml /*xml*/ ``;
+}
 function addBarChart(chart) {
     // gapWitdh and overlap that define the space between clusters (in %) and the overlap between datasets (from -100: completely scattered to 100, completely overlapped)
     // see gapWidth : https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_gapWidth_topic_ID0EFVEQB.html#topic_ID0EFVEQB
@@ -63648,46 +64517,72 @@ function addBarChart(chart) {
     //
     // overlap and gapWitdh seems to be by default at -20 and 20 in chart.js.
     // See https://www.chartjs.org/docs/latest/charts/bar.html and https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage
-    const colors = new ChartColors();
-    const dataSetsNodes = [];
+    const dataSetsColors = chart.dataSets.map((ds) => ds.backgroundColor ?? "");
+    const colors = new ColorGenerator(dataSetsColors);
+    const leftDataSetsNodes = [];
+    const rightDataSetsNodes = [];
     for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
         const color = toXlsxHexColor(colors.next());
         const dataShapeProperty = shapeProperty({
             backgroundColor: color,
             line: { color },
         });
-        dataSetsNodes.push(escapeXml /*xml*/ `
+        const dataSetNode = escapeXml /*xml*/ `
       <c:ser>
         <c:idx val="${dsIndex}"/>
         <c:order val="${dsIndex}"/>
-        ${dataset.label ? escapeXml /*xml*/ `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
+        ${extractDataSetLabel(dataset.label)}
         ${dataShapeProperty}
         ${chart.labelRange ? escapeXml /*xml*/ `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""} <!-- x-coordinate values -->
         <c:val> <!-- x-coordinate values -->
           ${numberRef(dataset.range)}
         </c:val>
       </c:ser>
-    `);
+    `;
+        if (dataset.rightYAxis) {
+            rightDataSetsNodes.push(dataSetNode);
+        }
+        else {
+            leftDataSetsNodes.push(dataSetNode);
+        }
     }
-    // Excel does not support this feature
-    const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
     const grouping = chart.stacked ? "stacked" : "clustered";
     const overlap = chart.stacked ? 100 : -20;
     return escapeXml /*xml*/ `
-    <c:barChart>
-      <c:barDir val="col"/>
-      <c:grouping val="${grouping}"/>
-      <c:overlap val="${overlap}"/>
-      <c:gapWidth val="70"/>
-      <!-- each data marker in the series does not have a different color -->
-      <c:varyColors val="0"/>
-      ${joinXmlNodes(dataSetsNodes)}
-      <c:axId val="${catAxId}" />
-      <c:axId val="${valAxId}" />
-    </c:barChart>
-    ${addAx("b", "c:catAx", catAxId, valAxId, { fontColor: chart.fontColor })}
-    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
-  `;
+  ${leftDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+        <c:barChart>
+          <c:barDir val="col"/>
+          <c:grouping val="${grouping}"/>
+          <c:overlap val="${overlap}"/>
+          <c:gapWidth val="70"/>
+          <!-- each data marker in the series does not have a different color -->
+          <c:varyColors val="0"/>
+          ${joinXmlNodes(leftDataSetsNodes)}
+          <c:axId val="${catAxId}" />
+          <c:axId val="${valAxId}" />
+        </c:barChart>
+        ${addAx("b", "c:catAx", catAxId, valAxId, chart.axesDesign?.x?.title, chart.fontColor)}
+        ${addAx("l", "c:valAx", valAxId, catAxId, chart.axesDesign?.y?.title, chart.fontColor)}
+      `
+        : ""}
+  ${rightDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+        <c:barChart>
+          <c:barDir val="col"/>
+          <c:grouping val="${grouping}"/>
+          <c:overlap val="${overlap}"/>
+          <c:gapWidth val="70"/>
+          <!-- each data marker in the series does not have a different color -->
+          <c:varyColors val="0"/>
+          ${joinXmlNodes(rightDataSetsNodes)}
+          <c:axId val="${catAxId + 1}" />
+          <c:axId val="${valAxId + 1}" />
+        </c:barChart>
+        ${addAx("b", "c:catAx", catAxId + 1, valAxId + 1, chart.axesDesign?.x?.title, chart.fontColor, leftDataSetsNodes.length ? 1 : 0)}
+        ${addAx("r", "c:valAx", valAxId + 1, catAxId + 1, chart.axesDesign?.y1?.title, chart.fontColor)}
+      `
+        : ""}`;
 }
 function addComboChart(chart) {
     // gapWitdh and overlap that define the space between clusters (in %) and the overlap between datasets (from -100: completely scattered to 100, completely overlapped)
@@ -63696,28 +64591,38 @@ function addComboChart(chart) {
     //
     // overlap and gapWitdh seems to be by default at -20 and 20 in chart.js.
     // See https://www.chartjs.org/docs/latest/charts/bar.html and https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage
-    const colors = new ChartColors();
-    const dataSetsNodes = [];
-    for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
+    const dataSets = chart.dataSets;
+    const dataSetsColors = dataSets.map((ds) => ds.backgroundColor ?? "");
+    const colors = new ColorGenerator(dataSetsColors);
+    let dataSet = dataSets[0];
+    const firstColor = toXlsxHexColor(colors.next());
+    const useRightAxisForBarSerie = dataSet.rightYAxis ?? false;
+    const barDataSetNode = escapeXml /*xml*/ `
+    <c:ser>
+      <c:idx val="0"/>
+      <c:order val="0"/>
+      ${extractDataSetLabel(dataSet.label)}
+      ${shapeProperty({
+        backgroundColor: firstColor,
+        line: { color: firstColor },
+    })}
+      ${chart.labelRange ? escapeXml /*xml*/ `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""}
+      <!-- x-coordinate values -->
+      <c:val>
+        ${numberRef(dataSet.range)}
+      </c:val>
+    </c:ser>
+  `;
+    const leftDataSetsNodes = [];
+    const rightDataSetsNodes = [];
+    for (let dsIndex = 1; dsIndex < dataSets.length; dsIndex++) {
+        dataSet = dataSets[dsIndex];
         const color = toXlsxHexColor(colors.next());
         const dataShapeProperty = shapeProperty({
             backgroundColor: color,
             line: { color },
         });
-        dataSetsNodes.push(dsIndex === "0"
-            ? escapeXml /*xml*/ `
-      <c:ser>
-        <c:idx val="${dsIndex}"/>
-        <c:order val="${dsIndex}"/>
-        ${dataset.label ? escapeXml /*xml*/ `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
-        ${dataShapeProperty}
-        ${chart.labelRange ? escapeXml /*xml*/ `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""} <!-- x-coordinate values -->
-        <c:val> <!-- x-coordinate values -->
-          ${numberRef(dataset.range)}
-        </c:val>
-      </c:ser>
-      `
-            : escapeXml /*xml*/ `
+        const dataSetNode = escapeXml /*xml*/ `
       <c:ser>
         <c:idx val="${dsIndex}"/>
         <c:order val="${dsIndex}"/>
@@ -63725,18 +64630,24 @@ function addComboChart(chart) {
         <c:marker>
           <c:symbol val="circle" />
           <c:size val="5"/>
+          ${dataShapeProperty}
         </c:marker>
-        ${dataset.label ? escapeXml `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
+        ${extractDataSetLabel(dataSet.label)}
         ${dataShapeProperty}
-        ${chart.labelRange ? escapeXml `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""} <!-- x-coordinate values -->
-        <c:val> <!-- x-coordinate values -->
-          ${numberRef(dataset.range)}
+        ${chart.labelRange ? escapeXml `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""}
+        <!-- x-coordinate values -->
+        <c:val>
+          ${numberRef(dataSet.range)}
         </c:val>
       </c:ser>
-      `);
+    `;
+        if (dataSet.rightYAxis) {
+            rightDataSetsNodes.push(dataSetNode);
+        }
+        else {
+            leftDataSetsNodes.push(dataSetNode);
+        }
     }
-    // Excel does not support this feature
-    const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
     const overlap = chart.stacked ? 100 : -20;
     return escapeXml /*xml*/ `
     <c:barChart>
@@ -63746,34 +64657,63 @@ function addComboChart(chart) {
       <c:gapWidth val="70"/>
       <!-- each data marker in the series does not have a different color -->
       <c:varyColors val="0"/>
-      ${dataSetsNodes[0]}
-      <c:axId val="${catAxId}" />
-      <c:axId val="${valAxId}" />
+      ${barDataSetNode}
+      <c:axId val="${catAxId + (useRightAxisForBarSerie ? 1 : 0)}" />
+      <c:axId val="${valAxId + (useRightAxisForBarSerie ? 1 : 0)}" />
     </c:barChart>
-    <c:lineChart>
-      <c:grouping val="standard"/>
-      <!-- each data marker in the series does not have a different color -->
-      <c:varyColors val="0"/>
-      ${joinXmlNodes(dataSetsNodes.slice(1))}
-      <c:axId val="${catAxId}" />
-      <c:axId val="${valAxId}" />
-    </c:lineChart>
-    ${addAx("b", "c:catAx", catAxId, valAxId, { fontColor: chart.fontColor })}
-    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
+    ${leftDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+        <c:lineChart>
+          <c:grouping val="standard"/>
+          <!-- each data marker in the series does not have a different color -->
+          <c:varyColors val="0"/>
+          ${joinXmlNodes(leftDataSetsNodes)}
+          <c:axId val="${catAxId}" />
+          <c:axId val="${valAxId}" />
+        </c:lineChart>
+      `
+        : ""}
+    ${rightDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+        <c:lineChart>
+          <c:grouping val="standard"/>
+          <!-- each data marker in the series does not have a different color -->
+          <c:varyColors val="0"/>
+          ${joinXmlNodes(rightDataSetsNodes)}
+          <c:axId val="${catAxId + 1}" />
+          <c:axId val="${valAxId + 1}" />
+        </c:lineChart>
+      `
+        : ""}
+    ${!useRightAxisForBarSerie || leftDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+        ${addAx("b", "c:catAx", catAxId + 1, valAxId + 1, chart.axesDesign?.x?.title, chart.fontColor, leftDataSetsNodes.length ? 1 : 0)}
+        ${addAx("r", "c:valAx", valAxId + 1, catAxId + 1, chart.axesDesign?.y1?.title, chart.fontColor)}
+      `
+        : ""}
+    ${useRightAxisForBarSerie || rightDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+        ${addAx("b", "c:catAx", catAxId, valAxId, chart.axesDesign?.x?.title, chart.fontColor, leftDataSetsNodes.length || !useRightAxisForBarSerie ? 1 : 0)}
+        ${addAx("l", "c:valAx", valAxId, catAxId, chart.axesDesign?.y?.title, chart.fontColor)}
+      `
+        : ""}
   `;
 }
 function addLineChart(chart) {
-    const colors = new ChartColors();
-    const dataSetsNodes = [];
+    const dataSetsColors = chart.dataSets.map((ds) => ds.backgroundColor ?? "");
+    const colors = new ColorGenerator(dataSetsColors);
+    const leftDataSetsNodes = [];
+    const rightDataSetsNodes = [];
     for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
+        const color = toXlsxHexColor(colors.next());
         const dataShapeProperty = shapeProperty({
             line: {
                 width: 2.5,
                 style: "solid",
-                color: toXlsxHexColor(colors.next()),
+                color,
             },
         });
-        dataSetsNodes.push(escapeXml /*xml*/ `
+        const dataSetNode = escapeXml /*xml*/ `
       <c:ser>
         <c:idx val="${dsIndex}"/>
         <c:order val="${dsIndex}"/>
@@ -63781,37 +64721,63 @@ function addLineChart(chart) {
         <c:marker>
           <c:symbol val="circle" />
           <c:size val="5"/>
+          ${shapeProperty({ backgroundColor: color, line: { color } })}
         </c:marker>
-        ${dataset.label ? escapeXml `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
+        ${extractDataSetLabel(dataset.label)}
         ${dataShapeProperty}
         ${chart.labelRange ? escapeXml `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""} <!-- x-coordinate values -->
         <c:val> <!-- x-coordinate values -->
           ${numberRef(dataset.range)}
         </c:val>
       </c:ser>
-    `);
+    `;
+        if (dataset.rightYAxis) {
+            rightDataSetsNodes.push(dataSetNode);
+        }
+        else {
+            leftDataSetsNodes.push(dataSetNode);
+        }
     }
-    // Excel does not support this feature
-    const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
     const grouping = chart.stacked ? "stacked" : "standard";
     return escapeXml /*xml*/ `
-    <c:lineChart>
-      <c:grouping val="${grouping}"/>
-      <!-- each data marker in the series does not have a different color -->
-      <c:varyColors val="0"/>
-      ${joinXmlNodes(dataSetsNodes)}
-      <c:axId val="${catAxId}" />
-      <c:axId val="${valAxId}" />
-    </c:lineChart>
-    ${addAx("b", "c:catAx", catAxId, valAxId, { fontColor: chart.fontColor })}
-    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
+    ${leftDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+        <c:lineChart>
+          <c:grouping val="${grouping}"/>
+          <!-- each data marker in the series does not have a different color -->
+          <c:varyColors val="0"/>
+          ${joinXmlNodes(leftDataSetsNodes)}
+          <c:axId val="${catAxId}" />
+          <c:axId val="${valAxId}" />
+        </c:lineChart>
+        ${addAx("b", "c:catAx", catAxId, valAxId, chart.axesDesign?.x?.title, chart.fontColor)}
+        ${addAx("l", "c:valAx", valAxId, catAxId, chart.axesDesign?.y?.title, chart.fontColor)}
+      `
+        : ""}
+    ${rightDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+        <c:lineChart>
+          <c:grouping val="${grouping}"/>
+          <!-- each data marker in the series does not have a different color -->
+          <c:varyColors val="0"/>
+          ${joinXmlNodes(rightDataSetsNodes)}
+          <c:axId val="${catAxId + 1}" />
+          <c:axId val="${valAxId + 1}" />
+        </c:lineChart>
+        ${addAx("b", "c:catAx", catAxId + 1, valAxId + 1, chart.axesDesign?.x?.title, chart.fontColor, leftDataSetsNodes.length ? 1 : 0)}
+        ${addAx("r", "c:valAx", valAxId + 1, catAxId + 1, chart.axesDesign?.y1?.title, chart.fontColor)}
+      `
+        : ""}
   `;
 }
 function addScatterChart(chart) {
-    const colors = new ChartColors();
-    const dataSetsNodes = [];
+    const dataSetsColors = chart.dataSets.map((ds) => ds.backgroundColor ?? "");
+    const colors = new ColorGenerator(dataSetsColors);
+    const leftDataSetsNodes = [];
+    const rightDataSetsNodes = [];
     for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
-        dataSetsNodes.push(escapeXml /*xml*/ `
+        const color = toXlsxHexColor(colors.next());
+        const dataSetNode = escapeXml /*xml*/ `
       <c:ser>
         <c:idx val="${dsIndex}"/>
         <c:order val="${dsIndex}"/>
@@ -63826,8 +64792,9 @@ function addScatterChart(chart) {
         <c:marker>
           <c:symbol val="circle" />
           <c:size val="5"/>
-          ${shapeProperty({ backgroundColor: toXlsxHexColor(colors.next()) })}
+          ${shapeProperty({ backgroundColor: color, line: { color } })}
         </c:marker>
+        ${extractDataSetLabel(dataset.label)}
         ${chart.labelRange
             ? escapeXml /*xml*/ `<c:xVal> <!-- x-coordinate values -->
               ${numberRef(chart.labelRange)}
@@ -63837,24 +64804,46 @@ function addScatterChart(chart) {
           ${numberRef(dataset.range)}
         </c:yVal>
       </c:ser>
-    `);
+    `;
+        if (dataset.rightYAxis) {
+            rightDataSetsNodes.push(dataSetNode);
+        }
+        else {
+            leftDataSetsNodes.push(dataSetNode);
+        }
     }
-    const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
     return escapeXml /*xml*/ `
-    <c:scatterChart>
-      <!-- each data marker in the series does not have a different color -->
-      <c:varyColors val="0"/>
-      <c:scatterStyle val="lineMarker"/>
-      ${joinXmlNodes(dataSetsNodes)}
-      <c:axId val="${catAxId}" />
-      <c:axId val="${valAxId}" />
-    </c:scatterChart>
-    ${addAx("b", "c:valAx", catAxId, valAxId, { fontColor: chart.fontColor })}
-    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
-  `;
+  ${leftDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+      <c:scatterChart>
+        <!-- each data marker in the series does not have a different color -->
+        <c:varyColors val="0"/>
+        <c:scatterStyle val="lineMarker"/>
+        ${joinXmlNodes(leftDataSetsNodes)}
+        <c:axId val="${catAxId}" />
+        <c:axId val="${valAxId}" />
+      </c:scatterChart>
+      ${addAx("b", "c:valAx", catAxId, valAxId, chart.axesDesign?.x?.title, chart.fontColor)}
+      ${addAx("l", "c:valAx", valAxId, catAxId, chart.axesDesign?.y?.title, chart.fontColor)}
+    `
+        : ""}
+  ${rightDataSetsNodes.length
+        ? escapeXml /*xml*/ `
+      <c:scatterChart>
+        <!-- each data marker in the series does not have a different color -->
+        <c:varyColors val="0"/>
+        <c:scatterStyle val="lineMarker"/>
+        ${joinXmlNodes(rightDataSetsNodes)}
+        <c:axId val="${catAxId + 1}" />
+        <c:axId val="${valAxId + 1}" />
+      </c:scatterChart>
+      ${addAx("b", "c:valAx", catAxId + 1, valAxId + 1, chart.axesDesign?.x?.title, chart.fontColor, leftDataSetsNodes.length ? 1 : 0)}
+      ${addAx("r", "c:valAx", valAxId + 1, catAxId + 1, chart.axesDesign?.y1?.title, chart.fontColor)}
+    `
+        : ""}`;
 }
 function addDoughnutChart(chart, chartSheetIndex, data, { holeSize } = { holeSize: 50 }) {
-    const colors = new ChartColors();
+    const colors = new ColorGenerator();
     const maxLength = largeMax(chart.dataSets.map((ds) => getRangeSize(ds.range, chartSheetIndex, data)));
     const doughnutColors = range(0, maxLength).map(() => toXlsxHexColor(colors.next()));
     const dataSetsNodes = [];
@@ -63878,7 +64867,7 @@ function addDoughnutChart(chart, chartSheetIndex, data, { holeSize } = { holeSiz
       <c:ser>
         <c:idx val="${dsIndex}"/>
         <c:order val="${dsIndex}"/>
-        ${dataset.label ? escapeXml `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
+        ${extractDataSetLabel(dataset.label)}
         ${joinXmlNodes(dataPoints)}
         ${insertDataLabels({ showLeaderLines: true })}
         ${chart.labelRange ? escapeXml `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""}
@@ -63910,14 +64899,16 @@ function insertDataLabels({ showLeaderLines } = { showLeaderLines: false }) {
     </dLbls>
   `;
 }
-function addAx(position, axisName, axId, crossAxId, { fontColor }) {
+function addAx(position, axisName, axId, crossAxId, title, defaultFontColor, deleteAxis = 0) {
     // Each Axis present inside a graph needs to be identified by an unsigned integer in order to be referenced by its crossAxis.
     // I.e. x-axis, will reference y-axis and vice-versa.
+    const color = title?.color ? toXlsxHexColor(title.color) : defaultFontColor;
     return escapeXml /*xml*/ `
     <${axisName}>
       <c:axId val="${axId}"/>
       <c:crossAx val="${crossAxId}"/> <!-- reference to the other axe of the chart -->
-      <c:delete val="0"/> <!-- by default, axis are not displayed -->
+      <c:crosses val="${position === "b" || position === "l" ? "min" : "max"}"/>
+      <c:delete val="${deleteAxis}"/> <!-- by default, axis are not displayed -->
       <c:scaling>
         <c:orientation  val="minMax" />
       </c:scaling>
@@ -63927,9 +64918,9 @@ function addAx(position, axisName, axId, crossAxId, { fontColor }) {
       <c:minorTickMark val="none" />
       <c:numFmt formatCode="General" sourceLinked="1" />
       <c:title>
-        ${insertText("")}
+        ${insertText(title?.text ?? "", color, 10, title)}
       </c:title>
-      ${insertTextProperties(10, fontColor)}
+      ${insertTextProperties(10, defaultFontColor)}
     </${axisName}>
     <!-- <tickLblPos/> omitted -->
   `;
@@ -64810,7 +65801,11 @@ function addRows(construct, data, sheet) {
                 let cellNode = escapeXml ``;
                 // Either formula or static value inside the cell
                 if (cell.isFormula) {
-                    ({ attrs: additionalAttrs, node: cellNode } = addFormula(cell));
+                    const res = addFormula(cell);
+                    if (!res) {
+                        continue;
+                    }
+                    ({ attrs: additionalAttrs, node: cellNode } = res);
                 }
                 else if (cell.content && isMarkdownLink(cell.content)) {
                     const { label } = parseMarkdownLink(cell.content);
@@ -65816,13 +66811,14 @@ const helpers = {
     UuidGenerator,
     formatValue,
     createCurrencyFormat,
+    ColorGenerator,
     computeTextWidth,
     createEmptyWorkbookData,
     createEmptySheet,
     createEmptyExcelSheet,
     getDefaultChartJsRuntime,
     chartFontColor,
-    ChartColors,
+    getChartAxisTitleRuntime,
     getFillingMode,
     rgbaToHex,
     colorToRGBA,
@@ -65879,9 +66875,10 @@ const components = {
     GridOverlay,
     ScorecardChart,
     LineConfigPanel,
-    GenericChartDesignPanel,
     BarConfigPanel,
+    PieChartDesignPanel,
     GenericChartConfigPanel,
+    ChartWithAxisDesignPanel,
     GaugeChartConfigPanel,
     GaugeChartDesignPanel,
     ScorecardChartConfigPanel,
@@ -65937,6 +66934,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "17.3.0-alpha.9";
-__info__.date = "2024-05-24T11:32:11.976Z";
-__info__.hash = "aac246d";
+__info__.version = "17.3.0";
+__info__.date = "2024-05-31T14:21:26.547Z";
+__info__.hash = "271202e";