@rowsncolumns/charts 28.1.16 → 28.1.17

package/dist/cjs/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAuTrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAiGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAsvHjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAwTrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAiGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAmvHjB,CAAC"}

package/dist/cjs/basic-chart/basic-chart.js

@@ -33,6 +33,7 @@ var histogram_1 = require("../utils/histogram");
 var legend_layout_1 = require("../utils/legend-layout");
 var of_pie_1 = require("../utils/of-pie");
 var overrides_1 = require("../utils/overrides");
+var overrides_2 = require("../utils/overrides");
 var pie_explosion_1 = require("../utils/pie-explosion");
 var radar_1 = require("../utils/radar");
 var region_map_1 = require("../utils/region-map");
@@ -254,7 +255,7 @@ var defaultLegendConfig = {
 /** Category-axis title gap: clears one row of tick labels (#986). */
 var CATEGORY_AXIS_NAME_GAP = (0, legend_layout_1.categoryAxisNameGap)();
 var BasicChart = function (_a) {
-    var _b;
+    var _b, _c, _d;
     var width = _a.width, height = _a.height, chart = _a.chart, theme = _a.theme, isDarkMode = _a.isDarkMode, sheetId = _a.sheetId, readonly = _a.readonly, getDomainValuesFromRange = _a.getDomainValuesFromRange, getSeriesValuesFromRange = _a.getSeriesValuesFromRange, getFormattingFromRange = _a.getFormattingFromRange, onDeleteChart = _a.onDeleteChart, onUpdateChart = _a.onUpdateChart, onRequestEdit = _a.onRequestEdit, onRequestCalculate = _a.onRequestCalculate, isSelected = _a.isSelected, fieldButtons = _a.fieldButtons, locale = _a.locale;
     var spec = chart.spec;
     var explicitChartTitle = (_b = chart.spec.title) !== null && _b !== void 0 ? _b : undefined;
@@ -310,7 +311,7 @@ var BasicChart = function (_a) {
     // the chart upgrades from the immediate 2-D fallback to true 3-D.
     var renderedIn3D = (0, react_1.useRef)(false);
     var glUpgradeRequested = (0, react_1.useRef)(false);
-    var _c = tslib_1.__read((0, react_1.useState)(0), 2), glUpgradeTick = _c[0], setGlUpgradeTick = _c[1];
+    var _e = tslib_1.__read((0, react_1.useState)(0), 2), glUpgradeTick = _e[0], setGlUpgradeTick = _e[1];
     // Region-map (choropleth) pipeline state. The map option (geo +
     // visualMap) doesn't merge back into a cartesian one, so the instance
     // is re-initialized when entering/leaving the region-map rendering.
@@ -1766,7 +1767,7 @@ var BasicChart = function (_a) {
                         return (0, utils_1.chartPaletteColorAt)(seriesPalette, index);
                     };
                     _loop_1 = function (specSeriesIndex, series) {
-                        var dataLabel, _189, _190, _191, effectiveChartType, lineLike, domainSources, pieDomainLabels, piePointOffset, data, seriesEchartsType, seriesStyleAttrs, seriesEntry, isBarOrColumn, seriesAny, markerSymbol, wantsMarkers, labelsWithoutMarkers, isolated, marked, isolated_1, isolated_1_1, i, gradientArgs, gradient, overrides_2, _192, _193, dp, fallback_1, overrides_3, _194, _195, dp, positiveColor_1, negativeColor_1;
+                        var dataLabel, _189, _190, _191, effectiveChartType, lineLike, domainSources, pieDomainLabels, piePointOffset, data, seriesEchartsType, seriesStyleAttrs, seriesEntry, isBarOrColumn, seriesAny, markerSymbol, wantsMarkers, labelsWithoutMarkers, isolated, marked, isolated_1, isolated_1_1, i, gradientArgs, gradient, overrides_3, _192, _193, dp, fallback_1, overrides_4, _194, _195, dp, positiveColor_1, negativeColor_1;
                         var e_12, _196, e_13, _197, e_14, _198;
                         return tslib_1.__generator(this, function (_199) {
                             switch (_199.label) {
@@ -1912,12 +1913,12 @@ var BasicChart = function (_a) {
                                     else if (isBarOrColumn &&
                                         Array.isArray(seriesAny.dataPointColors) &&
                                         seriesAny.dataPointColors.length) {
-                                        overrides_2 = new Map();
+                                        overrides_3 = new Map();
                                         try {
                                             for (_192 = (e_13 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _193 = _192.next(); !_193.done; _193 = _192.next()) {
                                                 dp = _193.value;
                                                 if (typeof dp.idx === "number" && typeof dp.color === "string") {
-                                                    overrides_2.set(dp.idx, dp.color);
+                                                    overrides_3.set(dp.idx, dp.color);
                                                 }
                                             }
                                         }
@@ -1929,17 +1930,17 @@ var BasicChart = function (_a) {
                                             finally { if (e_13) throw e_13.error; }
                                         }
                                         fallback_1 = (_119 = series.color) !== null && _119 !== void 0 ? _119 : paletteColorAt(specSeriesIndex);
-                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_120 = seriesEntry.itemStyle) !== null && _120 !== void 0 ? _120 : {})), { color: function (params) { var _a; return (_a = overrides_2.get(params.dataIndex)) !== null && _a !== void 0 ? _a : fallback_1; } });
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_120 = seriesEntry.itemStyle) !== null && _120 !== void 0 ? _120 : {})), { color: function (params) { var _a; return (_a = overrides_3.get(params.dataIndex)) !== null && _a !== void 0 ? _a : fallback_1; } });
                                     }
                                     else if (isCircularChart &&
                                         Array.isArray(seriesAny.dataPointColors) &&
                                         seriesAny.dataPointColors.length) {
-                                        overrides_3 = new Map();
+                                        overrides_4 = new Map();
                                         try {
                                             for (_194 = (e_14 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _195 = _194.next(); !_195.done; _195 = _194.next()) {
                                                 dp = _195.value;
                                                 if (typeof dp.idx === "number" && typeof dp.color === "string") {
-                                                    overrides_3.set(dp.idx, dp.color);
+                                                    overrides_4.set(dp.idx, dp.color);
                                                 }
                                             }
                                         }
@@ -1952,7 +1953,7 @@ var BasicChart = function (_a) {
                                         }
                                         seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_121 = seriesEntry.itemStyle) !== null && _121 !== void 0 ? _121 : {})), { color: function (params) {
                                                 var _a, _b;
-                                                return (_b = (_a = overrides_3.get(params.dataIndex)) !== null && _a !== void 0 ? _a : series.color) !== null && _b !== void 0 ? _b : paletteColorAt(params.dataIndex);
+                                                return (_b = (_a = overrides_4.get(params.dataIndex)) !== null && _a !== void 0 ? _a : series.color) !== null && _b !== void 0 ? _b : paletteColorAt(params.dataIndex);
                                             } });
                                     }
                                     else if (isBarOrColumn && series.invertIfNegative) {
@@ -3002,7 +3003,7 @@ var BasicChart = function (_a) {
     // between the cartesian 2-D option and the grid3D / map one and must
     // re-apply these.
     var applyThemeOptions = function () {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         if (chartRef.current) {
             var textColor = (0, spreadsheet_1.getStringifiedColor)({
                 theme: 1,
@@ -3020,21 +3021,23 @@ var BasicChart = function (_a) {
             var options = {
                 title: {
                     text: title !== null && title !== void 0 ? title : undefined,
-                    textStyle: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ color: (_c = authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.color) !== null && _c !== void 0 ? _c : textColor }, ((authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.fontFamily)
-                        ? { fontFamily: authoredTitleFmt.fontFamily }
-                        : {})), (typeof (authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.fontSize) === "number"
-                        ? { fontSize: authoredTitleFmt.fontSize }
-                        : {})), ((authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.bold) ? { fontWeight: "bold" } : {})), ((authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.italic) ? { fontStyle: "italic" } : {})),
+                    // Every key is written (echarts merges setOption calls, so a key
+                    // left out keeps its previous value — turning bold off used to
+                    // leave the title bold, rowsncolumns/spreadsheet#1105).
+                    textStyle: (0, overrides_2.themedTextStyle)(authoredTitleFmt, {
+                        color: textColor,
+                        fontSize: 18,
+                        fontWeight: "bold",
+                    }),
                 },
                 legend: {
-                    textStyle: tslib_1.__assign(tslib_1.__assign({ color: (_d = authoredLegendFmt === null || authoredLegendFmt === void 0 ? void 0 : authoredLegendFmt.color) !== null && _d !== void 0 ? _d : textColor }, ((authoredLegendFmt === null || authoredLegendFmt === void 0 ? void 0 : authoredLegendFmt.fontFamily)
-                        ? { fontFamily: authoredLegendFmt.fontFamily }
-                        : {})), (typeof (authoredLegendFmt === null || authoredLegendFmt === void 0 ? void 0 : authoredLegendFmt.fontSize) === "number"
-                        ? { fontSize: authoredLegendFmt.fontSize }
-                        : {})),
+                    textStyle: (0, overrides_2.themedTextStyle)(authoredLegendFmt, {
+                        color: textColor,
+                        fontSize: 12,
+                    }),
                 },
                 axisLabel: {
-                    color: (_e = authoredDataLabelFmt === null || authoredDataLabelFmt === void 0 ? void 0 : authoredDataLabelFmt.color) !== null && _e !== void 0 ? _e : textColor,
+                    color: (_c = authoredDataLabelFmt === null || authoredDataLabelFmt === void 0 ? void 0 : authoredDataLabelFmt.color) !== null && _c !== void 0 ? _c : textColor,
                 },
                 tooltip: {
                     backgroundColor: bgColor,
@@ -3055,7 +3058,7 @@ var BasicChart = function (_a) {
                 ])),
                 // Excel's Format Chart Area fill; `transparent` (echarts' own
                 // default) so clearing the fill undoes an earlier setOption.
-                backgroundColor: (_f = chart.spec.backgroundColor) !== null && _f !== void 0 ? _f : "transparent",
+                backgroundColor: (_d = chart.spec.backgroundColor) !== null && _d !== void 0 ? _d : "transparent",
             };
             // Skip when rendering 3-D or a region map: merging a cartesian
             // yAxis into a grid3D / map option would create a stray empty
@@ -3074,7 +3077,9 @@ var BasicChart = function (_a) {
             chartRef.current.setOption(options);
         }
     };
-    // Update chart properties
+    // Update chart properties — the authored text formats are inputs too, so
+    // a font change applies at once instead of waiting for the next title
+    // edit (rowsncolumns/spreadsheet#1105).
     (0, ui_1.useIsomorphicLayoutEffect)(function () {
         applyThemeOptions();
     }, [
@@ -3084,6 +3089,9 @@ var BasicChart = function (_a) {
         chart.spec.chartType,
         chart.spec.palette,
         chart.spec.backgroundColor,
+        chart.spec.titleTextFormat,
+        (_c = chart.spec.legend) === null || _c === void 0 ? void 0 : _c.textFormat,
+        (_d = chart.spec.dataLabels) === null || _d === void 0 ? void 0 : _d.textFormat,
     ]);
     // Draw chart. `glUpgradeTick` re-runs the draw when the lazily loaded
     // echarts-gl module resolves, upgrading a 3-D spec's immediate 2-D

package/dist/cjs/components/editors/fields/text-format-fields.d.ts

@@ -1,9 +1,11 @@
 import type { ChartTextFormat } from "@rowsncolumns/spreadsheet";
 import React from "react";
 /**
- * Font family / size / colour / bold / italic / underline / strikethrough
- * of one text element — the chart title, the legend, an axis or the data
- * labels (`ChartTextFormat`, OOXML `<c:txPr>`).
+ * Font family / size / colour / bold / italic of one text element — the
+ * chart title, the legend, an axis or the data labels (`ChartTextFormat`,
+ * OOXML `<c:txPr>`). `underline` / `strikethrough` stay on the spec for the
+ * xlsx round trip but have no control: neither renderer draws them
+ * (rowsncolumns/spreadsheet#1105).
  */
 export declare const TextFormatFields: ({ label, value, onChange, collapsible, ariaLabels, }: {
     label: string;

package/dist/cjs/components/editors/fields/text-format-fields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-format-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/text-format-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,sDAM9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAClD,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjE,sBA6EA,CAAC"}
+{"version":3,"file":"text-format-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/text-format-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,sDAM9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAClD,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjE,sBAmEA,CAAC"}

package/dist/cjs/components/editors/fields/text-format-fields.js

@@ -6,9 +6,11 @@ var ui_1 = require("@rowsncolumns/ui");
 var react_1 = tslib_1.__importStar(require("react"));
 var primitives_1 = require("./primitives");
 /**
- * Font family / size / colour / bold / italic / underline / strikethrough
- * of one text element — the chart title, the legend, an axis or the data
- * labels (`ChartTextFormat`, OOXML `<c:txPr>`).
+ * Font family / size / colour / bold / italic of one text element — the
+ * chart title, the legend, an axis or the data labels (`ChartTextFormat`,
+ * OOXML `<c:txPr>`). `underline` / `strikethrough` stay on the spec for the
+ * xlsx round trip but have no control: neither renderer draws them
+ * (rowsncolumns/spreadsheet#1105).
  */
 var TextFormatFields = function (_a) {
     var _b, _c, _d, _e, _f, _g;
@@ -39,8 +41,6 @@ var TextFormatFields = function (_a) {
                 }, className: "text-xs w-16", placeholder: "Size", "aria-label": (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.size) !== null && _e !== void 0 ? _e : "".concat(label, " size") }),
             react_1.default.createElement("input", { type: "color", value: (_f = value === null || value === void 0 ? void 0 : value.color) !== null && _f !== void 0 ? _f : "#000000", onChange: function (e) { return set({ color: e.target.value }); }, className: primitives_1.COLOR_CLASS, "aria-label": (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.color) !== null && _g !== void 0 ? _g : "".concat(label, " color") }),
             react_1.default.createElement(primitives_1.CheckboxField, { label: "Bold", checked: Boolean(value === null || value === void 0 ? void 0 : value.bold), onChange: function (bold) { return set({ bold: bold }); } }),
-            react_1.default.createElement(primitives_1.CheckboxField, { label: "Italic", checked: Boolean(value === null || value === void 0 ? void 0 : value.italic), onChange: function (italic) { return set({ italic: italic }); } }),
-            react_1.default.createElement(primitives_1.CheckboxField, { label: "Underline", checked: Boolean(value === null || value === void 0 ? void 0 : value.underline), onChange: function (underline) { return set({ underline: underline }); } }),
-            react_1.default.createElement(primitives_1.CheckboxField, { label: "Strikethrough", checked: Boolean(value === null || value === void 0 ? void 0 : value.strikethrough), onChange: function (strikethrough) { return set({ strikethrough: strikethrough }); } }))));
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Italic", checked: Boolean(value === null || value === void 0 ? void 0 : value.italic), onChange: function (italic) { return set({ italic: italic }); } }))));
 };
 exports.TextFormatFields = TextFormatFields;

package/dist/cjs/plotly/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA+ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA2rFjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAkcxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA8rFjB,CAAC"}

package/dist/cjs/plotly/basic-chart/basic-chart.js

@@ -209,7 +209,7 @@ var withTextMode = function (mode) {
     return base.split("+").includes("text") ? base : "".concat(base, "+text");
 };
 var applyDataLabelsToTracePlotly = function (trace, opts, chartType, sourceNumberFormat, locale) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (!(opts === null || opts === void 0 ? void 0 : opts.show))
         return trace;
     var next = tslib_1.__assign({}, trace);
@@ -233,10 +233,14 @@ var applyDataLabelsToTracePlotly = function (trace, opts, chartType, sourceNumbe
             parts.push("percent");
         next.textinfo = parts.length ? parts.join("+") : "value";
         next.textposition = position;
+        if (opts.textFormat) {
+            var fmt = opts.textFormat;
+            next.textfont = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, ((_b = next.textfont) !== null && _b !== void 0 ? _b : {})), (fmt.fontFamily ? { family: fmt.fontFamily } : {})), (typeof fmt.fontSize === "number" && fmt.fontSize > 0 ? { size: fmt.fontSize } : {})), (fmt.color ? { color: fmt.color } : {}));
+        }
         // Values format like their source cells (or the authored `<c:numFmt>`):
         // plotly's own `%{value}` is a raw number, so the formatted strings
         // ride on `text` and a `texttemplate` mirrors the textinfo parts.
-        var pattern_1 = (_b = opts.numberFormatPattern) !== null && _b !== void 0 ? _b : sourceNumberFormat;
+        var pattern_1 = (_c = opts.numberFormatPattern) !== null && _c !== void 0 ? _c : sourceNumberFormat;
         if (pattern_1) {
             var values = Array.isArray(next.values) ? next.values : [];
             next.text = values.map(function (v) {
@@ -255,7 +259,7 @@ var applyDataLabelsToTracePlotly = function (trace, opts, chartType, sourceNumbe
         // with the d3-format mini-language, but our patterns are
         // SpreadsheetML — easier to pre-format the strings. Without an
         // authored pattern the labels link to the source-cell format.
-        var pattern_2 = (_c = opts.numberFormatPattern) !== null && _c !== void 0 ? _c : sourceNumberFormat;
+        var pattern_2 = (_d = opts.numberFormatPattern) !== null && _d !== void 0 ? _d : sourceNumberFormat;
         // Horizontal bars carry their values on `x`.
         var values = next.orientation === "h" ? next.x : next.y;
         var vals = Array.isArray(values) ? values : [];
@@ -270,6 +274,40 @@ var applyDataLabelsToTracePlotly = function (trace, opts, chartType, sourceNumbe
         if (isPoint)
             next.mode = withTextMode(next.mode);
     }
+    return applyDataLabelFontPlotly(next, opts.textFormat);
+};
+/**
+ * Excel's Format Data Labels → Font for a plotly trace: `textfont` carries
+ * family / size / colour, bold / italic are pseudo-HTML tags around each
+ * label (plotly fonts have no weight) — rowsncolumns/spreadsheet#1105.
+ */
+var applyDataLabelFontPlotly = function (trace, fmt) {
+    var _a;
+    if (!fmt)
+        return trace;
+    var next = tslib_1.__assign({}, trace);
+    var textfont = tslib_1.__assign({}, ((_a = next.textfont) !== null && _a !== void 0 ? _a : {}));
+    if (fmt.fontFamily)
+        textfont.family = fmt.fontFamily;
+    if (typeof fmt.fontSize === "number" && fmt.fontSize > 0)
+        textfont.size = fmt.fontSize;
+    if (fmt.color)
+        textfont.color = fmt.color;
+    if (Object.keys(textfont).length)
+        next.textfont = textfont;
+    var wrap = function (text) {
+        if (text === null || text === undefined || text === "")
+            return text;
+        var out = String(text);
+        if (fmt.italic)
+            out = "<i>".concat(out, "</i>");
+        if (fmt.bold)
+            out = "<b>".concat(out, "</b>");
+        return out;
+    };
+    if ((fmt.bold || fmt.italic) && next.text !== undefined) {
+        next.text = Array.isArray(next.text) ? next.text.map(wrap) : wrap(next.text);
+    }
     return next;
 };
 var BUBBLE_CHART_TYPES = new Set([
@@ -662,7 +700,8 @@ var BasicChart = function (_a) {
                             : undefined;
                         var withLabels = function (trace) {
                             return labelText
-                                ? tslib_1.__assign(tslib_1.__assign({}, trace), { mode: withTextMode(trace.mode), text: labelText, textposition: labelPosition }) : trace;
+                                ? applyDataLabelFontPlotly(tslib_1.__assign(tslib_1.__assign({}, trace), { mode: withTextMode(trace.mode), text: labelText, textposition: labelPosition }), labelOpts === null || labelOpts === void 0 ? void 0 : labelOpts.textFormat)
+                                : trace;
                         };
                         if (isScatter_1) {
                             // Per-series marker.symbol = "none" → pure line (no markers).

package/dist/cjs/utils/overrides.d.ts

@@ -1,4 +1,24 @@
 import type { LegendComponentOption } from "echarts";
+/**
+ * A complete echarts `textStyle` for a text element: the authored
+ * `ChartTextFormat` over the theme defaults, with every key present so a
+ * cleared setting (bold off, size blank) resets the element instead of
+ * keeping the previous merged value (rowsncolumns/spreadsheet#1105).
+ * Underline / strikethrough have no canvas text decoration in echarts and
+ * are not drawn.
+ */
+export declare const themedTextStyle: (fmt: any, defaults: {
+    color: string;
+    fontSize: number;
+    fontFamily?: string;
+    fontWeight?: "normal" | "bold";
+}) => {
+    color: any;
+    fontFamily: any;
+    fontSize: any;
+    fontWeight: "bold" | "normal";
+    fontStyle: "italic" | "normal";
+};
 /** Build an echarts `textStyle` from a parsed `ChartTextFormat`. */
 export declare const textFormatToEchartsTextStyle: (fmt: any) => Record<string, any> | undefined;
 export declare const applyLegendOverrides: (legend: LegendComponentOption, opts: any) => LegendComponentOption;

package/dist/cjs/utils/overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,EAC5B,SAAS,MAAM,QA4BhB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,SAAS,MAAM,EAEf,eAAa,MACT,QAAQ,GAAG,WAoDhB,CAAC;AAgCF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACnD,CAAC,GAAG,IAAI,GAAG,SAA6C,CAAC;AAE5D,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCAlGH,GAAG;aA+GhB,CAAC"}
+{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,KAAK,GAAG,EACR,UAAU;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAChC;;;;gBASG,MAAM,GACN,QAAQ;eACsC,QAAQ,GAAG,QAAQ;CACrE,CAAC;AAEH,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,EAC5B,SAAS,MAAM,QA4BhB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,SAAS,MAAM,EAEf,eAAa,MACT,QAAQ,GAAG,WAoDhB,CAAC;AAgCF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACnD,CAAC,GAAG,IAAI,GAAG,SAA6C,CAAC;AAE5D,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCAlGH,GAAG;aAoHhB,CAAC"}

package/dist/cjs/utils/overrides.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildSeriesLabelOption = exports.resolveSeriesDataLabels = exports.dataLabelFormatter = exports.applyAxisOverrides = exports.applyLegendOverrides = exports.textFormatToEchartsTextStyle = void 0;
+exports.buildSeriesLabelOption = exports.resolveSeriesDataLabels = exports.dataLabelFormatter = exports.applyAxisOverrides = exports.applyLegendOverrides = exports.textFormatToEchartsTextStyle = exports.themedTextStyle = void 0;
 var tslib_1 = require("tslib");
 var axis_number_format_1 = require("./axis-number-format");
 // Map ChartSpec.legend / dataLabels / axisOptions to ECharts option
@@ -9,6 +9,27 @@ var axis_number_format_1 = require("./axis-number-format");
 // option assembly and the bubble / hierarchy / radar / stock early
 // branches in `basic-chart.tsx` so every chart type honors the same
 // spec-level overrides.
+/**
+ * A complete echarts `textStyle` for a text element: the authored
+ * `ChartTextFormat` over the theme defaults, with every key present so a
+ * cleared setting (bold off, size blank) resets the element instead of
+ * keeping the previous merged value (rowsncolumns/spreadsheet#1105).
+ * Underline / strikethrough have no canvas text decoration in echarts and
+ * are not drawn.
+ */
+var themedTextStyle = function (fmt, defaults) {
+    var _a, _b, _c, _d;
+    return ({
+        color: (_a = fmt === null || fmt === void 0 ? void 0 : fmt.color) !== null && _a !== void 0 ? _a : defaults.color,
+        fontFamily: (_c = (_b = fmt === null || fmt === void 0 ? void 0 : fmt.fontFamily) !== null && _b !== void 0 ? _b : defaults.fontFamily) !== null && _c !== void 0 ? _c : "sans-serif",
+        fontSize: typeof (fmt === null || fmt === void 0 ? void 0 : fmt.fontSize) === "number" && fmt.fontSize > 0
+            ? fmt.fontSize
+            : defaults.fontSize,
+        fontWeight: (fmt ? (fmt.bold ? "bold" : "normal") : (_d = defaults.fontWeight) !== null && _d !== void 0 ? _d : "normal"),
+        fontStyle: ((fmt === null || fmt === void 0 ? void 0 : fmt.italic) ? "italic" : "normal"),
+    });
+};
+exports.themedTextStyle = themedTextStyle;
 /** Build an echarts `textStyle` from a parsed `ChartTextFormat`. */
 var textFormatToEchartsTextStyle = function (fmt) {
     if (!fmt)
@@ -209,17 +230,17 @@ var POINT_SERIES_TYPES = new Set(["line", "scatter", "effectScatter"]);
 var resolveSeriesDataLabels = function (chartLevel, series) { var _a; return (_a = series === null || series === void 0 ? void 0 : series.dataLabels) !== null && _a !== void 0 ? _a : chartLevel; };
 exports.resolveSeriesDataLabels = resolveSeriesDataLabels;
 var buildSeriesLabelOption = function (opts, seriesType, locale) {
-    var _a;
+    var _a, _b;
     if (!(opts === null || opts === void 0 ? void 0 : opts.show))
         return undefined;
     var positions = seriesType && POINT_SERIES_TYPES.has(seriesType)
         ? ECHARTS_POINT_DLBL_POS
         : ECHARTS_DLBL_POS;
     var position = (_a = (opts.position && positions[opts.position])) !== null && _a !== void 0 ? _a : "top";
-    return {
-        show: true,
-        position: position,
-        formatter: (0, exports.dataLabelFormatter)(opts, locale),
-    };
+    // Excel's Format Data Labels → Font: colour, family, size, bold, italic
+    // (rowsncolumns/spreadsheet#1105). Keys are only written when authored so
+    // a label keeps its series-aware default colour otherwise.
+    var font = (_b = (0, exports.textFormatToEchartsTextStyle)(opts.textFormat)) !== null && _b !== void 0 ? _b : {};
+    return tslib_1.__assign({ show: true, position: position, formatter: (0, exports.dataLabelFormatter)(opts, locale) }, font);
 };
 exports.buildSeriesLabelOption = buildSeriesLabelOption;

package/dist/esm/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAuTrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAiGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAsvHjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAwTrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAiGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAmvHjB,CAAC"}

package/dist/esm/basic-chart/basic-chart.js

@@ -29,6 +29,7 @@ import { aggregateByCategory, binHistogram, computePareto, isParetoSpec, } from
 import { categoryAxisNameGap, legendLabelsFrom, reserveEchartsLegendBand, } from "../utils/legend-layout";
 import { clampSecondPieSize, isOfPieChartSpec, otherSliceHalfAngle, resolveOfPieType, splitOfPie, } from "../utils/of-pie";
 import { applyAxisOverrides, applyLegendOverrides, buildSeriesLabelOption, dataLabelFormatter, resolveSeriesDataLabels, } from "../utils/overrides";
+import { themedTextStyle } from "../utils/overrides";
 import { explosionOffsetPx, pieRadiusPx, resolveExplosion, } from "../utils/pie-explosion";
 import { buildRadarIndicators, buildRadarSeriesData } from "../utils/radar";
 import { buildRegionMapData, buildSequentialColorRamp, isRegionMapSpec, resolveGeoScope, warnOnceForUnmatchedRegions, } from "../utils/region-map";
@@ -3175,28 +3176,20 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const options = {
                 title: {
                     text: title ?? undefined,
-                    textStyle: {
-                        color: authoredTitleFmt?.color ?? textColor,
-                        ...(authoredTitleFmt?.fontFamily
-                            ? { fontFamily: authoredTitleFmt.fontFamily }
-                            : {}),
-                        ...(typeof authoredTitleFmt?.fontSize === "number"
-                            ? { fontSize: authoredTitleFmt.fontSize }
-                            : {}),
-                        ...(authoredTitleFmt?.bold ? { fontWeight: "bold" } : {}),
-                        ...(authoredTitleFmt?.italic ? { fontStyle: "italic" } : {}),
-                    },
+                    // Every key is written (echarts merges setOption calls, so a key
+                    // left out keeps its previous value — turning bold off used to
+                    // leave the title bold, rowsncolumns/spreadsheet#1105).
+                    textStyle: themedTextStyle(authoredTitleFmt, {
+                        color: textColor,
+                        fontSize: 18,
+                        fontWeight: "bold",
+                    }),
                 },
                 legend: {
-                    textStyle: {
-                        color: authoredLegendFmt?.color ?? textColor,
-                        ...(authoredLegendFmt?.fontFamily
-                            ? { fontFamily: authoredLegendFmt.fontFamily }
-                            : {}),
-                        ...(typeof authoredLegendFmt?.fontSize === "number"
-                            ? { fontSize: authoredLegendFmt.fontSize }
-                            : {}),
-                    },
+                    textStyle: themedTextStyle(authoredLegendFmt, {
+                        color: textColor,
+                        fontSize: 12,
+                    }),
                 },
                 axisLabel: {
                     color: authoredDataLabelFmt?.color ?? textColor,
@@ -3239,7 +3232,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             chartRef.current.setOption(options);
         }
     };
-    // Update chart properties
+    // Update chart properties — the authored text formats are inputs too, so
+    // a font change applies at once instead of waiting for the next title
+    // edit (rowsncolumns/spreadsheet#1105).
     useIsomorphicLayoutEffect(() => {
         applyThemeOptions();
     }, [
@@ -3249,6 +3244,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         chart.spec.chartType,
         chart.spec.palette,
         chart.spec.backgroundColor,
+        chart.spec.titleTextFormat,
+        chart.spec.legend?.textFormat,
+        chart.spec.dataLabels?.textFormat,
     ]);
     // Draw chart. `glUpgradeTick` re-runs the draw when the lazily loaded
     // echarts-gl module resolves, upgrading a 3-D spec's immediate 2-D

package/dist/esm/components/editors/fields/text-format-fields.d.ts

@@ -1,9 +1,11 @@
 import type { ChartTextFormat } from "@rowsncolumns/spreadsheet";
 import React from "react";
 /**
- * Font family / size / colour / bold / italic / underline / strikethrough
- * of one text element — the chart title, the legend, an axis or the data
- * labels (`ChartTextFormat`, OOXML `<c:txPr>`).
+ * Font family / size / colour / bold / italic of one text element — the
+ * chart title, the legend, an axis or the data labels (`ChartTextFormat`,
+ * OOXML `<c:txPr>`). `underline` / `strikethrough` stay on the spec for the
+ * xlsx round trip but have no control: neither renderer draws them
+ * (rowsncolumns/spreadsheet#1105).
  */
 export declare const TextFormatFields: ({ label, value, onChange, collapsible, ariaLabels, }: {
     label: string;

package/dist/esm/components/editors/fields/text-format-fields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-format-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/text-format-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,sDAM9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAClD,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjE,sBA6EA,CAAC"}
+{"version":3,"file":"text-format-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/text-format-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,sDAM9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAClD,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjE,sBAmEA,CAAC"}

package/dist/esm/components/editors/fields/text-format-fields.js

@@ -2,9 +2,11 @@ import { Input } from "@rowsncolumns/ui";
 import React, { useState } from "react";
 import { CheckboxField, COLOR_CLASS } from "./primitives";
 /**
- * Font family / size / colour / bold / italic / underline / strikethrough
- * of one text element — the chart title, the legend, an axis or the data
- * labels (`ChartTextFormat`, OOXML `<c:txPr>`).
+ * Font family / size / colour / bold / italic of one text element — the
+ * chart title, the legend, an axis or the data labels (`ChartTextFormat`,
+ * OOXML `<c:txPr>`). `underline` / `strikethrough` stay on the spec for the
+ * xlsx round trip but have no control: neither renderer draws them
+ * (rowsncolumns/spreadsheet#1105).
  */
 export const TextFormatFields = ({ label, value, onChange, collapsible = false, ariaLabels, }) => {
     const [open, setOpen] = useState(!collapsible);
@@ -28,7 +30,5 @@ export const TextFormatFields = ({ label, value, onChange, collapsible = false,
                 }), className: "text-xs w-16", placeholder: "Size", "aria-label": ariaLabels?.size ?? `${label} size` }),
             React.createElement("input", { type: "color", value: value?.color ?? "#000000", onChange: (e) => set({ color: e.target.value }), className: COLOR_CLASS, "aria-label": ariaLabels?.color ?? `${label} color` }),
             React.createElement(CheckboxField, { label: "Bold", checked: Boolean(value?.bold), onChange: (bold) => set({ bold }) }),
-            React.createElement(CheckboxField, { label: "Italic", checked: Boolean(value?.italic), onChange: (italic) => set({ italic }) }),
-            React.createElement(CheckboxField, { label: "Underline", checked: Boolean(value?.underline), onChange: (underline) => set({ underline }) }),
-            React.createElement(CheckboxField, { label: "Strikethrough", checked: Boolean(value?.strikethrough), onChange: (strikethrough) => set({ strikethrough }) }))));
+            React.createElement(CheckboxField, { label: "Italic", checked: Boolean(value?.italic), onChange: (italic) => set({ italic }) }))));
 };

package/dist/esm/plotly/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA+ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA2rFjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAkcxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA8rFjB,CAAC"}

package/dist/esm/plotly/basic-chart/basic-chart.js

@@ -230,6 +230,15 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat
             parts.push("percent");
         next.textinfo = parts.length ? parts.join("+") : "value";
         next.textposition = position;
+        if (opts.textFormat) {
+            const fmt = opts.textFormat;
+            next.textfont = {
+                ...(next.textfont ?? {}),
+                ...(fmt.fontFamily ? { family: fmt.fontFamily } : {}),
+                ...(typeof fmt.fontSize === "number" && fmt.fontSize > 0 ? { size: fmt.fontSize } : {}),
+                ...(fmt.color ? { color: fmt.color } : {}),
+            };
+        }
         // Values format like their source cells (or the authored `<c:numFmt>`):
         // plotly's own `%{value}` is a raw number, so the formatted strings
         // ride on `text` and a `texttemplate` mirrors the textinfo parts.
@@ -263,6 +272,39 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat
         if (isPoint)
             next.mode = withTextMode(next.mode);
     }
+    return applyDataLabelFontPlotly(next, opts.textFormat);
+};
+/**
+ * Excel's Format Data Labels → Font for a plotly trace: `textfont` carries
+ * family / size / colour, bold / italic are pseudo-HTML tags around each
+ * label (plotly fonts have no weight) — rowsncolumns/spreadsheet#1105.
+ */
+const applyDataLabelFontPlotly = (trace, fmt) => {
+    if (!fmt)
+        return trace;
+    const next = { ...trace };
+    const textfont = { ...(next.textfont ?? {}) };
+    if (fmt.fontFamily)
+        textfont.family = fmt.fontFamily;
+    if (typeof fmt.fontSize === "number" && fmt.fontSize > 0)
+        textfont.size = fmt.fontSize;
+    if (fmt.color)
+        textfont.color = fmt.color;
+    if (Object.keys(textfont).length)
+        next.textfont = textfont;
+    const wrap = (text) => {
+        if (text === null || text === undefined || text === "")
+            return text;
+        let out = String(text);
+        if (fmt.italic)
+            out = `<i>${out}</i>`;
+        if (fmt.bold)
+            out = `<b>${out}</b>`;
+        return out;
+    };
+    if ((fmt.bold || fmt.italic) && next.text !== undefined) {
+        next.text = Array.isArray(next.text) ? next.text.map(wrap) : wrap(next.text);
+    }
     return next;
 };
 const BUBBLE_CHART_TYPES = new Set([
@@ -617,12 +659,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         "top center"
                     : undefined;
                 const withLabels = (trace) => labelText
-                    ? {
+                    ? applyDataLabelFontPlotly({
                         ...trace,
                         mode: withTextMode(trace.mode),
                         text: labelText,
                         textposition: labelPosition,
-                    }
+                    }, labelOpts?.textFormat)
                     : trace;
                 if (isScatter) {
                     // Per-series marker.symbol = "none" → pure line (no markers).

package/dist/esm/utils/overrides.d.ts

@@ -1,4 +1,24 @@
 import type { LegendComponentOption } from "echarts";
+/**
+ * A complete echarts `textStyle` for a text element: the authored
+ * `ChartTextFormat` over the theme defaults, with every key present so a
+ * cleared setting (bold off, size blank) resets the element instead of
+ * keeping the previous merged value (rowsncolumns/spreadsheet#1105).
+ * Underline / strikethrough have no canvas text decoration in echarts and
+ * are not drawn.
+ */
+export declare const themedTextStyle: (fmt: any, defaults: {
+    color: string;
+    fontSize: number;
+    fontFamily?: string;
+    fontWeight?: "normal" | "bold";
+}) => {
+    color: any;
+    fontFamily: any;
+    fontSize: any;
+    fontWeight: "bold" | "normal";
+    fontStyle: "italic" | "normal";
+};
 /** Build an echarts `textStyle` from a parsed `ChartTextFormat`. */
 export declare const textFormatToEchartsTextStyle: (fmt: any) => Record<string, any> | undefined;
 export declare const applyLegendOverrides: (legend: LegendComponentOption, opts: any) => LegendComponentOption;

package/dist/esm/utils/overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,EAC5B,SAAS,MAAM,QA4BhB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,SAAS,MAAM,EAEf,eAAa,MACT,QAAQ,GAAG,WAoDhB,CAAC;AAgCF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACnD,CAAC,GAAG,IAAI,GAAG,SAA6C,CAAC;AAE5D,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCAlGH,GAAG;aA+GhB,CAAC"}
+{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,KAAK,GAAG,EACR,UAAU;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAChC;;;;gBASG,MAAM,GACN,QAAQ;eACsC,QAAQ,GAAG,QAAQ;CACrE,CAAC;AAEH,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,EAC5B,SAAS,MAAM,QA4BhB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,SAAS,MAAM,EAEf,eAAa,MACT,QAAQ,GAAG,WAoDhB,CAAC;AAgCF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACnD,CAAC,GAAG,IAAI,GAAG,SAA6C,CAAC;AAE5D,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCAlGH,GAAG;aAoHhB,CAAC"}

package/dist/esm/utils/overrides.js

@@ -5,6 +5,23 @@ import { formatAxisValue, valueAxisLabelFormatter } from "./axis-number-format";
 // option assembly and the bubble / hierarchy / radar / stock early
 // branches in `basic-chart.tsx` so every chart type honors the same
 // spec-level overrides.
+/**
+ * A complete echarts `textStyle` for a text element: the authored
+ * `ChartTextFormat` over the theme defaults, with every key present so a
+ * cleared setting (bold off, size blank) resets the element instead of
+ * keeping the previous merged value (rowsncolumns/spreadsheet#1105).
+ * Underline / strikethrough have no canvas text decoration in echarts and
+ * are not drawn.
+ */
+export const themedTextStyle = (fmt, defaults) => ({
+    color: fmt?.color ?? defaults.color,
+    fontFamily: fmt?.fontFamily ?? defaults.fontFamily ?? "sans-serif",
+    fontSize: typeof fmt?.fontSize === "number" && fmt.fontSize > 0
+        ? fmt.fontSize
+        : defaults.fontSize,
+    fontWeight: (fmt ? (fmt.bold ? "bold" : "normal") : defaults.fontWeight ?? "normal"),
+    fontStyle: (fmt?.italic ? "italic" : "normal"),
+});
 /** Build an echarts `textStyle` from a parsed `ChartTextFormat`. */
 export const textFormatToEchartsTextStyle = (fmt) => {
     if (!fmt)
@@ -201,9 +218,14 @@ export const buildSeriesLabelOption = (opts, seriesType, locale) => {
         ? ECHARTS_POINT_DLBL_POS
         : ECHARTS_DLBL_POS;
     const position = (opts.position && positions[opts.position]) ?? "top";
+    // Excel's Format Data Labels → Font: colour, family, size, bold, italic
+    // (rowsncolumns/spreadsheet#1105). Keys are only written when authored so
+    // a label keeps its series-aware default colour otherwise.
+    const font = textFormatToEchartsTextStyle(opts.textFormat) ?? {};
     return {
         show: true,
         position,
         formatter: dataLabelFormatter(opts, locale),
+        ...font,
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowsncolumns/charts",
-  "version": "28.1.16",
+  "version": "28.1.17",
   "author": "Vinay M",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "./dist/cjs/index.js",
@@ -72,7 +72,7 @@
     "@rowsncolumns/icons": ">=7.2.33",
     "@rowsncolumns/spreadsheet": ">=10.4.13",
     "@rowsncolumns/spreadsheet-state": ">=29.1.8",
-    "@rowsncolumns/toolkit": ">=24.5.13",
+    "@rowsncolumns/toolkit": ">=24.5.14",
     "@rowsncolumns/ui": ">=16.0.4",
     "@rowsncolumns/utils": ">=9.5.5",
     "@types/react-plotly.js": "^2.6.3",