@rowsncolumns/charts 28.1.11 → 28.1.13

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

@@ -23,12 +23,12 @@ import { applyEmptyCellsPolicy, connectsAcrossEmptyCells, isolatedPointIndexes,
 import { getEchartsGlState, loadEchartsGl, } from "../utils/echarts-gl-loader";
 import { echartsGroupedCategoryAxes, resolveCategoryLevels, } from "../utils/category-levels";
 import { gradientToEcharts } from "../utils/gradient";
-import { buildHierarchyTree, extractHierarchyRows, getHierarchyHeaderTitle, } from "../utils/hierarchy";
-import { binHistogram, computePareto, isParetoSpec, } from "../utils/histogram";
+import { buildHierarchyTree, contrastTextColor, extractHierarchyRows, getHierarchyHeaderTitle, } from "../utils/hierarchy";
+import { aggregateByCategory, binHistogram, computePareto, isParetoSpec, } from "../utils/histogram";
 import { categoryAxisNameGap, legendLabelsFrom, reserveEchartsLegendBand, } from "../utils/legend-layout";
 import { clampSecondPieSize, isOfPieChartSpec, otherSliceHalfAngle, resolveOfPieType, splitOfPie, } from "../utils/of-pie";
 import { clampDoughnutHole, doughnutRings } from "../utils/doughnut";
-import { applyAxisOverrides, applyLegendOverrides, buildSeriesLabelOption, resolveSeriesDataLabels, } from "../utils/overrides";
+import { applyAxisOverrides, dataLabelFormatter, applyLegendOverrides, buildSeriesLabelOption, resolveSeriesDataLabels, } from "../utils/overrides";
 import { buildRadarIndicators, buildRadarSeriesData } from "../utils/radar";
 import { buildRegionMapData, buildSequentialColorRamp, isRegionMapSpec, resolveGeoScope, warnOnceForUnmatchedRegions, } from "../utils/region-map";
 import { loadRegionMapGeo } from "../utils/region-map-loader";
@@ -116,7 +116,14 @@ const HIERARCHY_LEVEL_STYLES = [
     },
     {
         itemStyle: {
-            gapWidth: 1,
+            gapWidth: 2,
+            borderColor: "#ffffff",
+            borderWidth: 1,
+        },
+    },
+    {
+        itemStyle: {
+            gapWidth: 0,
             borderColor: "#ffffff",
             borderWidth: 1,
         },
@@ -139,14 +146,22 @@ const treemapBannerShown = (layout) => layout !== "none";
  * Colour a hierarchy like Excel: each top-level node takes the next
  * palette colour and every descendant inherits it (#1072).
  */
-const colorHierarchyNodes = (nodes, palette) => nodes.map((node, index) => {
+const colorHierarchyNodes = (nodes, palette, options = {}) => nodes.map((node, index) => {
     const color = chartPaletteColorAt(palette, index);
-    const paint = (n) => ({
+    const paint = (n, depth) => ({
         ...n,
-        itemStyle: { color },
-        ...(n.children ? { children: n.children.map(paint) } : {}),
+        // A top-level node's "border" is what echarts paints behind its
+        // banner strip: fill it with the category colour and write the name
+        // in a contrasting colour, like Excel's banner (#1086).
+        itemStyle: depth === 0 && options.banner
+            ? { color, borderColor: color }
+            : { color },
+        ...(depth === 0 && options.banner
+            ? { upperLabel: { color: contrastTextColor(color) } }
+            : {}),
+        ...(n.children ? { children: n.children.map((c) => paint(c, depth + 1)) } : {}),
     });
-    return paint(node);
+    return paint(node, 0);
 });
 /** Sunburst rings: Excel leaves the centre empty, so even the first level is a ring (#1073). */
 const SUNBURST_RADIUS = ["15%", "80%"];
@@ -759,6 +774,27 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     resolveRange: (range) => getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy),
                 });
             });
+            const bubbleLegend = applyLegendOverrides({
+                ...legend,
+                show: preparedSeries.length > 1,
+                data: preparedSeries.map((entry) => entry.name),
+            }, spec.legend);
+            const bubbleBand = reserveEchartsLegendBand({
+                position: spec.legend?.position,
+                visible: bubbleLegend.show !== false,
+                labels: preparedSeries.map((entry) => entry.name),
+                legendFontSize: bubbleLegend.textStyle?.fontSize ??
+                    spec.legend?.textFormat?.fontSize ??
+                    12,
+                legendItemWidth: defaultLegendConfig.itemWidth,
+                width: width ?? 0,
+                height: height ?? 0,
+                hasTitle: Boolean(explicitChartTitle),
+                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                hasBottomAxisTitle: Boolean(spec.horizontalAxisTitle),
+                bottomAxisNameGap: 30,
+                hasLeftAxisTitle: Boolean(spec.verticalAxisTitle),
+            });
             chartRef.current?.setOption({
                 xAxis: [
                     applyAxisOverrides({ ...xAxisConfig }, spec.categoryAxisOptions),
@@ -784,17 +820,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         ]
                         : []),
                 ],
-                legend: applyLegendOverrides({
-                    ...legend,
-                    show: preparedSeries.length > 1,
-                    data: preparedSeries.map((entry) => entry.name),
-                }, spec.legend),
-                grid: {
-                    left: "3%",
-                    right: "4%",
-                    bottom: "3%",
-                    containLabel: true,
-                },
+                legend: { ...bubbleLegend, ...bubbleBand.legend },
+                // The plot shrinks to leave the legend its own band, as the
+                // category charts do (#1089).
+                grid: bubbleBand.grid,
                 tooltip: {
                     trigger: "item",
                     formatter: tooltipFormatter,
@@ -834,13 +863,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 theme.themeColors.accent5,
                 theme.themeColors.accent6,
             ]);
-            const hierarchyData = colorHierarchyNodes(buildHierarchyTree(hierarchyRows), hierarchyPalette);
+            const isTreemap = spec.chartType === "treemap";
+            const banner = isTreemap && treemapBannerShown(spec.parentLabelLayout);
+            const hierarchyData = colorHierarchyNodes(buildHierarchyTree(hierarchyRows), hierarchyPalette, { banner });
             const rootName = hierarchyData.length === 1 ? hierarchyData[0]?.name ?? "" : "";
             const drillDown = Boolean(spec.drillDown);
             const seriesDisplayName = explicitChartTitle ?? headerTitle ?? rootName ?? "";
             const hierarchyDepth = getHierarchyDepth(hierarchyData);
-            const isTreemap = spec.chartType === "treemap";
-            const banner = isTreemap && treemapBannerShown(spec.parentLabelLayout);
             const levels = buildHierarchyLevels(hierarchyDepth, {
                 treemap: isTreemap,
                 banner,
@@ -873,12 +902,45 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     : params.value ?? "";
                 return `${params.name}: ${formatAxisValue(sizeNumberFormat, value, locale)}`;
             };
-            // Spec-level overrides — treemap/sunburst default to no legend,
-            // but an authored legend (visibility/position) still wins.
+            // Data labels: a treemap block's label always sits in its bottom-left
+            // corner (the bar placements mean nothing on a block) with each part
+            // — name, value — on its own line; `{ show: false }` turns the labels
+            // off entirely (#1086). Without `dataLabels` the block shows its name.
             const hierarchyDataLabels = spec.dataLabels;
-            const hierarchySeriesLabel = buildSeriesLabelOption(hierarchyDataLabels && !hierarchyDataLabels.numberFormatPattern
+            const hierarchyLabelOpts = hierarchyDataLabels && !hierarchyDataLabels.numberFormatPattern
                 ? { ...hierarchyDataLabels, numberFormatPattern: sizeNumberFormat }
-                : hierarchyDataLabels, undefined, locale);
+                : hierarchyDataLabels;
+            const hierarchyLabel = hierarchyLabelOpts?.show === false
+                ? { show: false }
+                : hierarchyLabelOpts?.show
+                    ? {
+                        show: true,
+                        formatter: dataLabelFormatter(hierarchyLabelOpts, locale, isTreemap ? "\n" : ": "),
+                        ...(isTreemap ? { position: "insideBottomLeft" } : {}),
+                    }
+                    : {
+                        show: true,
+                        formatter: "{b}",
+                        ...(isTreemap ? { position: "insideBottomLeft" } : {}),
+                    };
+            // Reserve a band for the legend (and the title) so neither paints
+            // over the blocks (#1086), as the cartesian layout does.
+            const hierarchyBand = reserveEchartsLegendBand({
+                position: spec.legend?.position,
+                visible: legendShown && hierarchyData.length > 0,
+                labels: hierarchyData.map((node) => node.name),
+                legendFontSize: hierarchyLegend.textStyle?.fontSize ??
+                    spec.legend?.textFormat?.fontSize ??
+                    12,
+                legendItemWidth: defaultLegendConfig.itemWidth,
+                width: width ?? 0,
+                height: height ?? 0,
+                hasTitle: Boolean(explicitChartTitle ?? headerTitle),
+                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                hasBottomAxisTitle: false,
+                bottomAxisNameGap: 0,
+                hasLeftAxisTitle: false,
+            });
             chartRef.current?.setOption({
                 xAxis: [
                     {
@@ -894,6 +956,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 ],
                 legend: {
                     ...hierarchyLegend,
+                    ...hierarchyBand.legend,
                     data: hierarchyData.map((node) => node.name),
                     selectedMode: false,
                 },
@@ -913,16 +976,22 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         name: seriesDisplayName,
                         rootName: rootName || seriesDisplayName || "",
                         data: hierarchyData,
-                        label: {
-                            show: true,
-                            formatter: "{b}",
-                            ...(isTreemap ? { position: "insideBottomLeft" } : {}),
-                            ...(hierarchySeriesLabel ?? {}),
-                        },
+                        label: hierarchyLabel,
                         // Only `levels[1]` (the categories) may carry a banner; see
                         // buildHierarchyLevels.
                         upperLabel: isTreemap ? { show: false } : undefined,
                         levels,
+                        ...(isTreemap
+                            ? {
+                                // Excel has no wheel zoom / drag pan on a treemap; the
+                                // sheet keeps scrolling under the pointer (#1086).
+                                roam: drillDown,
+                                left: hierarchyBand.grid.left,
+                                right: hierarchyBand.grid.right,
+                                top: hierarchyBand.grid.top,
+                                bottom: hierarchyBand.grid.bottom,
+                            }
+                            : {}),
                         // Excel has no drill-down on either chart: zooming into a
                         // branch on click (and the treemap breadcrumb) is opt-in.
                         nodeClick: drillDown
@@ -1330,8 +1399,44 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 const lines = indicators.map((indicator, i) => `${indicator.name}: ${formatAxisValue(pattern, values[i], locale)}`);
                 return [params?.name ?? "", ...lines].filter(Boolean).join("<br/>");
             };
+            const radarLegend = applyLegendOverrides({
+                ...legend,
+                show: radarData.length > 1,
+                data: radarData.map((d) => d.name),
+            }, spec.legend);
+            // The circle moves and shrinks to leave the legend (and the title)
+            // their own band instead of being drawn over (#1089).
+            const radarBand = reserveEchartsLegendBand({
+                position: spec.legend?.position,
+                visible: radarLegend.show !== false,
+                labels: radarData.map((d) => d.name),
+                legendFontSize: radarLegend.textStyle?.fontSize ??
+                    spec.legend?.textFormat?.fontSize ??
+                    12,
+                legendItemWidth: defaultLegendConfig.itemWidth,
+                width: width ?? 0,
+                height: height ?? 0,
+                hasTitle: Boolean(explicitChartTitle),
+                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                hasBottomAxisTitle: false,
+                bottomAxisNameGap: 0,
+                hasLeftAxisTitle: false,
+            });
+            const radarPlotWidth = Math.max(0, (width ?? 0) - radarBand.grid.left - radarBand.grid.right);
+            const radarPlotHeight = Math.max(0, (height ?? 0) - radarBand.grid.top - radarBand.grid.bottom);
+            // Leave ~30px around the circle for the axis names.
+            const radarGeometry = radarPlotWidth > 0 && radarPlotHeight > 0
+                ? {
+                    center: [
+                        radarBand.grid.left + radarPlotWidth / 2,
+                        radarBand.grid.top + radarPlotHeight / 2,
+                    ],
+                    radius: Math.max(10, Math.min(radarPlotWidth, radarPlotHeight) / 2 - 30),
+                }
+                : {};
             chartRef.current?.setOption({
                 radar: {
+                    ...radarGeometry,
                     // The common scale's tick labels along ONE axis, as Excel draws
                     // them: echarts labels every indicator axis, so each indicator
                     // carries its own `axisLabel.show` (an indicator's own options win
@@ -1350,11 +1455,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         formatter: (value) => formatAxisValue(radarFormats[0], value, locale),
                     },
                 },
-                legend: applyLegendOverrides({
-                    ...legend,
-                    show: radarData.length > 1,
-                    data: radarData.map((d) => d.name),
-                }, spec.legend),
+                legend: { ...radarLegend, ...radarBand.legend },
                 tooltip: { trigger: "item", formatter: radarTooltipFormatter },
                 series: [
                     {
@@ -2301,6 +2402,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 top: 60,
                 bottom: 20,
             };
+            // `dataLabels: { show: false }` hides the values inside the bars; the
+            // stage names on the left stay (#1091).
+            const funnelLabelsOff = resolveSeriesDataLabels(spec.dataLabels, seriesEntry)?.show ===
+                false;
             chartSeries.push({
                 type: "funnel",
                 id: chartSeriesId(0, 0),
@@ -2310,11 +2415,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 itemStyle: {
                     color: (params) => stageColors.get(params.dataIndex) ?? funnelColor,
                 },
-                label: {
-                    show: true,
-                    position: "inside",
-                    formatter: (params) => formatAxisValue(undefined, params.value, locale),
-                },
+                label: funnelLabelsOff
+                    ? { show: false }
+                    : {
+                        show: true,
+                        position: "inside",
+                        formatter: (params) => formatAxisValue(undefined, params.value, locale),
+                    },
             });
             // The stage names sit to the left of the bars, where Excel's
             // category axis puts them: an invisible twin funnel carries them.
@@ -2331,49 +2438,49 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 labelLine: { show: false },
                 z: 1,
             });
-            legend.data = [];
+            // The legend lists the series (shown when `legend.position` says so).
+            legend.data = seriesEntry?.dataLabel ? [seriesEntry.dataLabel] : [];
         }
         else if (spec.chartType === "boxplot") {
             const quartileMethod = spec.quartileMethod;
-            const showOutliers = spec.showOutliers;
+            const showOutliers = spec.showOutliers !== false;
             const showMeanMarker = spec.showMeanMarker === true;
-            const boxStats = [];
-            const boxLabels = [];
-            // [categoryIndex, value] pairs for the outlier / mean overlay
-            // scatter series (only populated when the options are on).
-            const outlierPoints = [];
-            const meanPoints = [];
-            for (const seriesEntry of spec.series ?? []) {
-                const label = seriesEntry.dataLabel && !isAFormula(seriesEntry.dataLabel)
-                    ? seriesEntry.dataLabel
-                    : "";
-                const rawValues = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)));
-                const summary = computeBoxplotSummary(rawValues, { quartileMethod });
-                if (summary) {
-                    const boxIndex = boxStats.length;
-                    // `showOutliers === true` clips the whiskers to the most
-                    // extreme data points inside the 1.5×IQR fences and plots
-                    // the points beyond them (Excel's "show outlier points").
-                    // Otherwise the whiskers span the full min/max — today's
-                    // rendering.
-                    const lo = showOutliers === true ? summary.lowerWhisker : summary.min;
-                    const hi = showOutliers === true ? summary.upperWhisker : summary.max;
-                    boxStats.push([lo, summary.q1, summary.median, summary.q3, hi]);
-                    boxLabels.push(label);
-                    if (showOutliers === true) {
-                        for (const outlier of summary.outliers) {
-                            outlierPoints.push([boxIndex, outlier]);
-                        }
-                    }
-                    if (showMeanMarker) {
-                        meanPoints.push([boxIndex, summary.mean]);
-                    }
+            const showInnerPoints = spec.showInnerPoints === true;
+            const showMeanLine = spec.showMeanLine === true;
+            // A category domain groups every series by its distinct values (in
+            // order of first appearance): one box per category per series, as
+            // Excel draws it. Without a domain each series is one box on its own
+            // slot (#1092).
+            const boxDomainSource = spec.domains?.[0]?.sources?.[0];
+            const boxCategories = boxDomainSource
+                ? (getDomainValuesFromRange(boxDomainSource, spec.hiddenDimensionStrategy) ?? []).map((v) => (v === null || v === undefined ? "" : `${v}`.trim()))
+                : [];
+            const grouped = boxCategories.some((c) => c !== "");
+            const groups = [];
+            if (grouped) {
+                for (const c of boxCategories) {
+                    if (c !== "" && !groups.includes(c))
+                        groups.push(c);
                 }
             }
+            const boxSeriesSpecs = spec.series ?? [];
+            const slots = grouped ? groups : boxSeriesSpecs.map((s, i) => s.dataLabel && !isAFormula(s.dataLabel) ? s.dataLabel : `Series ${i + 1}`);
+            // Excel sizes the boxes like columns: gapWidth is a percentage of the
+            // box width (default 150). echarts' boxplot only clamps its width
+            // (`boxWidth`), so the clamp is the box width that gap allows in the
+            // plot's category band.
+            const boxGap = typeof spec.gapWidth === "number" ? Math.max(0, spec.gapWidth) : 150;
+            const boxPlotWidth = Math.max(0, (width ?? 0) * 0.85 - 40);
+            const boxBand = slots.length ? boxPlotWidth / slots.length : boxPlotWidth;
+            const boxWidthMax = Math.max(2, Math.round(boxBand / (Math.max(1, boxSeriesSpecs.length) + boxGap / 100)));
+            const boxCount = Math.max(1, boxSeriesSpecs.length);
+            // Points of series i sit at that series' sub-slot inside the band
+            // (echarts spreads a category's boxes over ~80% of it).
+            const slotX = (slotIndex, seriesIndex) => slotIndex + ((seriesIndex + 0.5) / boxCount - 0.5) * 0.8;
             chartDomains.length = 0;
             chartDomains.push({
                 type: "category",
-                data: boxLabels,
+                data: slots,
                 show: showAxis,
                 axisLine: { show: true },
                 axisTick: { show: true },
@@ -2383,42 +2490,113 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 nameGap: 30,
             });
             chartSeries.length = 0;
-            const boxSeries = {
-                type: "boxplot",
-                name: "",
-                data: boxStats,
-            };
-            const boxColor = spec.series?.[0]?.color;
-            if (boxColor) {
-                boxSeries.itemStyle = { color: boxColor, borderColor: boxColor };
-            }
-            chartSeries.push(boxSeries);
-            if (outlierPoints.length > 0) {
-                chartSeries.push({
-                    type: "scatter",
-                    name: "",
-                    data: outlierPoints,
-                    symbolSize: 6,
-                    ...(boxColor ? { itemStyle: { color: boxColor } } : {}),
-                    tooltip: { show: false },
+            const boxLegend = [];
+            boxSeriesSpecs.forEach((seriesEntry, seriesIndex) => {
+                const label = seriesEntry.dataLabel && !isAFormula(seriesEntry.dataLabel)
+                    ? seriesEntry.dataLabel
+                    : "";
+                const rawValues = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)));
+                const color = seriesEntry.color ?? paletteColorAt(seriesIndex);
+                const boxData = [];
+                const outlierPoints = [];
+                const innerPoints = [];
+                const meanPoints = [];
+                const meanLine = [];
+                const slotValues = grouped
+                    ? groups.map((g) => rawValues.filter((_, i) => boxCategories[i] === g))
+                    : slots.map((_, i) => (i === seriesIndex ? rawValues : []));
+                slotValues.forEach((values, slotIndex) => {
+                    const summary = computeBoxplotSummary(values, { quartileMethod });
+                    if (!summary) {
+                        boxData.push([]);
+                        meanLine.push(null);
+                        return;
+                    }
+                    // Whiskers stop at the most extreme points inside the 1.5×IQR
+                    // fences; hiding the outliers hides the points only (Excel).
+                    boxData.push([
+                        summary.lowerWhisker,
+                        summary.q1,
+                        summary.median,
+                        summary.q3,
+                        summary.upperWhisker,
+                    ]);
+                    meanLine.push(summary.mean);
+                    const x = slotX(slotIndex, seriesIndex);
+                    if (showOutliers) {
+                        for (const outlier of summary.outliers)
+                            outlierPoints.push([x, outlier]);
+                    }
+                    if (showInnerPoints) {
+                        for (const v of values) {
+                            if (v >= summary.lowerWhisker && v <= summary.upperWhisker) {
+                                innerPoints.push([x, v]);
+                            }
+                        }
+                    }
+                    if (showMeanMarker)
+                        meanPoints.push([x, summary.mean]);
                 });
-            }
-            if (meanPoints.length > 0) {
+                if (label)
+                    boxLegend.push(label);
                 chartSeries.push({
+                    type: "boxplot",
+                    id: chartSeriesId(seriesIndex, 0),
+                    name: label,
+                    data: boxData,
+                    boxWidth: [2, boxWidthMax],
+                    itemStyle: { color, borderColor: color },
+                });
+                const pointSeries = (name, points, extra) => ({
                     type: "scatter",
-                    name: "",
-                    data: meanPoints,
-                    symbol: "diamond",
-                    symbolSize: 9,
-                    ...(boxColor ? { itemStyle: { color: boxColor } } : {}),
+                    name,
+                    data: points,
+                    itemStyle: { color },
                     tooltip: { show: false },
+                    ...extra,
                 });
-            }
-            legend.data = [];
+                if (outlierPoints.length > 0) {
+                    chartSeries.push(pointSeries("", outlierPoints, { symbolSize: 6 }));
+                }
+                if (innerPoints.length > 0) {
+                    chartSeries.push(pointSeries("", innerPoints, { symbolSize: 4, itemStyle: { color, opacity: 0.6 } }));
+                }
+                if (meanPoints.length > 0) {
+                    chartSeries.push(pointSeries("", meanPoints, { symbol: "diamond", symbolSize: 9 }));
+                }
+                if (showMeanLine && meanLine.some((m) => m !== null)) {
+                    chartSeries.push({
+                        type: "line",
+                        name: "",
+                        data: meanLine.map((m, slotIndex) => m === null ? null : [slotX(slotIndex, seriesIndex), m]),
+                        showSymbol: false,
+                        lineStyle: { color, type: "dashed", width: 1 },
+                        itemStyle: { color },
+                        tooltip: { show: false },
+                        z: 3,
+                    });
+                }
+            });
+            // The legend lists the series (shown when `legend.position` says so).
+            legend.data = boxLegend;
         }
         else if (spec.chartType === "histogram") {
             const rawValues = flattenChartDataValues(spec.series, getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)));
-            let { labels, counts } = binHistogram(rawValues, spec.binCount);
+            // A domain names a category column: Excel's "By Category" histogram
+            // / Pareto over categories aggregates the values per category (sum
+            // unless the series says otherwise) instead of binning them (#1087).
+            const histogramDomainSource = spec.domains?.[0]?.sources?.[0];
+            const histogramCategories = histogramDomainSource
+                ? (getDomainValuesFromRange(histogramDomainSource, spec.hiddenDimensionStrategy) ?? [])
+                : [];
+            let { labels, counts } = histogramCategories.length
+                ? aggregateByCategory(histogramCategories, rawValues, spec.series?.[0]?.aggregateType ?? "SUM")
+                : binHistogram(rawValues, spec.binCount, {
+                    binSize: spec.binSize,
+                    intervalClosed: spec.intervalClosed,
+                    overflow: spec.overflow,
+                    underflow: spec.underflow,
+                });
             // Pareto — a histogram whose bins are sorted descending with a
             // cumulative-% line overlaid on a secondary 0-100% axis. The
             // authored type arrives as `sourceChartType: "PARETO"` on an
@@ -2448,7 +2626,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 type: "bar",
                 name: spec.series?.[0]?.dataLabel ?? "",
                 data: counts,
-                barCategoryGap: "1%",
+                // Excel's histogram columns touch unless `gapWidth` says otherwise
+                // (#1087); the gap maps like a column chart's.
+                barCategoryGap: gapWidthToBarCategoryGap(spec.gapWidth ?? 0, { seriesCount: 1 }) ??
+                    "0%",
             };
             const histogramColor = spec.series?.[0]?.color;
             if (histogramColor) {
@@ -2458,14 +2639,21 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             if (isPareto) {
                 // Cumulative-% overlay on the secondary axis (yAxisIndex 1);
                 // the matching 0-100% axis element is appended with the other
-                // value axes below.
+                // value axes below. Excel draws the Pareto line without markers.
+                const paretoLineColor = spec.paretoLineColor;
                 chartSeries.push({
                     type: "line",
                     name: "Cumulative %",
                     data: cumulativePercents,
                     yAxisIndex: 1,
-                    symbol: "circle",
-                    symbolSize: 6,
+                    showSymbol: false,
+                    symbol: "none",
+                    ...(paretoLineColor
+                        ? {
+                            itemStyle: { color: paretoLineColor },
+                            lineStyle: { color: paretoLineColor },
+                        }
+                        : {}),
                 });
             }
             legend.data = [];

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,yGA6DzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SAuBX,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,KACnD,OAAgD,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,aAAa,CAAC,OAAO,CAAC,KAC7B,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;aASzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAiBjE,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,yGA6DzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SAuBX,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,KACnD,OAAgD,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,aAAa,CAAC,OAAO,CAAC,KAC7B,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;aASzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAmBjE,CAAC"}

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

@@ -121,6 +121,8 @@ export const showXAxis = (type) => {
         type === "histogram" ||
         // A waterfall's steps are categories (Opening, Sales, …) (#1070).
         type === "waterfall" ||
+        // A box & whisker's slots are categories (or the series names) (#1092).
+        type === "boxplot" ||
         // Stock is line-derived and lives on a category x-axis. Radar is
         // axis-less (it uses a polar `radar` indicator instead).
         type === "stock") {

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;AA6ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAilFjB,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;AA8ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAkqFjB,CAAC"}