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

package/dist/o-spreadsheet.iife.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
  */
 
 (function (exports, owl) {
@@ -41,6 +41,8 @@
   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",
@@ -1089,6 +1091,44 @@
       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
@@ -1934,11 +1974,13 @@
       "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",
@@ -4877,18 +4919,22 @@
   /**
    * 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);
@@ -4897,27 +4943,33 @@
           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;
@@ -5036,6 +5088,11 @@
       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);
@@ -5056,6 +5113,28 @@
       }
       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);
   }
@@ -8825,7 +8904,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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);
       }
   }
@@ -8874,7 +8953,32 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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 {
@@ -9895,10 +9999,10 @@ stores.inject(MyMetaStore, storeInstance);
   /**
    * 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;
@@ -9915,26 +10019,36 @@ stores.inject(MyMetaStore, storeInstance);
                       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;
@@ -9974,11 +10088,24 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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) {
@@ -10004,45 +10131,16 @@ stores.inject(MyMetaStore, storeInstance);
           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.
@@ -10055,11 +10153,11 @@ stores.inject(MyMetaStore, storeInstance);
   }
   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 */;
           }
@@ -10099,6 +10197,35 @@ stores.inject(MyMetaStore, storeInstance);
       }; // 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) {
@@ -10200,8 +10327,8 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -10216,8 +10343,8 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -10255,7 +10382,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -10302,7 +10431,10 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -10389,7 +10521,10 @@ stores.inject(MyMetaStore, storeInstance);
           ? 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),
@@ -10421,10 +10556,9 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   /* 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)
@@ -10435,11 +10569,6 @@ stores.inject(MyMetaStore, storeInstance);
       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();
@@ -10467,13 +10596,25 @@ stores.inject(MyMetaStore, storeInstance);
           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,
                   },
               };
           }
@@ -10574,7 +10715,7 @@ stores.inject(MyMetaStore, storeInstance);
           return structure;
       }
       get title() {
-          return this.runtime.title;
+          return this.runtime.title.text ?? "";
       }
       get keyValue() {
           return this.runtime.keyValue;
@@ -10642,8 +10783,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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,
@@ -10676,7 +10817,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
       }
   }
@@ -12026,7 +12167,7 @@ stores.inject(MyMetaStore, storeInstance);
       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);
               }
@@ -12656,7 +12797,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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;
               }
@@ -12681,7 +12822,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
               }
@@ -13228,7 +13369,7 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -13257,7 +13398,7 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -13562,7 +13703,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
               }
@@ -13645,7 +13786,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
               }
@@ -22102,9 +22243,9 @@ stores.inject(MyMetaStore, storeInstance);
   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;
@@ -22179,7 +22320,8 @@ stores.inject(MyMetaStore, storeInstance);
   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();
@@ -22188,7 +22330,7 @@ stores.inject(MyMetaStore, storeInstance);
       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)
@@ -22218,17 +22360,35 @@ stores.inject(MyMetaStore, storeInstance);
       };
       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: {
@@ -22518,12 +22678,18 @@ stores.inject(MyMetaStore, storeInstance);
    * 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: {
@@ -22536,10 +22702,15 @@ stores.inject(MyMetaStore, storeInstance);
           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.
@@ -22674,9 +22845,10 @@ stores.inject(MyMetaStore, storeInstance);
       // 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();
@@ -22717,22 +22889,24 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -22743,21 +22917,28 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -22777,19 +22958,26 @@ stores.inject(MyMetaStore, storeInstance);
           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() {
@@ -22800,12 +22988,14 @@ stores.inject(MyMetaStore, storeInstance);
               .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) {
@@ -22839,30 +23029,51 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
   }
@@ -22882,8 +23093,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -22893,29 +23105,43 @@ stores.inject(MyMetaStore, storeInstance);
           };
           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);
@@ -22924,9 +23150,16 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -22936,19 +23169,25 @@ stores.inject(MyMetaStore, storeInstance);
           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() {
@@ -22960,12 +23199,14 @@ stores.inject(MyMetaStore, storeInstance);
               .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) {
@@ -22983,11 +23224,10 @@ stores.inject(MyMetaStore, storeInstance);
               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) {
@@ -23002,7 +23242,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   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;
@@ -23016,11 +23259,12 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -23038,52 +23282,64 @@ stores.inject(MyMetaStore, storeInstance);
                   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),
+          },
+      };
+      const rightVerticalAxis = {
+          beginAtZero: true, // the origin of the y axis is always zero
+          ticks: {
+              color: fontColor,
+              callback: formatCallback(lineDataSetsFormat),
           },
       };
-      if (chart.useBothYAxis) {
+      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,
           };
@@ -23164,7 +23420,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
       }
@@ -23184,9 +23440,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -23237,7 +23493,7 @@ stores.inject(MyMetaStore, storeInstance);
           return {
               ...this,
               range: this.dataRange
-                  ? [this.getters.getRangeString(this.dataRange, this.sheetId)]
+                  ? [{ dataRange: this.getters.getRangeString(this.dataRange, this.sheetId) }]
                   : undefined,
           };
       }
@@ -23300,7 +23556,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 }),
@@ -23558,28 +23814,49 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
   }
@@ -23626,7 +23903,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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
@@ -23659,6 +23937,22 @@ stores.inject(MyMetaStore, storeInstance);
           };
           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,
@@ -23673,7 +23967,6 @@ stores.inject(MyMetaStore, storeInstance);
       dataSets;
       labelRange;
       background;
-      verticalAxisPosition;
       legendPosition;
       labelsAsText;
       stacked;
@@ -23681,18 +23974,21 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -23703,30 +23999,36 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -23735,12 +24037,20 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -23762,12 +24072,14 @@ stores.inject(MyMetaStore, storeInstance);
               .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) {
@@ -23797,7 +24109,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -23812,10 +24124,10 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -23827,7 +24139,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -23838,7 +24152,9 @@ stores.inject(MyMetaStore, storeInstance);
               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)
@@ -23869,7 +24185,6 @@ stores.inject(MyMetaStore, storeInstance);
               ...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,
           };
@@ -23970,9 +24285,8 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -23988,22 +24302,24 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -24014,40 +24330,54 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -24070,12 +24400,14 @@ stores.inject(MyMetaStore, storeInstance);
               .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) {
@@ -24095,13 +24427,6 @@ stores.inject(MyMetaStore, storeInstance);
       // 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) => {
@@ -24138,10 +24463,12 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -24153,6 +24480,8 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -24167,19 +24496,27 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -24199,11 +24536,18 @@ stores.inject(MyMetaStore, storeInstance);
           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
@@ -24217,6 +24561,7 @@ stores.inject(MyMetaStore, storeInstance);
               negativeValuesColor: this.negativeValuesColor,
               subTotalValuesColor: this.subTotalValuesColor,
               firstValueAsSubtotal: this.firstValueAsSubtotal,
+              axesDesign: this.axesDesign,
           };
       }
       getDefinitionForExcel() {
@@ -24276,6 +24621,7 @@ stores.inject(MyMetaStore, storeInstance);
               grid: {
                   display: false,
               },
+              title: getChartAxisTitleRuntime(chart.axesDesign?.x),
           },
           y: {
               position: chart.verticalAxisPosition,
@@ -24296,6 +24642,7 @@ stores.inject(MyMetaStore, storeInstance);
                       return context.tick.value === 0 ? 2 : 1;
                   },
               },
+              title: getChartAxisTitleRuntime(chart.axesDesign?.y),
           },
       };
       config.options.plugins.tooltip = {
@@ -26355,13 +26702,14 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -26397,7 +26745,7 @@ stores.inject(MyMetaStore, storeInstance);
       const labelRange = labelRangeXc ? getters.getRangeFromSheetXC(sheetId, labelRangeXc) : undefined;
       if (canChartParseLabels(labelRange, getters)) {
           return {
-              title,
+              title: { text: title },
               dataSets,
               labelsAsText: false,
               stacked: false,
@@ -26406,7 +26754,6 @@ stores.inject(MyMetaStore, storeInstance);
               labelRange: labelRangeXc,
               type: "line",
               dataSetsHaveTitle,
-              verticalAxisPosition: "left",
               legendPosition: newLegendPos,
           };
       }
@@ -26414,24 +26761,23 @@ stores.inject(MyMetaStore, storeInstance);
       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,
       };
   }
@@ -29472,6 +29818,41 @@ stores.inject(MyMetaStore, storeInstance);
   }
   const otRegistry = new OTRegistry();
 
+  css /* scss */ `
+  .o-checkbox {
+    display: flex;
+    justify-items: center;
+    input {
+      margin-right: 5px;
+    }
+  }
+`;
+  class Checkbox extends owl.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 owl.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"];
@@ -29496,6 +29877,7 @@ stores.inject(MyMetaStore, storeInstance);
   class SelectionInputStore extends SpreadsheetStore {
       initialRanges;
       inputHasSingleRange;
+      colors;
       mutators = [
           "resetWithRanges",
           "focusById",
@@ -29511,10 +29893,11 @@ stores.inject(MyMetaStore, storeInstance);
       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.");
           }
@@ -29656,11 +30039,12 @@ stores.inject(MyMetaStore, storeInstance);
        * 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),
@@ -29737,10 +30121,14 @@ stores.inject(MyMetaStore, storeInstance);
        */
       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(),
           })));
       }
       /**
@@ -29884,6 +30272,7 @@ stores.inject(MyMetaStore, storeInstance);
           class: { type: String, optional: true },
           onSelectionChanged: { type: Function, optional: true },
           onSelectionConfirmed: { type: Function, optional: true },
+          colors: { type: Array, optional: true, default: [] },
       };
       state = owl.useState({
           isMissing: false,
@@ -29908,7 +30297,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       setup() {
           owl.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);
           owl.onWillUpdateProps((nextProps) => {
               if (nextProps.ranges.join() !== this.store.selectionInputValues.join()) {
                   this.triggerChange();
@@ -29983,6 +30372,26 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class ChartDataSeries extends owl.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 {
@@ -30009,55 +30418,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-checkbox {
-    display: flex;
-    justify-items: center;
-    input {
-      margin-right: 5px;
-    }
-  }
-`;
-  class Checkbox extends owl.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 owl.Component {
-      static template = "o_spreadsheet.Section";
-      static props = {
-          class: { type: String, optional: true },
-          slots: Object,
-      };
-  }
-
-  class ChartDataSeries extends owl.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 owl.Component {
       static template = "o-spreadsheet.ChartErrorSection";
       static components = { Section, ValidationMessages };
@@ -30086,8 +30446,6 @@ stores.inject(MyMetaStore, storeInstance);
   class GenericChartConfigPanel extends owl.Component {
       static template = "o-spreadsheet-GenericChartConfigPanel";
       static components = {
-          SelectionInput,
-          ValidationMessages,
           ChartDataSeries,
           ChartLabelRange,
           Section,
@@ -30146,7 +30504,10 @@ stores.inject(MyMetaStore, storeInstance);
        * 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,
           });
@@ -30189,7 +30550,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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;
@@ -30218,15 +30579,102 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 owl.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();
       }
@@ -30238,6 +30686,7 @@ stores.inject(MyMetaStore, storeInstance);
       // 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
@@ -30799,63 +31248,325 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 owl.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() {
+          owl.useExternalListener(window, "click", this.onExternalClick);
+      }
+      state = owl.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 owl.Component {
-      static template = "o-spreadsheet-GenericChartDesignPanel";
-      static components = { RoundColorPicker, ChartTitle, Section };
+  class AxisDesignEditor extends owl.Component {
+      static template = "o-spreadsheet-AxisDesignEditor";
+      static components = {
+          Section,
+          ChartTitle,
+      };
+      state = owl.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 owl.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 = owl.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 owl.Component {
+      static template = "o-spreadsheet-ChartWithAxisDesignPanel";
+      static components = {
+          GeneralDesignEditor,
+          SidePanelCollapsible,
+          Section,
+          AxisDesignEditor,
+          RoundColorPicker,
+      };
+      state = owl.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 owl.Component {
@@ -30890,7 +31601,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       getDataRange() {
-          return this.dataRange || "";
+          return { dataRange: this.dataRange || "" };
       }
   }
 
@@ -30932,24 +31643,24 @@ stores.inject(MyMetaStore, storeInstance);
   class GaugeChartDesignPanel extends owl.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 = owl.useState({
-          openedMenu: undefined,
-          sectionRuleDispatchResult: undefined,
-          sectionRule: deepCopy(this.props.definition.sectionRule),
-      });
-      get title() {
-          return _t(this.props.definition.title);
+      state;
+      setup() {
+          this.state = owl.useState({
+              sectionRuleDispatchResult: undefined,
+              sectionRule: deepCopy(this.props.definition.sectionRule),
+          });
       }
       get designErrorMessages() {
           const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
@@ -30960,8 +31671,8 @@ stores.inject(MyMetaStore, storeInstance);
               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 */) ||
@@ -31056,8 +31767,23 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class LineChartDesignPanel extends GenericChartDesignPanel {
-      static template = "o-spreadsheet-LineChartDesignPanel";
+  class PieChartDesignPanel extends owl.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 {
@@ -31151,16 +31877,19 @@ stores.inject(MyMetaStore, storeInstance);
 
   class ScorecardChartDesignPanel extends owl.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")
@@ -31169,8 +31898,8 @@ stores.inject(MyMetaStore, storeInstance);
       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 });
@@ -31199,14 +31928,22 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class WaterfallChartDesignPanel extends GenericChartDesignPanel {
+  class WaterfallChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-WaterfallChartDesignPanel";
-      static components = { ...GenericChartDesignPanel.components, Checkbox, RoundColorPicker };
-      state = owl.useState({ pickerOpened: false });
-      setup() {
-          super.setup();
-          owl.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 });
       }
@@ -31219,11 +31956,11 @@ stores.inject(MyMetaStore, storeInstance);
       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 ||
@@ -31237,29 +31974,39 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -31545,6 +32292,7 @@ stores.inject(MyMetaStore, storeInstance);
               state.itemsStyle = {};
               document.body.style.cursor = previousCursor;
               args.onCancel?.();
+              cleanUp();
           };
           const onDragEnd = (itemId, indexAtEnd) => {
               state.draggedItemId = undefined;
@@ -31565,7 +32313,8 @@ stores.inject(MyMetaStore, storeInstance);
               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));
@@ -31642,7 +32391,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
       }
       onMouseMove(ev) {
-          if (ev.button !== -1) {
+          if (ev.button > 1) {
               this.onCancel();
               return;
           }
@@ -34385,7 +35134,7 @@ stores.inject(MyMetaStore, storeInstance);
    * 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, [], []);
@@ -34436,7 +35185,7 @@ stores.inject(MyMetaStore, storeInstance);
   /**
    * Create the columns tree from data entries.
    */
-  function dateEntriesToColumnsTree(dataEntries, columns, index) {
+  function dataEntriesToColumnsTree(dataEntries, columns, index) {
       if (index >= columns.length) {
           return [];
       }
@@ -34448,7 +35197,7 @@ stores.inject(MyMetaStore, storeInstance);
           return {
               value,
               field: colName,
-              children: dateEntriesToColumnsTree(groups[value] || [], columns, index + 1),
+              children: dataEntriesToColumnsTree(groups[value] || [], columns, index + 1),
               width: 0,
           };
       });
@@ -34955,7 +35704,12 @@ stores.inject(MyMetaStore, storeInstance);
                   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);
@@ -36711,14 +37465,15 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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;
@@ -36739,7 +37494,22 @@ stores.inject(MyMetaStore, storeInstance);
                       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;
@@ -38019,9 +38789,6 @@ stores.inject(MyMetaStore, storeInstance);
 
   class FilterIconsOverlay extends owl.Component {
       static template = "o-spreadsheet-FilterIconsOverlay";
-      static props = {
-          onMouseDown: Function,
-      };
       static components = {
           GridCellIcon,
           FilterIcon,
@@ -38261,6 +39028,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       gridOverlay = owl.useRef("gridOverlay");
       gridOverlayRect = useAbsoluteBoundingRect(this.gridOverlay);
+      cellPopovers;
       setup() {
           useCellHovered(this.env, this.gridOverlay, this.props.onCellHovered);
           const resizeObserver = new ResizeObserver(() => {
@@ -38282,6 +39050,7 @@ stores.inject(MyMetaStore, storeInstance);
               const { scrollY } = this.env.model.getters.getActiveSheetDOMScrollInfo();
               return scrollY > 0;
           });
+          this.cellPopovers = useStore(CellPopoverStore);
       }
       get gridOverlayEl() {
           if (!this.gridOverlay.el) {
@@ -38295,16 +39064,18 @@ stores.inject(MyMetaStore, storeInstance);
       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) {
@@ -40448,9 +41219,6 @@ stores.inject(MyMetaStore, storeInstance);
       // 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();
           }
@@ -42323,11 +43091,20 @@ stores.inject(MyMetaStore, storeInstance);
       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();
@@ -42336,10 +43113,9 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -43454,25 +44230,20 @@ stores.inject(MyMetaStore, storeInstance);
                   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()],
@@ -43490,21 +44261,16 @@ stores.inject(MyMetaStore, storeInstance);
               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()],
@@ -43512,21 +44278,49 @@ stores.inject(MyMetaStore, storeInstance);
               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 }),
               };
           });
@@ -44258,7 +45052,7 @@ stores.inject(MyMetaStore, storeInstance);
       return relsFile;
   }
 
-  const EXCEL_IMPORT_VERSION = 12;
+  const EXCEL_IMPORT_VERSION = 16;
   class XlsxReader {
       warningManager;
       xmls;
@@ -44736,6 +45530,30 @@ stores.inject(MyMetaStore, storeInstance);
               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.
@@ -48347,6 +49165,9 @@ stores.inject(MyMetaStore, storeInstance);
           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;
           }
@@ -51765,7 +52586,6 @@ stores.inject(MyMetaStore, storeInstance);
    *
    */
   class SpreadingRelation {
-      createEmptyPositionSet;
       /**
        * Internal structure:
        * For something like
@@ -51796,9 +52616,6 @@ stores.inject(MyMetaStore, storeInstance);
        */
       resultsToArrayFormulas = new PositionMap();
       arrayFormulasToResults = new PositionMap();
-      constructor(createEmptyPositionSet) {
-          this.createEmptyPositionSet = createEmptyPositionSet;
-      }
       getFormulaPositionsSpreadingOn(resultPosition) {
           return this.resultsToArrayFormulas.get(resultPosition) || EMPTY_ARRAY;
       }
@@ -51817,13 +52634,13 @@ stores.inject(MyMetaStore, storeInstance);
        */
       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);
@@ -51844,7 +52661,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -51938,7 +52755,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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)
@@ -52070,6 +52887,7 @@ stores.inject(MyMetaStore, storeInstance);
           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
@@ -52092,6 +52910,18 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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) => {
@@ -52329,10 +53159,6 @@ stores.inject(MyMetaStore, storeInstance);
                       this.evaluator.updateDependencies(cmd);
                   }
                   break;
-              case "DUPLICATE_SHEET":
-              case "CREATE_SHEET":
-                  this.shouldRebuildDependenciesGraph = true;
-                  break;
               case "EVALUATE_CELLS":
                   this.evaluator.evaluateAllCells();
                   break;
@@ -52433,16 +53259,22 @@ stores.inject(MyMetaStore, storeInstance);
               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)
@@ -57065,7 +57897,7 @@ stores.inject(MyMetaStore, storeInstance);
       paintFormatStatus = "inactive";
       originSheetId;
       copiedData;
-      _isCutOperation;
+      _isCutOperation = false;
       // ---------------------------------------------------------------------------
       // Command Handling
       // ---------------------------------------------------------------------------
@@ -57077,14 +57909,17 @@ stores.inject(MyMetaStore, storeInstance);
               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();
@@ -57102,13 +57937,13 @@ stores.inject(MyMetaStore, storeInstance);
               }
               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") {
@@ -57126,23 +57961,27 @@ stores.inject(MyMetaStore, storeInstance);
                   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";
@@ -57163,9 +58002,9 @@ stores.inject(MyMetaStore, storeInstance);
                           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,
                       });
                   }
@@ -57180,9 +58019,9 @@ stores.inject(MyMetaStore, storeInstance);
                           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,
                       });
                   }
@@ -57198,14 +58037,14 @@ stores.inject(MyMetaStore, storeInstance);
                       }
                       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": {
@@ -57237,7 +58076,8 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
               }
               case "REPEAT_PASTE": {
-                  this.paste(cmd.target, {
+                  this.paste(cmd.target, this.copiedData, {
+                      isCutOperation: false,
                       pasteOption: cmd.pasteOption,
                       selectTarget: true,
                   });
@@ -57245,7 +58085,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               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";
@@ -57276,7 +58116,6 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       convertOSClipboardData(clipboardData) {
-          this._isCutOperation = false;
           const handlers = clipboardHandlersRegistries.figureHandlers
               .getAll()
               .map((handler) => new handler(this.getters, this.dispatch));
@@ -57314,7 +58153,6 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -57337,9 +58175,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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);
@@ -57347,8 +58184,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return copiedData;
       }
-      paste(zones, options) {
-          if (!this.copiedData) {
+      paste(zones, copiedData, options) {
+          if (!copiedData) {
               return;
           }
           let zone = undefined;
@@ -57356,12 +58193,9 @@ stores.inject(MyMetaStore, storeInstance);
           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;
               }
@@ -57377,7 +58211,7 @@ stores.inject(MyMetaStore, storeInstance);
           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;
           }
@@ -59763,6 +60597,7 @@ stores.inject(MyMetaStore, storeInstance);
       sheetDivRef = owl.useRef("sheetDiv");
       sheetNameRef = owl.useRef("sheetNameSpan");
       editionState = "initializing";
+      DOMFocusableElementStore;
       setup() {
           owl.onMounted(() => {
               if (this.isSheetActive) {
@@ -59775,6 +60610,7 @@ stores.inject(MyMetaStore, storeInstance);
                   this.focusInputAndSelectContent();
               }
           });
+          this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
       }
       focusInputAndSelectContent() {
           if (!this.state.isEditing || !this.sheetNameRef.el)
@@ -59816,9 +60652,11 @@ stores.inject(MyMetaStore, storeInstance);
           if (ev.key === "Enter") {
               ev.preventDefault();
               this.stopEdition();
+              this.DOMFocusableElementStore.focus();
           }
           if (ev.key === "Escape") {
               this.cancelEdition();
+              this.DOMFocusableElementStore.focus();
           }
       }
       onClickSheetName(ev) {
@@ -61867,6 +62705,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -61913,7 +62754,11 @@ stores.inject(MyMetaStore, storeInstance);
               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 });
           owl.useEffect(() => {
               /**
                * Only refocus the grid if the active element is not a child of the spreadsheet
@@ -61936,6 +62781,9 @@ stores.inject(MyMetaStore, storeInstance);
               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));
           owl.onMounted(() => {
@@ -61953,7 +62801,7 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -63508,10 +64356,13 @@ stores.inject(MyMetaStore, storeInstance);
       });
       // <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>
     `;
@@ -63599,7 +64450,7 @@ stores.inject(MyMetaStore, storeInstance);
     </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>
@@ -63607,13 +64458,13 @@ stores.inject(MyMetaStore, storeInstance);
         <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>
@@ -63642,6 +64493,24 @@ stores.inject(MyMetaStore, storeInstance);
     </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
@@ -63649,46 +64518,72 @@ stores.inject(MyMetaStore, storeInstance);
       //
       // 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)
@@ -63697,28 +64592,38 @@ stores.inject(MyMetaStore, storeInstance);
       //
       // 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}"/>
@@ -63726,18 +64631,24 @@ stores.inject(MyMetaStore, storeInstance);
         <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>
@@ -63747,34 +64658,63 @@ stores.inject(MyMetaStore, storeInstance);
       <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}"/>
@@ -63782,37 +64722,63 @@ stores.inject(MyMetaStore, storeInstance);
         <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}"/>
@@ -63827,8 +64793,9 @@ stores.inject(MyMetaStore, storeInstance);
         <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)}
@@ -63838,24 +64805,46 @@ stores.inject(MyMetaStore, storeInstance);
           ${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 = [];
@@ -63879,7 +64868,7 @@ stores.inject(MyMetaStore, storeInstance);
       <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>` : ""}
@@ -63911,14 +64900,16 @@ stores.inject(MyMetaStore, storeInstance);
     </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>
@@ -63928,9 +64919,9 @@ stores.inject(MyMetaStore, storeInstance);
       <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 -->
   `;
@@ -64811,7 +65802,11 @@ stores.inject(MyMetaStore, storeInstance);
                   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);
@@ -65817,13 +66812,14 @@ stores.inject(MyMetaStore, storeInstance);
       UuidGenerator,
       formatValue,
       createCurrencyFormat,
+      ColorGenerator,
       computeTextWidth,
       createEmptyWorkbookData,
       createEmptySheet,
       createEmptyExcelSheet,
       getDefaultChartJsRuntime,
       chartFontColor,
-      ChartColors,
+      getChartAxisTitleRuntime,
       getFillingMode,
       rgbaToHex,
       colorToRGBA,
@@ -65880,9 +66876,10 @@ stores.inject(MyMetaStore, storeInstance);
       GridOverlay,
       ScorecardChart,
       LineConfigPanel,
-      GenericChartDesignPanel,
       BarConfigPanel,
+      PieChartDesignPanel,
       GenericChartConfigPanel,
+      ChartWithAxisDesignPanel,
       GaugeChartConfigPanel,
       GaugeChartDesignPanel,
       ScorecardChartConfigPanel,
@@ -65981,9 +66978,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);