@automattic/charts 0.31.0 → 0.32.0

package/CHANGELOG.md

@@ -5,35 +5,48 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.32.0] - 2025-09-02
+### Added
+- Charts: adds controls for label visibility [#45040]
+
+### Changed
+- Charts: format percentage values to be prettier [#45032]
+- Charts: Use a global context provider for theme configuration in all stories [#45028]
+- Charts: use getStringWidth for label size calculations [#45030]
+- Fix the conversion-funnel-chart component exportation [#45033]
+
+### Fixed
+- All charts were affected due to z-index. [#45043]
+
 ## [0.31.0] - 2025-09-01
 ### Added
-- Charts: adds an agents.md file to project root [#44954]
-- Charts: Refactor shared components, hooks and utils [#44971]
-- Charts: Stable colors for series groups [#44730]
-- Refactor Pie Chart to improve readability. [#44989]
+- Add an agents.md file to project root. [#44954]
+- Ensure stable colors for series groups. [#44730]
+- Pie Chart: Refactor to improve readability. [#44989]
 
 ### Changed
-- Enhanced ConversionFunnelChart with render props and TooltipInPortal [#45019]
+- Enhance ConversionFunnelChart with render props and TooltipInPortal. [#45019]
+- Refactor shared components, hooks and utils. [#44971]
 
 ### Fixed
-- Charts: fix label background colour and text colour [#44990]
-- Refactored leaderboard chart to remove progressbar. [#44982]
+- Fix label background and text color. [#44990]
+- Refactor leaderboard chart to remove progress bar. [#44982]
 
 ## [0.30.0] - 2025-08-27
 ### Added
 - Export ConversionFunnelChart for usage outside. [#44952]
 
 ### Changed
-- Consolidate sample data across Storybook stories for consistency and maintainability [#44903]
+- Storybook: Consolidate sample data across stories for consistency and maintainability. [#44903]
 
 ## [0.29.0] - 2025-08-25
 ### Changed
-- Charts: Consolidate and clean up pie chart composition API. [#44856]
+- Consolidate and clean up pie chart composition API. [#44856]
 
 ## [0.28.0] - 2025-08-21
 ### Added
-- Charts: Add composition legend to pie family charts. [#44796]
-- Charts: Add theme to global context and use instead of that from theme provider [#44809]
+- Add composition legend to pie family charts. [#44796]
+- Add theme to global context and use instead of that from theme provider. [#44809]
 
 ## [0.27.0] - 2025-08-18
 ### Added
@@ -46,7 +59,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Line Chart: Add comparison style to theme. [#44676]
 
 ### Changed
-- Updated legend positioning and alignment. [#44747]
+- Update legend positioning and alignment. [#44747]
 - Update package dependencies. [#44701]
 
 ## [0.25.0] - 2025-08-11
@@ -405,6 +418,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[0.32.0]: https://github.com/Automattic/charts/compare/v0.31.0...v0.32.0
 [0.31.0]: https://github.com/Automattic/charts/compare/v0.30.0...v0.31.0
 [0.30.0]: https://github.com/Automattic/charts/compare/v0.29.0...v0.30.0
 [0.29.0]: https://github.com/Automattic/charts/compare/v0.28.0...v0.29.0

package/dist/cjs/components/conversion-funnel-chart/conversion-funnel-chart.js

@@ -12,6 +12,7 @@ require('fast-deep-equal');
 require('@visx/xychart');
 require('date-fns');
 require('@automattic/number-formatters');
+var formatPercentage = require('../../utils/format-percentage.js');
 require('@visx/text');
 require('deepmerge');
 var colorUtils = require('../../utils/color-utils.js');
@@ -187,9 +188,9 @@ const ConversionFunnelChart = ({ mainRate, changeIndicator, steps, loading = fal
         ...style,
     };
     // Default main metric rendering function
-    const renderDefaultMainMetric = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: conversionFunnelChart_module.default['main-rate'], children: [mainRate.toFixed(1), "%"] }), changeIndicator && (jsxRuntime.jsx("span", { className: conversionFunnelChart_module.default['change-indicator'], children: changeIndicator }))] }));
+    const renderDefaultMainMetric = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: conversionFunnelChart_module.default['main-rate'], children: formatPercentage.formatPercentage(mainRate) }), changeIndicator && (jsxRuntime.jsx("span", { className: conversionFunnelChart_module.default['change-indicator'], children: changeIndicator }))] }));
     // Default tooltip rendering function
-    const renderDefaultTooltip = (step) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: conversionFunnelChart_module.default['tooltip-title'], children: step.label }), jsxRuntime.jsxs("div", { className: conversionFunnelChart_module.default['tooltip-content'], children: [step.rate.toFixed(1), "%", step.count && ` • ${step.count.toLocaleString()} items`] })] }));
+    const renderDefaultTooltip = (step) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: conversionFunnelChart_module.default['tooltip-title'], children: step.label }), jsxRuntime.jsxs("div", { className: conversionFunnelChart_module.default['tooltip-content'], children: [formatPercentage.formatPercentage(step.rate), step.count && ` • ${step.count.toLocaleString()} items`] })] }));
     // Handle empty or undefined data
     if (!steps || steps.length === 0) {
         return (jsxRuntime.jsx("div", { className: clsx(conversionFunnelChart_module.default.conversionFunnelChart, loading && conversionFunnelChart_module.default.loading, className), style: chartStyle, children: jsxRuntime.jsx("div", { className: conversionFunnelChart_module.default['empty-state'], children: loading ? 'Loading...' : 'No data available' }) }));
@@ -216,7 +217,7 @@ const ConversionFunnelChart = ({ mainRate, changeIndicator, steps, loading = fal
                                                 step,
                                                 index,
                                                 className: conversionFunnelChart_module.default['step-rate'],
-                                            })) : (jsxRuntime.jsxs("span", { className: conversionFunnelChart_module.default['step-rate'], children: [step.rate.toFixed(1), "%"] }))] }), jsxRuntime.jsx("div", { className: clsx(conversionFunnelChart_module.default['bar-container'], isClicked && conversionFunnelChart_module.default.selected, isBlurred && conversionFunnelChart_module.default.disabled), onClick: stepHandlers.get(step.id)?.onClick, onKeyDown: stepHandlers.get(step.id)?.onKeyDown, role: "button", tabIndex: isBlurred ? -1 : 0, "aria-label": step.label, children: jsxRuntime.jsx("div", { className: clsx(conversionFunnelChart_module.default['funnel-bar'], isClicked && conversionFunnelChart_module.default.selected), style: {
+                                            })) : (jsxRuntime.jsx("span", { className: conversionFunnelChart_module.default['step-rate'], children: formatPercentage.formatPercentage(step.rate) }))] }), jsxRuntime.jsx("div", { className: clsx(conversionFunnelChart_module.default['bar-container'], isClicked && conversionFunnelChart_module.default.selected, isBlurred && conversionFunnelChart_module.default.disabled), onClick: stepHandlers.get(step.id)?.onClick, onKeyDown: stepHandlers.get(step.id)?.onKeyDown, role: "button", tabIndex: isBlurred ? -1 : 0, "aria-label": step.label, children: jsxRuntime.jsx("div", { className: clsx(conversionFunnelChart_module.default['funnel-bar'], isClicked && conversionFunnelChart_module.default.selected), style: {
                                                 height: `${barHeight}%`,
                                                 backgroundColor: primaryColor,
                                             } }) })] }, step.id));

package/dist/cjs/components/leaderboard-chart/index.js

@@ -3,6 +3,7 @@
 var leaderboardChart = require('./leaderboard-chart.js');
 require('date-fns');
 var formatMetricValue = require('../../utils/format-metric-value.js');
+require('@automattic/number-formatters');
 require('@visx/text');
 require('deepmerge');
 

package/dist/cjs/components/leaderboard-chart/leaderboard-chart.js

@@ -14,6 +14,7 @@ require('@visx/tooltip');
 require('@visx/xychart');
 require('date-fns');
 var formatMetricValue = require('../../utils/format-metric-value.js');
+require('@automattic/number-formatters');
 require('@visx/text');
 require('deepmerge');
 require('@visx/scale');

package/dist/cjs/components/legend/hooks/use-chart-legend-items.js

@@ -8,6 +8,7 @@ require('@visx/tooltip');
 require('@visx/xychart');
 require('date-fns');
 require('@automattic/number-formatters');
+var formatPercentage = require('../../../utils/format-percentage.js');
 require('@visx/text');
 var getStyles = require('../../../utils/get-styles.js');
 require('deepmerge');
@@ -25,7 +26,7 @@ function formatPointValue(point, showValues) {
         return '';
     }
     if ('percentage' in point) {
-        return `${point.percentage}%`;
+        return formatPercentage.formatPercentage(point.percentage);
     }
     else if ('value' in point) {
         return point.value.toString();

package/dist/cjs/components/pie-chart/pie-chart.js

@@ -18,7 +18,7 @@ var useGlobalChartsTheme = require('../../providers/chart-context/hooks/use-glob
 var createComposition = require('../../utils/create-composition.js');
 require('date-fns');
 require('@automattic/number-formatters');
-require('@visx/text');
+var text = require('@visx/text');
 require('deepmerge');
 require('@visx/scale');
 var useElementHeight = require('../../hooks/use-element-height.js');
@@ -60,7 +60,7 @@ const validateData = (data) => {
  * @param {PieChartProps} props - Component props
  * @return {JSX.Element} The rendered chart component
  */
-const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
+const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, showLabels = true, children = null, }) => {
     const providerTheme = useGlobalChartsTheme.useGlobalChartsTheme();
     const chartId = useChartId.useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
@@ -138,11 +138,11 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
                                         }
                                         // Estimate text width more accurately for background sizing
                                         const fontSize = 12;
-                                        const estimatedTextWidth = arc.data.label.length * fontSize * 0.6; // Rough estimate
+                                        const estimatedTextWidth = text.getStringWidth(arc.data.label, { fontSize });
                                         const labelPadding = 6;
                                         const backgroundWidth = estimatedTextWidth + labelPadding * 2;
                                         const backgroundHeight = fontSize + labelPadding * 2;
-                                        return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { ...pathProps }), hasSpaceForLabel && (jsxRuntime.jsxs("g", { children: [providerTheme.labelBackgroundColor && (jsxRuntime.jsx("rect", { x: centroidX - backgroundWidth / 2, y: centroidY - backgroundHeight / 2, width: backgroundWidth, height: backgroundHeight, fill: providerTheme.labelBackgroundColor, rx: 4, ry: 4, pointerEvents: "none" })), jsxRuntime.jsx("text", { x: centroidX, y: centroidY, dy: ".33em", fill: providerTheme.labelTextColor || '#333', fontSize: fontSize, textAnchor: "middle", pointerEvents: "none", children: arc.data.label })] }))] }, `arc-${index}`));
+                                        return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { ...pathProps }), showLabels && hasSpaceForLabel && (jsxRuntime.jsxs("g", { children: [providerTheme.labelBackgroundColor && (jsxRuntime.jsx("rect", { x: centroidX - backgroundWidth / 2, y: centroidY - backgroundHeight / 2, width: backgroundWidth, height: backgroundHeight, fill: providerTheme.labelBackgroundColor, rx: 4, ry: 4, pointerEvents: "none" })), jsxRuntime.jsx("text", { x: centroidX, y: centroidY, dy: ".33em", fill: providerTheme.labelTextColor || '#333', fontSize: fontSize, textAnchor: "middle", pointerEvents: "none", children: arc.data.label })] }))] }, `arc-${index}`));
                                     });
                                 } }), svgChildren] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, className: pieChart_module.default['pie-chart-legend'], shape: legendShape, ref: legendRef, chartId: chartId })), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: tooltipData, top: tooltipTop || 0, left: tooltipLeft || 0, style: {
                         transform: 'translate(-50%, -100%)',

package/dist/cjs/style.css

@@ -1 +1 @@
-.line-chart-module_line-chart__ITM3d{display:flex;flex-direction:column}.line-chart-module_line-chart__ITM3d svg{overflow:visible}.line-chart-module_line-chart__annotation-label-popover__TqNZk,.line-chart-module_line-chart__tooltip__aqcme{background:#fff;padding:.5rem}.line-chart-module_line-chart__tooltip-date__4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module_line-chart__tooltip-row__6A37G{align-items:center;display:flex;justify-content:space-between;padding:4px 0}.line-chart-module_line-chart__tooltip-label__IvnFF{font-weight:500;padding-right:1rem}.line-chart-module_line-chart__annotations-overlay__4nR2p{left:0;overflow:visible;pointer-events:none;position:absolute;top:0}.line-chart-module_line-chart__annotation-label__OmgiT{pointer-events:auto}.line-chart-module_line-chart__annotation-label-trigger-button__mcIb3{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;pointer-events:auto}.line-chart-module_line-chart__annotation-label-popover__TqNZk{background:#fff;border:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);font-size:14px;margin:.5rem;min-width:125px;position:fixed;visibility:hidden}.line-chart-module_line-chart__annotation-label-popover--visible__dE0cV{visibility:visible}.line-chart-module_line-chart__annotation-label-popover--safari__i3NHT{margin:auto;position:static}.line-chart-module_line-chart__annotation-label-popover-header__Owypo{align-items:start;display:flex;flex-direction:row;justify-content:space-between}.line-chart-module_line-chart__annotation-label-popover-content__vtgQt{padding:.5rem}.line-chart-module_line-chart__annotation-label-popover-close-button__i8KUc{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}.visx-tooltip-glyph svg{height:10px;width:10px}.pie-chart-module_pie-chart__R12Vh{display:flex;flex-direction:column;overflow:hidden}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9{display:flex;flex-direction:column;text-align:center}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_label__nPqOg{font-size:16px;font-weight:600;margin-bottom:0}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_note__LpBZQ{font-size:14px;margin-top:0}.leaderboard-chart-module_leaderboardChart__zxakP{transition:opacity .3s ease-in-out}.leaderboard-chart-module_leaderboardChart__zxakP.leaderboard-chart-module_loading__-AGv-{opacity:.5}.leaderboard-chart-module_barWithLabelContainer__9RE0U{align-items:center;display:grid;grid-template-columns:1fr;row-gap:6px}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5{grid-template:"overlap" 1fr/1fr}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5>*{grid-area:overlap}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5 .leaderboard-chart-module_label__7ZUu0{padding-left:8px}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_bar__CnJvg{background-color:var(--bar-color,#3858e9);border-radius:var(--bar-border,9999px);height:100%;min-height:6px;transition:width .3s ease-in-out;z-index:-1}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_primaryBar__iybII{--bar-color:var(--primary-color,#3858e9)}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_secondaryBar__A7tLz{--bar-color:var(--secondary-color,#66bdff)}.leaderboard-chart-module_valueContainer__ZlLh4{display:flex;gap:4px;justify-content:flex-end}.leaderboard-chart-module_overlayLabel__pRqSh{align-items:center}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}.conversion-funnel-chart-module_conversionFunnelChart__-9Qsb{font-family:var(--funnel-font-family,"SF Pro Text")}.conversion-funnel-chart-module_conversionFunnelChart__-9Qsb.conversion-funnel-chart-module_loading__Kw-iZ{opacity:.6;pointer-events:none}.conversion-funnel-chart-module_main-metric__8mIwV{align-items:baseline;display:flex;gap:8px;margin-bottom:24px}.conversion-funnel-chart-module_main-rate__D93Ub{color:#1e1e1e;font-size:18px}.conversion-funnel-chart-module_change-indicator__QWypV,.conversion-funnel-chart-module_main-rate__D93Ub{font-family:var(--funnel-font-family,"SF Pro Text");font-style:normal;font-weight:500;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis}.conversion-funnel-chart-module_change-indicator__QWypV{color:var(--change-indicator-color,#008a20);font-size:13px}.conversion-funnel-chart-module_funnel-container__RR7xa{align-items:flex-end;display:flex;gap:16px;height:200px;width:100%}.conversion-funnel-chart-module_funnel-step__VIVzt{display:flex;flex:1 1 0;flex-direction:column;height:100%;min-width:0;transition:all .3s ease}.conversion-funnel-chart-module_funnel-step__VIVzt.conversion-funnel-chart-module_blurred__Ax4cu{opacity:.3}.conversion-funnel-chart-module_step-header__bUrZ0{margin-bottom:24px}.conversion-funnel-chart-module_step-label__SCy8F{color:#757575;display:block;font-family:var(--step-font-family,"SF Pro");font-size:12px;font-style:normal;font-weight:400;line-height:16px;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis}.conversion-funnel-chart-module_step-rate__A0irB{color:#1e1e1e;display:block;font-family:var(--step-font-family,"SF Pro");font-size:13px;font-style:normal;font-weight:500;line-height:20px;margin:0}.conversion-funnel-chart-module_bar-container__5Dl5-{align-items:flex-end;background-color:var(--light-background-color,rgba(79,70,229,.08));border-radius:4px;cursor:pointer;display:flex;flex:1;position:relative;transition:all .2s ease}.conversion-funnel-chart-module_bar-container__5Dl5-.conversion-funnel-chart-module_selected__W40FY{background-color:var(--light-background-color,rgba(79,70,229,.15))}.conversion-funnel-chart-module_bar-container__5Dl5-.conversion-funnel-chart-module_disabled__Reovk{cursor:pointer}.conversion-funnel-chart-module_funnel-bar__tG5m3{background-color:var(--primary-color,#4f46e5);border-radius:4px 4px 0 0;min-height:4px;transition:all .3s ease;width:100%}.conversion-funnel-chart-module_funnel-bar__tG5m3.conversion-funnel-chart-module_selected__W40FY{box-shadow:0 4px 16px rgba(0,0,0,.2);filter:brightness(1.1)}.conversion-funnel-chart-module_tooltip-wrapper__NohPt{align-items:flex-start;background:var(--black-white-white,#fff);border-bottom:1px solid var(--Gray-Gray-5,#dcdcde);border-radius:4px!important;box-shadow:0 1px 3px 0 rgba(0,0,0,.15),0 3px 9px 0 rgba(0,0,0,.12)!important;display:inline-flex;flex-direction:column;gap:4px;justify-content:center;padding:12px!important}.conversion-funnel-chart-module_tooltip-title__hjZr3{color:#1e1e1e;font-family:SF Pro,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.conversion-funnel-chart-module_tooltip-content__ocwAP{color:#1e1e1e;font-family:SF Pro,sans-serif;font-size:13px;font-style:normal;font-weight:500;line-height:20px}.conversion-funnel-chart-module_empty-state__9c0ps{color:#6b7280;font-size:16px;padding:48px 24px;text-align:center}.base-legend-module_legend--horizontal__AELBv{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.base-legend-module_legend--vertical__fX8uQ{display:flex;flex-direction:column;gap:8px}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-start__DEe0w{align-items:flex-start}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-center__WBKF9{align-items:center}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-end__JfwMn{align-items:flex-end}.base-legend-module_legend--position-top__8Y73K{position:relative}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-start__DEe0w{justify-content:flex-start}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-center__WBKF9{justify-content:center}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-end__JfwMn{justify-content:flex-end}.base-legend-module_legend--position-bottom__TVM-I{position:relative}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-start__DEe0w{justify-content:flex-start}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-center__WBKF9{justify-content:center}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-end__JfwMn{justify-content:flex-end}.base-legend-module_legend-item__Vflwq{align-items:center;display:flex;font-size:.875rem}.base-legend-module_legend-item-label__2H65K{align-items:center;display:flex;gap:.5rem}.base-legend-module_legend-item-value__DTZlT{font-weight:500}.base-tooltip-module_tooltip__OfX6n{background-color:rgba(0,0,0,.85);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:#fff;font-size:14px;padding:.5rem;pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.bar-chart-module_bar-chart__lmYNi{display:flex;flex-direction:column}.bar-chart-module_bar-chart__lmYNi svg{overflow:visible}.bar-chart-module_bar-chart-legend__vgKKq{margin-top:1rem}
+.base-legend-module_legend--horizontal__AELBv{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.base-legend-module_legend--vertical__fX8uQ{display:flex;flex-direction:column;gap:8px}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-start__DEe0w{align-items:flex-start}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-center__WBKF9{align-items:center}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-end__JfwMn{align-items:flex-end}.base-legend-module_legend--position-top__8Y73K{position:relative}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-start__DEe0w{justify-content:flex-start}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-center__WBKF9{justify-content:center}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-end__JfwMn{justify-content:flex-end}.base-legend-module_legend--position-bottom__TVM-I{position:relative}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-start__DEe0w{justify-content:flex-start}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-center__WBKF9{justify-content:center}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-end__JfwMn{justify-content:flex-end}.base-legend-module_legend-item__Vflwq{align-items:center;display:flex;font-size:.875rem}.base-legend-module_legend-item-label__2H65K{align-items:center;display:flex;gap:.5rem}.base-legend-module_legend-item-value__DTZlT{font-weight:500}.base-tooltip-module_tooltip__OfX6n{background-color:rgba(0,0,0,.85);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:#fff;font-size:14px;padding:.5rem;pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.bar-chart-module_bar-chart__lmYNi{display:flex;flex-direction:column}.bar-chart-module_bar-chart__lmYNi svg{overflow:visible}.bar-chart-module_bar-chart-legend__vgKKq{margin-top:1rem}.line-chart-module_line-chart__ITM3d{display:flex;flex-direction:column}.line-chart-module_line-chart__ITM3d svg{overflow:visible}.line-chart-module_line-chart__annotation-label-popover__TqNZk,.line-chart-module_line-chart__tooltip__aqcme{background:#fff;padding:.5rem}.line-chart-module_line-chart__tooltip-date__4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module_line-chart__tooltip-row__6A37G{align-items:center;display:flex;justify-content:space-between;padding:4px 0}.line-chart-module_line-chart__tooltip-label__IvnFF{font-weight:500;padding-right:1rem}.line-chart-module_line-chart__annotations-overlay__4nR2p{left:0;overflow:visible;pointer-events:none;position:absolute;top:0}.line-chart-module_line-chart__annotation-label__OmgiT{pointer-events:auto}.line-chart-module_line-chart__annotation-label-trigger-button__mcIb3{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;pointer-events:auto}.line-chart-module_line-chart__annotation-label-popover__TqNZk{background:#fff;border:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);font-size:14px;margin:.5rem;min-width:125px;position:fixed;visibility:hidden}.line-chart-module_line-chart__annotation-label-popover--visible__dE0cV{visibility:visible}.line-chart-module_line-chart__annotation-label-popover--safari__i3NHT{margin:auto;position:static}.line-chart-module_line-chart__annotation-label-popover-header__Owypo{align-items:start;display:flex;flex-direction:row;justify-content:space-between}.line-chart-module_line-chart__annotation-label-popover-content__vtgQt{padding:.5rem}.line-chart-module_line-chart__annotation-label-popover-close-button__i8KUc{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}.visx-tooltip-glyph svg{height:10px;width:10px}.pie-chart-module_pie-chart__R12Vh{display:flex;flex-direction:column;overflow:hidden}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9{display:flex;flex-direction:column;text-align:center}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_label__nPqOg{font-size:16px;font-weight:600;margin-bottom:0}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_note__LpBZQ{font-size:14px;margin-top:0}.leaderboard-chart-module_leaderboardChart__zxakP{transition:opacity .3s ease-in-out}.leaderboard-chart-module_leaderboardChart__zxakP.leaderboard-chart-module_loading__-AGv-{opacity:.5}.leaderboard-chart-module_barWithLabelContainer__9RE0U{align-items:center;display:grid;grid-template-columns:1fr;isolation:isolate;row-gap:6px}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5{grid-template:"overlap" 1fr/1fr}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5>*{grid-area:overlap}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5 .leaderboard-chart-module_label__7ZUu0{padding-left:8px}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_bar__CnJvg{background-color:var(--bar-color,#3858e9);border-radius:var(--bar-border,9999px);height:100%;min-height:6px;transition:width .3s ease-in-out;z-index:-1}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_primaryBar__iybII{--bar-color:var(--primary-color,#3858e9)}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_secondaryBar__A7tLz{--bar-color:var(--secondary-color,#66bdff)}.leaderboard-chart-module_valueContainer__ZlLh4{display:flex;gap:4px;justify-content:flex-end}.leaderboard-chart-module_overlayLabel__pRqSh{align-items:center}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}.conversion-funnel-chart-module_conversionFunnelChart__-9Qsb{font-family:var(--funnel-font-family,"SF Pro Text")}.conversion-funnel-chart-module_conversionFunnelChart__-9Qsb.conversion-funnel-chart-module_loading__Kw-iZ{opacity:.6;pointer-events:none}.conversion-funnel-chart-module_main-metric__8mIwV{align-items:baseline;display:flex;gap:8px;margin-bottom:24px}.conversion-funnel-chart-module_main-rate__D93Ub{color:#1e1e1e;font-size:18px}.conversion-funnel-chart-module_change-indicator__QWypV,.conversion-funnel-chart-module_main-rate__D93Ub{font-family:var(--funnel-font-family,"SF Pro Text");font-style:normal;font-weight:500;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis}.conversion-funnel-chart-module_change-indicator__QWypV{color:var(--change-indicator-color,#008a20);font-size:13px}.conversion-funnel-chart-module_funnel-container__RR7xa{align-items:flex-end;display:flex;gap:16px;height:200px;width:100%}.conversion-funnel-chart-module_funnel-step__VIVzt{display:flex;flex:1 1 0;flex-direction:column;height:100%;min-width:0;transition:all .3s ease}.conversion-funnel-chart-module_funnel-step__VIVzt.conversion-funnel-chart-module_blurred__Ax4cu{opacity:.3}.conversion-funnel-chart-module_step-header__bUrZ0{margin-bottom:24px}.conversion-funnel-chart-module_step-label__SCy8F{color:#757575;display:block;font-family:var(--step-font-family,"SF Pro");font-size:12px;font-style:normal;font-weight:400;line-height:16px;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis}.conversion-funnel-chart-module_step-rate__A0irB{color:#1e1e1e;display:block;font-family:var(--step-font-family,"SF Pro");font-size:13px;font-style:normal;font-weight:500;line-height:20px;margin:0}.conversion-funnel-chart-module_bar-container__5Dl5-{align-items:flex-end;background-color:var(--light-background-color,rgba(79,70,229,.08));border-radius:4px;cursor:pointer;display:flex;flex:1;position:relative;transition:all .2s ease}.conversion-funnel-chart-module_bar-container__5Dl5-.conversion-funnel-chart-module_selected__W40FY{background-color:var(--light-background-color,rgba(79,70,229,.15))}.conversion-funnel-chart-module_bar-container__5Dl5-.conversion-funnel-chart-module_disabled__Reovk{cursor:pointer}.conversion-funnel-chart-module_funnel-bar__tG5m3{background-color:var(--primary-color,#4f46e5);border-radius:4px 4px 0 0;min-height:4px;transition:all .3s ease;width:100%}.conversion-funnel-chart-module_funnel-bar__tG5m3.conversion-funnel-chart-module_selected__W40FY{box-shadow:0 4px 16px rgba(0,0,0,.2);filter:brightness(1.1)}.conversion-funnel-chart-module_tooltip-wrapper__NohPt{align-items:flex-start;background:var(--black-white-white,#fff);border-bottom:1px solid var(--Gray-Gray-5,#dcdcde);border-radius:4px!important;box-shadow:0 1px 3px 0 rgba(0,0,0,.15),0 3px 9px 0 rgba(0,0,0,.12)!important;display:inline-flex;flex-direction:column;gap:4px;justify-content:center;padding:12px!important}.conversion-funnel-chart-module_tooltip-title__hjZr3{color:#1e1e1e;font-family:SF Pro,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.conversion-funnel-chart-module_tooltip-content__ocwAP{color:#1e1e1e;font-family:SF Pro,sans-serif;font-size:13px;font-style:normal;font-weight:500;line-height:20px}.conversion-funnel-chart-module_empty-state__9c0ps{color:#6b7280;font-size:16px;padding:48px 24px;text-align:center}

package/dist/cjs/utils/format-percentage.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var numberFormatters = require('@automattic/number-formatters');
+
+/**
+ * Format a percentage value with smart decimal handling.
+ * Uses @automattic/number-formatters for consistent formatting.
+ * Removes unnecessary trailing zeros and caps at 2 decimal places.
+ *
+ * @param value - The percentage value (0-100 range)
+ * @return Formatted percentage string (e.g., "30%", "30.1%", "30.25%")
+ */
+const formatPercentage = (value) => {
+    // Use formatNumber with percentage style, but convert from 0-100 range to 0-1 range
+    return numberFormatters.formatNumber(value / 100, {
+        numberFormatOptions: {
+            style: 'percent',
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2,
+        },
+    });
+};
+
+exports.formatPercentage = formatPercentage;

package/dist/mjs/components/conversion-funnel-chart/conversion-funnel-chart.js

@@ -8,6 +8,7 @@ import 'fast-deep-equal';
 import '@visx/xychart';
 import 'date-fns';
 import '@automattic/number-formatters';
+import { formatPercentage } from '../../utils/format-percentage.js';
 import '@visx/text';
 import 'deepmerge';
 import { hexToRgba } from '../../utils/color-utils.js';
@@ -183,9 +184,9 @@ const ConversionFunnelChart = ({ mainRate, changeIndicator, steps, loading = fal
         ...style,
     };
     // Default main metric rendering function
-    const renderDefaultMainMetric = () => (jsxs(Fragment, { children: [jsxs("span", { className: styles['main-rate'], children: [mainRate.toFixed(1), "%"] }), changeIndicator && (jsx("span", { className: styles['change-indicator'], children: changeIndicator }))] }));
+    const renderDefaultMainMetric = () => (jsxs(Fragment, { children: [jsx("span", { className: styles['main-rate'], children: formatPercentage(mainRate) }), changeIndicator && (jsx("span", { className: styles['change-indicator'], children: changeIndicator }))] }));
     // Default tooltip rendering function
-    const renderDefaultTooltip = (step) => (jsxs(Fragment, { children: [jsx("div", { className: styles['tooltip-title'], children: step.label }), jsxs("div", { className: styles['tooltip-content'], children: [step.rate.toFixed(1), "%", step.count && ` • ${step.count.toLocaleString()} items`] })] }));
+    const renderDefaultTooltip = (step) => (jsxs(Fragment, { children: [jsx("div", { className: styles['tooltip-title'], children: step.label }), jsxs("div", { className: styles['tooltip-content'], children: [formatPercentage(step.rate), step.count && ` • ${step.count.toLocaleString()} items`] })] }));
     // Handle empty or undefined data
     if (!steps || steps.length === 0) {
         return (jsx("div", { className: clsx(styles.conversionFunnelChart, loading && styles.loading, className), style: chartStyle, children: jsx("div", { className: styles['empty-state'], children: loading ? 'Loading...' : 'No data available' }) }));
@@ -212,7 +213,7 @@ const ConversionFunnelChart = ({ mainRate, changeIndicator, steps, loading = fal
                                                 step,
                                                 index,
                                                 className: styles['step-rate'],
-                                            })) : (jsxs("span", { className: styles['step-rate'], children: [step.rate.toFixed(1), "%"] }))] }), jsx("div", { className: clsx(styles['bar-container'], isClicked && styles.selected, isBlurred && styles.disabled), onClick: stepHandlers.get(step.id)?.onClick, onKeyDown: stepHandlers.get(step.id)?.onKeyDown, role: "button", tabIndex: isBlurred ? -1 : 0, "aria-label": step.label, children: jsx("div", { className: clsx(styles['funnel-bar'], isClicked && styles.selected), style: {
+                                            })) : (jsx("span", { className: styles['step-rate'], children: formatPercentage(step.rate) }))] }), jsx("div", { className: clsx(styles['bar-container'], isClicked && styles.selected, isBlurred && styles.disabled), onClick: stepHandlers.get(step.id)?.onClick, onKeyDown: stepHandlers.get(step.id)?.onKeyDown, role: "button", tabIndex: isBlurred ? -1 : 0, "aria-label": step.label, children: jsx("div", { className: clsx(styles['funnel-bar'], isClicked && styles.selected), style: {
                                                 height: `${barHeight}%`,
                                                 backgroundColor: primaryColor,
                                             } }) })] }, step.id));

package/dist/mjs/components/leaderboard-chart/index.js

@@ -1,5 +1,6 @@
 export { LeaderboardChart } from './leaderboard-chart.js';
 import 'date-fns';
 export { formatMetricValue } from '../../utils/format-metric-value.js';
+import '@automattic/number-formatters';
 import '@visx/text';
 import 'deepmerge';

package/dist/mjs/components/leaderboard-chart/leaderboard-chart.js

@@ -10,6 +10,7 @@ import '@visx/tooltip';
 import '@visx/xychart';
 import 'date-fns';
 import { formatMetricValue } from '../../utils/format-metric-value.js';
+import '@automattic/number-formatters';
 import '@visx/text';
 import 'deepmerge';
 import '@visx/scale';

package/dist/mjs/components/legend/hooks/use-chart-legend-items.js

@@ -6,6 +6,7 @@ import '@visx/tooltip';
 import '@visx/xychart';
 import 'date-fns';
 import '@automattic/number-formatters';
+import { formatPercentage } from '../../../utils/format-percentage.js';
 import '@visx/text';
 import { getItemShapeStyles, getSeriesStroke } from '../../../utils/get-styles.js';
 import 'deepmerge';
@@ -23,7 +24,7 @@ function formatPointValue(point, showValues) {
         return '';
     }
     if ('percentage' in point) {
-        return `${point.percentage}%`;
+        return formatPercentage(point.percentage);
     }
     else if ('value' in point) {
         return point.value.toString();

package/dist/mjs/components/pie-chart/pie-chart.js

@@ -14,7 +14,7 @@ import { useGlobalChartsTheme } from '../../providers/chart-context/hooks/use-gl
 import { attachSubComponents } from '../../utils/create-composition.js';
 import 'date-fns';
 import '@automattic/number-formatters';
-import '@visx/text';
+import { getStringWidth } from '@visx/text';
 import 'deepmerge';
 import '@visx/scale';
 import { useElementHeight } from '../../hooks/use-element-height.js';
@@ -56,7 +56,7 @@ const validateData = (data) => {
  * @param {PieChartProps} props - Component props
  * @return {JSX.Element} The rendered chart component
  */
-const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
+const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, showLabels = true, children = null, }) => {
     const providerTheme = useGlobalChartsTheme();
     const chartId = useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight();
@@ -134,11 +134,11 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
                                         }
                                         // Estimate text width more accurately for background sizing
                                         const fontSize = 12;
-                                        const estimatedTextWidth = arc.data.label.length * fontSize * 0.6; // Rough estimate
+                                        const estimatedTextWidth = getStringWidth(arc.data.label, { fontSize });
                                         const labelPadding = 6;
                                         const backgroundWidth = estimatedTextWidth + labelPadding * 2;
                                         const backgroundHeight = fontSize + labelPadding * 2;
-                                        return (jsxs("g", { children: [jsx("path", { ...pathProps }), hasSpaceForLabel && (jsxs("g", { children: [providerTheme.labelBackgroundColor && (jsx("rect", { x: centroidX - backgroundWidth / 2, y: centroidY - backgroundHeight / 2, width: backgroundWidth, height: backgroundHeight, fill: providerTheme.labelBackgroundColor, rx: 4, ry: 4, pointerEvents: "none" })), jsx("text", { x: centroidX, y: centroidY, dy: ".33em", fill: providerTheme.labelTextColor || '#333', fontSize: fontSize, textAnchor: "middle", pointerEvents: "none", children: arc.data.label })] }))] }, `arc-${index}`));
+                                        return (jsxs("g", { children: [jsx("path", { ...pathProps }), showLabels && hasSpaceForLabel && (jsxs("g", { children: [providerTheme.labelBackgroundColor && (jsx("rect", { x: centroidX - backgroundWidth / 2, y: centroidY - backgroundHeight / 2, width: backgroundWidth, height: backgroundHeight, fill: providerTheme.labelBackgroundColor, rx: 4, ry: 4, pointerEvents: "none" })), jsx("text", { x: centroidX, y: centroidY, dy: ".33em", fill: providerTheme.labelTextColor || '#333', fontSize: fontSize, textAnchor: "middle", pointerEvents: "none", children: arc.data.label })] }))] }, `arc-${index}`));
                                     });
                                 } }), svgChildren] }) }), showLegend && (jsx(Legend, { orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, className: styles['pie-chart-legend'], shape: legendShape, ref: legendRef, chartId: chartId })), withTooltips && tooltipOpen && tooltipData && (jsx(BaseTooltip, { data: tooltipData, top: tooltipTop || 0, left: tooltipLeft || 0, style: {
                         transform: 'translate(-50%, -100%)',

package/dist/mjs/style.css

@@ -1 +1 @@
-.line-chart-module_line-chart__ITM3d{display:flex;flex-direction:column}.line-chart-module_line-chart__ITM3d svg{overflow:visible}.line-chart-module_line-chart__annotation-label-popover__TqNZk,.line-chart-module_line-chart__tooltip__aqcme{background:#fff;padding:.5rem}.line-chart-module_line-chart__tooltip-date__4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module_line-chart__tooltip-row__6A37G{align-items:center;display:flex;justify-content:space-between;padding:4px 0}.line-chart-module_line-chart__tooltip-label__IvnFF{font-weight:500;padding-right:1rem}.line-chart-module_line-chart__annotations-overlay__4nR2p{left:0;overflow:visible;pointer-events:none;position:absolute;top:0}.line-chart-module_line-chart__annotation-label__OmgiT{pointer-events:auto}.line-chart-module_line-chart__annotation-label-trigger-button__mcIb3{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;pointer-events:auto}.line-chart-module_line-chart__annotation-label-popover__TqNZk{background:#fff;border:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);font-size:14px;margin:.5rem;min-width:125px;position:fixed;visibility:hidden}.line-chart-module_line-chart__annotation-label-popover--visible__dE0cV{visibility:visible}.line-chart-module_line-chart__annotation-label-popover--safari__i3NHT{margin:auto;position:static}.line-chart-module_line-chart__annotation-label-popover-header__Owypo{align-items:start;display:flex;flex-direction:row;justify-content:space-between}.line-chart-module_line-chart__annotation-label-popover-content__vtgQt{padding:.5rem}.line-chart-module_line-chart__annotation-label-popover-close-button__i8KUc{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}.visx-tooltip-glyph svg{height:10px;width:10px}.pie-chart-module_pie-chart__R12Vh{display:flex;flex-direction:column;overflow:hidden}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9{display:flex;flex-direction:column;text-align:center}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_label__nPqOg{font-size:16px;font-weight:600;margin-bottom:0}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_note__LpBZQ{font-size:14px;margin-top:0}.leaderboard-chart-module_leaderboardChart__zxakP{transition:opacity .3s ease-in-out}.leaderboard-chart-module_leaderboardChart__zxakP.leaderboard-chart-module_loading__-AGv-{opacity:.5}.leaderboard-chart-module_barWithLabelContainer__9RE0U{align-items:center;display:grid;grid-template-columns:1fr;row-gap:6px}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5{grid-template:"overlap" 1fr/1fr}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5>*{grid-area:overlap}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5 .leaderboard-chart-module_label__7ZUu0{padding-left:8px}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_bar__CnJvg{background-color:var(--bar-color,#3858e9);border-radius:var(--bar-border,9999px);height:100%;min-height:6px;transition:width .3s ease-in-out;z-index:-1}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_primaryBar__iybII{--bar-color:var(--primary-color,#3858e9)}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_secondaryBar__A7tLz{--bar-color:var(--secondary-color,#66bdff)}.leaderboard-chart-module_valueContainer__ZlLh4{display:flex;gap:4px;justify-content:flex-end}.leaderboard-chart-module_overlayLabel__pRqSh{align-items:center}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}.conversion-funnel-chart-module_conversionFunnelChart__-9Qsb{font-family:var(--funnel-font-family,"SF Pro Text")}.conversion-funnel-chart-module_conversionFunnelChart__-9Qsb.conversion-funnel-chart-module_loading__Kw-iZ{opacity:.6;pointer-events:none}.conversion-funnel-chart-module_main-metric__8mIwV{align-items:baseline;display:flex;gap:8px;margin-bottom:24px}.conversion-funnel-chart-module_main-rate__D93Ub{color:#1e1e1e;font-size:18px}.conversion-funnel-chart-module_change-indicator__QWypV,.conversion-funnel-chart-module_main-rate__D93Ub{font-family:var(--funnel-font-family,"SF Pro Text");font-style:normal;font-weight:500;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis}.conversion-funnel-chart-module_change-indicator__QWypV{color:var(--change-indicator-color,#008a20);font-size:13px}.conversion-funnel-chart-module_funnel-container__RR7xa{align-items:flex-end;display:flex;gap:16px;height:200px;width:100%}.conversion-funnel-chart-module_funnel-step__VIVzt{display:flex;flex:1 1 0;flex-direction:column;height:100%;min-width:0;transition:all .3s ease}.conversion-funnel-chart-module_funnel-step__VIVzt.conversion-funnel-chart-module_blurred__Ax4cu{opacity:.3}.conversion-funnel-chart-module_step-header__bUrZ0{margin-bottom:24px}.conversion-funnel-chart-module_step-label__SCy8F{color:#757575;display:block;font-family:var(--step-font-family,"SF Pro");font-size:12px;font-style:normal;font-weight:400;line-height:16px;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis}.conversion-funnel-chart-module_step-rate__A0irB{color:#1e1e1e;display:block;font-family:var(--step-font-family,"SF Pro");font-size:13px;font-style:normal;font-weight:500;line-height:20px;margin:0}.conversion-funnel-chart-module_bar-container__5Dl5-{align-items:flex-end;background-color:var(--light-background-color,rgba(79,70,229,.08));border-radius:4px;cursor:pointer;display:flex;flex:1;position:relative;transition:all .2s ease}.conversion-funnel-chart-module_bar-container__5Dl5-.conversion-funnel-chart-module_selected__W40FY{background-color:var(--light-background-color,rgba(79,70,229,.15))}.conversion-funnel-chart-module_bar-container__5Dl5-.conversion-funnel-chart-module_disabled__Reovk{cursor:pointer}.conversion-funnel-chart-module_funnel-bar__tG5m3{background-color:var(--primary-color,#4f46e5);border-radius:4px 4px 0 0;min-height:4px;transition:all .3s ease;width:100%}.conversion-funnel-chart-module_funnel-bar__tG5m3.conversion-funnel-chart-module_selected__W40FY{box-shadow:0 4px 16px rgba(0,0,0,.2);filter:brightness(1.1)}.conversion-funnel-chart-module_tooltip-wrapper__NohPt{align-items:flex-start;background:var(--black-white-white,#fff);border-bottom:1px solid var(--Gray-Gray-5,#dcdcde);border-radius:4px!important;box-shadow:0 1px 3px 0 rgba(0,0,0,.15),0 3px 9px 0 rgba(0,0,0,.12)!important;display:inline-flex;flex-direction:column;gap:4px;justify-content:center;padding:12px!important}.conversion-funnel-chart-module_tooltip-title__hjZr3{color:#1e1e1e;font-family:SF Pro,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.conversion-funnel-chart-module_tooltip-content__ocwAP{color:#1e1e1e;font-family:SF Pro,sans-serif;font-size:13px;font-style:normal;font-weight:500;line-height:20px}.conversion-funnel-chart-module_empty-state__9c0ps{color:#6b7280;font-size:16px;padding:48px 24px;text-align:center}.base-legend-module_legend--horizontal__AELBv{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.base-legend-module_legend--vertical__fX8uQ{display:flex;flex-direction:column;gap:8px}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-start__DEe0w{align-items:flex-start}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-center__WBKF9{align-items:center}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-end__JfwMn{align-items:flex-end}.base-legend-module_legend--position-top__8Y73K{position:relative}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-start__DEe0w{justify-content:flex-start}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-center__WBKF9{justify-content:center}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-end__JfwMn{justify-content:flex-end}.base-legend-module_legend--position-bottom__TVM-I{position:relative}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-start__DEe0w{justify-content:flex-start}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-center__WBKF9{justify-content:center}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-end__JfwMn{justify-content:flex-end}.base-legend-module_legend-item__Vflwq{align-items:center;display:flex;font-size:.875rem}.base-legend-module_legend-item-label__2H65K{align-items:center;display:flex;gap:.5rem}.base-legend-module_legend-item-value__DTZlT{font-weight:500}.base-tooltip-module_tooltip__OfX6n{background-color:rgba(0,0,0,.85);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:#fff;font-size:14px;padding:.5rem;pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.bar-chart-module_bar-chart__lmYNi{display:flex;flex-direction:column}.bar-chart-module_bar-chart__lmYNi svg{overflow:visible}.bar-chart-module_bar-chart-legend__vgKKq{margin-top:1rem}
+.base-legend-module_legend--horizontal__AELBv{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.base-legend-module_legend--vertical__fX8uQ{display:flex;flex-direction:column;gap:8px}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-start__DEe0w{align-items:flex-start}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-center__WBKF9{align-items:center}.base-legend-module_legend--vertical__fX8uQ.base-legend-module_legend--alignment-end__JfwMn{align-items:flex-end}.base-legend-module_legend--position-top__8Y73K{position:relative}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-start__DEe0w{justify-content:flex-start}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-center__WBKF9{justify-content:center}.base-legend-module_legend--position-top__8Y73K.base-legend-module_legend--alignment-end__JfwMn{justify-content:flex-end}.base-legend-module_legend--position-bottom__TVM-I{position:relative}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-start__DEe0w{justify-content:flex-start}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-center__WBKF9{justify-content:center}.base-legend-module_legend--position-bottom__TVM-I.base-legend-module_legend--alignment-end__JfwMn{justify-content:flex-end}.base-legend-module_legend-item__Vflwq{align-items:center;display:flex;font-size:.875rem}.base-legend-module_legend-item-label__2H65K{align-items:center;display:flex;gap:.5rem}.base-legend-module_legend-item-value__DTZlT{font-weight:500}.base-tooltip-module_tooltip__OfX6n{background-color:rgba(0,0,0,.85);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:#fff;font-size:14px;padding:.5rem;pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.bar-chart-module_bar-chart__lmYNi{display:flex;flex-direction:column}.bar-chart-module_bar-chart__lmYNi svg{overflow:visible}.bar-chart-module_bar-chart-legend__vgKKq{margin-top:1rem}.line-chart-module_line-chart__ITM3d{display:flex;flex-direction:column}.line-chart-module_line-chart__ITM3d svg{overflow:visible}.line-chart-module_line-chart__annotation-label-popover__TqNZk,.line-chart-module_line-chart__tooltip__aqcme{background:#fff;padding:.5rem}.line-chart-module_line-chart__tooltip-date__4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module_line-chart__tooltip-row__6A37G{align-items:center;display:flex;justify-content:space-between;padding:4px 0}.line-chart-module_line-chart__tooltip-label__IvnFF{font-weight:500;padding-right:1rem}.line-chart-module_line-chart__annotations-overlay__4nR2p{left:0;overflow:visible;pointer-events:none;position:absolute;top:0}.line-chart-module_line-chart__annotation-label__OmgiT{pointer-events:auto}.line-chart-module_line-chart__annotation-label-trigger-button__mcIb3{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;pointer-events:auto}.line-chart-module_line-chart__annotation-label-popover__TqNZk{background:#fff;border:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);font-size:14px;margin:.5rem;min-width:125px;position:fixed;visibility:hidden}.line-chart-module_line-chart__annotation-label-popover--visible__dE0cV{visibility:visible}.line-chart-module_line-chart__annotation-label-popover--safari__i3NHT{margin:auto;position:static}.line-chart-module_line-chart__annotation-label-popover-header__Owypo{align-items:start;display:flex;flex-direction:row;justify-content:space-between}.line-chart-module_line-chart__annotation-label-popover-content__vtgQt{padding:.5rem}.line-chart-module_line-chart__annotation-label-popover-close-button__i8KUc{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}.visx-tooltip-glyph svg{height:10px;width:10px}.pie-chart-module_pie-chart__R12Vh{display:flex;flex-direction:column;overflow:hidden}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9{display:flex;flex-direction:column;text-align:center}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_label__nPqOg{font-size:16px;font-weight:600;margin-bottom:0}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_note__LpBZQ{font-size:14px;margin-top:0}.leaderboard-chart-module_leaderboardChart__zxakP{transition:opacity .3s ease-in-out}.leaderboard-chart-module_leaderboardChart__zxakP.leaderboard-chart-module_loading__-AGv-{opacity:.5}.leaderboard-chart-module_barWithLabelContainer__9RE0U{align-items:center;display:grid;grid-template-columns:1fr;isolation:isolate;row-gap:6px}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5{grid-template:"overlap" 1fr/1fr}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5>*{grid-area:overlap}.leaderboard-chart-module_barWithLabelContainer__9RE0U.leaderboard-chart-module_is-overlay__Fqdi5 .leaderboard-chart-module_label__7ZUu0{padding-left:8px}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_bar__CnJvg{background-color:var(--bar-color,#3858e9);border-radius:var(--bar-border,9999px);height:100%;min-height:6px;transition:width .3s ease-in-out;z-index:-1}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_primaryBar__iybII{--bar-color:var(--primary-color,#3858e9)}.leaderboard-chart-module_barWithLabelContainer__9RE0U .leaderboard-chart-module_secondaryBar__A7tLz{--bar-color:var(--secondary-color,#66bdff)}.leaderboard-chart-module_valueContainer__ZlLh4{display:flex;gap:4px;justify-content:flex-end}.leaderboard-chart-module_overlayLabel__pRqSh{align-items:center}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}.conversion-funnel-chart-module_conversionFunnelChart__-9Qsb{font-family:var(--funnel-font-family,"SF Pro Text")}.conversion-funnel-chart-module_conversionFunnelChart__-9Qsb.conversion-funnel-chart-module_loading__Kw-iZ{opacity:.6;pointer-events:none}.conversion-funnel-chart-module_main-metric__8mIwV{align-items:baseline;display:flex;gap:8px;margin-bottom:24px}.conversion-funnel-chart-module_main-rate__D93Ub{color:#1e1e1e;font-size:18px}.conversion-funnel-chart-module_change-indicator__QWypV,.conversion-funnel-chart-module_main-rate__D93Ub{font-family:var(--funnel-font-family,"SF Pro Text");font-style:normal;font-weight:500;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis}.conversion-funnel-chart-module_change-indicator__QWypV{color:var(--change-indicator-color,#008a20);font-size:13px}.conversion-funnel-chart-module_funnel-container__RR7xa{align-items:flex-end;display:flex;gap:16px;height:200px;width:100%}.conversion-funnel-chart-module_funnel-step__VIVzt{display:flex;flex:1 1 0;flex-direction:column;height:100%;min-width:0;transition:all .3s ease}.conversion-funnel-chart-module_funnel-step__VIVzt.conversion-funnel-chart-module_blurred__Ax4cu{opacity:.3}.conversion-funnel-chart-module_step-header__bUrZ0{margin-bottom:24px}.conversion-funnel-chart-module_step-label__SCy8F{color:#757575;display:block;font-family:var(--step-font-family,"SF Pro");font-size:12px;font-style:normal;font-weight:400;line-height:16px;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis}.conversion-funnel-chart-module_step-rate__A0irB{color:#1e1e1e;display:block;font-family:var(--step-font-family,"SF Pro");font-size:13px;font-style:normal;font-weight:500;line-height:20px;margin:0}.conversion-funnel-chart-module_bar-container__5Dl5-{align-items:flex-end;background-color:var(--light-background-color,rgba(79,70,229,.08));border-radius:4px;cursor:pointer;display:flex;flex:1;position:relative;transition:all .2s ease}.conversion-funnel-chart-module_bar-container__5Dl5-.conversion-funnel-chart-module_selected__W40FY{background-color:var(--light-background-color,rgba(79,70,229,.15))}.conversion-funnel-chart-module_bar-container__5Dl5-.conversion-funnel-chart-module_disabled__Reovk{cursor:pointer}.conversion-funnel-chart-module_funnel-bar__tG5m3{background-color:var(--primary-color,#4f46e5);border-radius:4px 4px 0 0;min-height:4px;transition:all .3s ease;width:100%}.conversion-funnel-chart-module_funnel-bar__tG5m3.conversion-funnel-chart-module_selected__W40FY{box-shadow:0 4px 16px rgba(0,0,0,.2);filter:brightness(1.1)}.conversion-funnel-chart-module_tooltip-wrapper__NohPt{align-items:flex-start;background:var(--black-white-white,#fff);border-bottom:1px solid var(--Gray-Gray-5,#dcdcde);border-radius:4px!important;box-shadow:0 1px 3px 0 rgba(0,0,0,.15),0 3px 9px 0 rgba(0,0,0,.12)!important;display:inline-flex;flex-direction:column;gap:4px;justify-content:center;padding:12px!important}.conversion-funnel-chart-module_tooltip-title__hjZr3{color:#1e1e1e;font-family:SF Pro,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.conversion-funnel-chart-module_tooltip-content__ocwAP{color:#1e1e1e;font-family:SF Pro,sans-serif;font-size:13px;font-style:normal;font-weight:500;line-height:20px}.conversion-funnel-chart-module_empty-state__9c0ps{color:#6b7280;font-size:16px;padding:48px 24px;text-align:center}

package/dist/mjs/utils/format-percentage.js

@@ -0,0 +1,22 @@
+import { formatNumber } from '@automattic/number-formatters';
+
+/**
+ * Format a percentage value with smart decimal handling.
+ * Uses @automattic/number-formatters for consistent formatting.
+ * Removes unnecessary trailing zeros and caps at 2 decimal places.
+ *
+ * @param value - The percentage value (0-100 range)
+ * @return Formatted percentage string (e.g., "30%", "30.1%", "30.25%")
+ */
+const formatPercentage = (value) => {
+    // Use formatNumber with percentage style, but convert from 0-100 range to 0-1 range
+    return formatNumber(value / 100, {
+        numberFormatOptions: {
+            style: 'percent',
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2,
+        },
+    });
+};
+
+export { formatPercentage };

package/dist/types/components/pie-chart/pie-chart.d.ts

@@ -28,6 +28,10 @@ interface PieChartProps extends BaseChartProps<DataPointPercentage[]> {
      * A value between 0 and 1, where 0 means no corner radius.
      */
     cornerScale?: number;
+    /**
+     * Whether to show labels on pie segments. Defaults to true.
+     */
+    showLabels?: boolean;
     /**
      * Use the children prop to render additional elements on the chart.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.31.0",
+	"version": "0.32.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {