@automattic/charts 0.56.4 → 0.56.5

package/CHANGELOG.md

@@ -5,6 +5,10 @@ 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.56.5] - 2026-02-23
+### Changed
+- Add dynamic x‑axis margin in `LineChart` to prevent crowded/clipped tick labels. [#45815]
+
 ## [0.56.4] - 2026-02-19
 ### Changed
 - Build: strip data-testid attributes from production builds to reduce bundle size and keep the DOM cleaner. [#47185]
@@ -694,6 +698,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.56.5]: https://github.com/Automattic/charts/compare/v0.56.4...v0.56.5
 [0.56.4]: https://github.com/Automattic/charts/compare/v0.56.3...v0.56.4
 [0.56.3]: https://github.com/Automattic/charts/compare/v0.56.2...v0.56.3
 [0.56.2]: https://github.com/Automattic/charts/compare/v0.56.1...v0.56.2

package/dist/charts/bar-chart/index.cjs

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkCERFRCXDcjs = require('../../chunk-CERFRCXD.cjs');
+var _chunkIHESL7H5cjs = require('../../chunk-IHESL7H5.cjs');
 require('../../chunk-Y3NNQMAX.cjs');
 require('../../chunk-SH32YSZO.cjs');
 require('../../chunk-I5467ZJ5.cjs');
 require('../../chunk-7QDEU3KN.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.BarChart = _chunkCERFRCXDcjs.BarChartResponsive; exports.BarChartUnresponsive = _chunkCERFRCXDcjs.BarChart;
+exports.BarChart = _chunkIHESL7H5cjs.BarChartResponsive; exports.BarChartUnresponsive = _chunkIHESL7H5cjs.BarChart;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/bar-chart/index.js

@@ -1,12 +1,12 @@
 import {
   BarChart,
   BarChartResponsive
-} from "../../chunk-FZYJM5PN.js";
+} from "../../chunk-KXSLMOW5.js";
 import "../../chunk-BPYKWMI7.js";
 import "../../chunk-MEIVKY4K.js";
 import "../../chunk-SEKPIG5K.js";
 import "../../chunk-TYIH5LMV.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/charts/bar-list-chart/index.cjs

@@ -1,17 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunk5N77S5N3cjs = require('../../chunk-5N77S5N3.cjs');
-require('../../chunk-CERFRCXD.cjs');
+var _chunkQ6G3BGCLcjs = require('../../chunk-Q6G3BGCL.cjs');
+require('../../chunk-IHESL7H5.cjs');
 require('../../chunk-Y3NNQMAX.cjs');
 require('../../chunk-SH32YSZO.cjs');
 require('../../chunk-I5467ZJ5.cjs');
 require('../../chunk-7QDEU3KN.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.BarListChart = _chunk5N77S5N3cjs.BarListChartResponsive; exports.BarListChartUnresponsive = _chunk5N77S5N3cjs.BarListChart;
+exports.BarListChart = _chunkQ6G3BGCLcjs.BarListChartResponsive; exports.BarListChartUnresponsive = _chunkQ6G3BGCLcjs.BarListChart;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/bar-list-chart/index.js

@@ -1,13 +1,13 @@
 import {
   BarListChart,
   BarListChartResponsive
-} from "../../chunk-M7PRGJFE.js";
-import "../../chunk-FZYJM5PN.js";
+} from "../../chunk-AFWQR3SM.js";
+import "../../chunk-KXSLMOW5.js";
 import "../../chunk-BPYKWMI7.js";
 import "../../chunk-MEIVKY4K.js";
 import "../../chunk-SEKPIG5K.js";
 import "../../chunk-TYIH5LMV.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/charts/conversion-funnel-chart/index.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkKMYJJTSRcjs = require('../../chunk-KMYJJTSR.cjs');
+var _chunkXCXAWMJQcjs = require('../../chunk-XCXAWMJQ.cjs');
 require('../../chunk-SH32YSZO.cjs');
 require('../../chunk-I5467ZJ5.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
-exports.ConversionFunnelChart = _chunkKMYJJTSRcjs.ConversionFunnelChartWithProvider;
+exports.ConversionFunnelChart = _chunkXCXAWMJQcjs.ConversionFunnelChartWithProvider;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/conversion-funnel-chart/index.js

@@ -1,9 +1,9 @@
 import {
   ConversionFunnelChartWithProvider
-} from "../../chunk-EBDUXL5K.js";
+} from "../../chunk-X6GX4QUJ.js";
 import "../../chunk-MEIVKY4K.js";
 import "../../chunk-SEKPIG5K.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/charts/geo-chart/index.cjs

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkZXEFMKVPcjs = require('../../chunk-ZXEFMKVP.cjs');
+var _chunkNGHXTIUEcjs = require('../../chunk-NGHXTIUE.cjs');
 require('../../chunk-7QDEU3KN.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.GeoChart = _chunkZXEFMKVPcjs.GeoChartResponsive; exports.GeoChartUnresponsive = _chunkZXEFMKVPcjs.GeoChartWithProvider;
+exports.GeoChart = _chunkNGHXTIUEcjs.GeoChartResponsive; exports.GeoChartUnresponsive = _chunkNGHXTIUEcjs.GeoChartWithProvider;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/geo-chart/index.js

@@ -1,9 +1,9 @@
 import {
   GeoChartResponsive,
   GeoChartWithProvider
-} from "../../chunk-ZY4FXLMM.js";
+} from "../../chunk-PCOI2GT5.js";
 import "../../chunk-TYIH5LMV.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/charts/leaderboard-chart/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunkHNEG3EFJcjs = require('../../chunk-HNEG3EFJ.cjs');
+var _chunkFIFSYVN6cjs = require('../../chunk-FIFSYVN6.cjs');
 require('../../chunk-RCY6XLGU.cjs');
 require('../../chunk-I5467ZJ5.cjs');
 require('../../chunk-7QDEU3KN.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 
 
 var _chunkZVGEDXDPcjs = require('../../chunk-ZVGEDXDP.cjs');
@@ -16,5 +16,5 @@ require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.LeaderboardChart = _chunkHNEG3EFJcjs.LeaderboardChartResponsive; exports.LeaderboardChartUnresponsive = _chunkHNEG3EFJcjs.LeaderboardChart; exports.formatMetricValue = _chunkZVGEDXDPcjs.formatMetricValue; exports.useLeaderboardLegendItems = _chunkHNEG3EFJcjs.useLeaderboardLegendItems;
+exports.LeaderboardChart = _chunkFIFSYVN6cjs.LeaderboardChartResponsive; exports.LeaderboardChartUnresponsive = _chunkFIFSYVN6cjs.LeaderboardChart; exports.formatMetricValue = _chunkZVGEDXDPcjs.formatMetricValue; exports.useLeaderboardLegendItems = _chunkFIFSYVN6cjs.useLeaderboardLegendItems;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/leaderboard-chart/index.js

@@ -2,11 +2,11 @@ import {
   LeaderboardChart,
   LeaderboardChartResponsive,
   useLeaderboardLegendItems
-} from "../../chunk-PGJAZN2H.js";
+} from "../../chunk-DBY6C4O2.js";
 import "../../chunk-6CCZL2JJ.js";
 import "../../chunk-SEKPIG5K.js";
 import "../../chunk-TYIH5LMV.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import {
   formatMetricValue
 } from "../../chunk-TE63Y5PX.js";

package/dist/charts/line-chart/index.cjs

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunk66BXSWMWcjs = require('../../chunk-66BXSWMW.cjs');
+var _chunkFY325WQ4cjs = require('../../chunk-FY325WQ4.cjs');
 require('../../chunk-Y3NNQMAX.cjs');
 require('../../chunk-SH32YSZO.cjs');
 require('../../chunk-I5467ZJ5.cjs');
 require('../../chunk-7QDEU3KN.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.LineChart = _chunk66BXSWMWcjs.LineChartResponsive; exports.LineChartUnresponsive = _chunk66BXSWMWcjs.LineChart;
+exports.LineChart = _chunkFY325WQ4cjs.LineChartResponsive; exports.LineChartUnresponsive = _chunkFY325WQ4cjs.LineChart;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/line-chart/index.js

@@ -1,12 +1,12 @@
 import {
   LineChart,
   LineChartResponsive
-} from "../../chunk-R23BFDIW.js";
+} from "../../chunk-DLSUC7RN.js";
 import "../../chunk-BPYKWMI7.js";
 import "../../chunk-MEIVKY4K.js";
 import "../../chunk-SEKPIG5K.js";
 import "../../chunk-TYIH5LMV.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/charts/pie-chart/index.cjs

@@ -1,17 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunk4YYROZDJcjs = require('../../chunk-4YYROZDJ.cjs');
+var _chunkJL4ZKKZUcjs = require('../../chunk-JL4ZKKZU.cjs');
 require('../../chunk-7OZEQ5HE.cjs');
 require('../../chunk-2A34OA5O.cjs');
 require('../../chunk-RCY6XLGU.cjs');
 require('../../chunk-Y3NNQMAX.cjs');
 require('../../chunk-7QDEU3KN.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.PieChart = _chunk4YYROZDJcjs.PieChartResponsive; exports.PieChartUnresponsive = _chunk4YYROZDJcjs.PieChart;
+exports.PieChart = _chunkJL4ZKKZUcjs.PieChartResponsive; exports.PieChartUnresponsive = _chunkJL4ZKKZUcjs.PieChart;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/pie-chart/index.js

@@ -1,13 +1,13 @@
 import {
   PieChart,
   PieChartResponsive
-} from "../../chunk-KKPZ4MVF.js";
+} from "../../chunk-LT4YOIMM.js";
 import "../../chunk-NFRB2POF.js";
 import "../../chunk-KXRWNFQJ.js";
 import "../../chunk-6CCZL2JJ.js";
 import "../../chunk-BPYKWMI7.js";
 import "../../chunk-TYIH5LMV.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/charts/pie-semi-circle-chart/index.cjs

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkRSYD434Gcjs = require('../../chunk-RSYD434G.cjs');
+var _chunkTKPK4RFScjs = require('../../chunk-TKPK4RFS.cjs');
 require('../../chunk-2A34OA5O.cjs');
 require('../../chunk-RCY6XLGU.cjs');
 require('../../chunk-Y3NNQMAX.cjs');
 require('../../chunk-7QDEU3KN.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.PieSemiCircleChart = _chunkRSYD434Gcjs.PieSemiCircleChartResponsive; exports.PieSemiCircleChartUnresponsive = _chunkRSYD434Gcjs.PieSemiCircleChart;
+exports.PieSemiCircleChart = _chunkTKPK4RFScjs.PieSemiCircleChartResponsive; exports.PieSemiCircleChartUnresponsive = _chunkTKPK4RFScjs.PieSemiCircleChart;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/pie-semi-circle-chart/index.js

@@ -1,12 +1,12 @@
 import {
   PieSemiCircleChart,
   PieSemiCircleChartResponsive
-} from "../../chunk-CMHPXSCI.js";
+} from "../../chunk-7TQSPLIN.js";
 import "../../chunk-KXRWNFQJ.js";
 import "../../chunk-6CCZL2JJ.js";
 import "../../chunk-BPYKWMI7.js";
 import "../../chunk-TYIH5LMV.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/charts/sparkline/index.cjs

@@ -1,17 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkGBDFC74Ucjs = require('../../chunk-GBDFC74U.cjs');
-require('../../chunk-66BXSWMW.cjs');
+var _chunkLTPJPIDPcjs = require('../../chunk-LTPJPIDP.cjs');
+require('../../chunk-FY325WQ4.cjs');
 require('../../chunk-Y3NNQMAX.cjs');
 require('../../chunk-SH32YSZO.cjs');
 require('../../chunk-I5467ZJ5.cjs');
 require('../../chunk-7QDEU3KN.cjs');
-require('../../chunk-LSV7F26B.cjs');
+require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.Sparkline = _chunkGBDFC74Ucjs.Sparkline; exports.SparklineUnresponsive = _chunkGBDFC74Ucjs.SparklineUnresponsive;
+exports.Sparkline = _chunkLTPJPIDPcjs.Sparkline; exports.SparklineUnresponsive = _chunkLTPJPIDPcjs.SparklineUnresponsive;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/sparkline/index.js

@@ -1,13 +1,13 @@
 import {
   Sparkline,
   SparklineUnresponsive
-} from "../../chunk-WMWAUOQ4.js";
-import "../../chunk-R23BFDIW.js";
+} from "../../chunk-KHRPRH4V.js";
+import "../../chunk-DLSUC7RN.js";
 import "../../chunk-BPYKWMI7.js";
 import "../../chunk-MEIVKY4K.js";
 import "../../chunk-SEKPIG5K.js";
 import "../../chunk-TYIH5LMV.js";
-import "../../chunk-AWNCAKZY.js";
+import "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/{chunk-AWNCAKZY.js → chunk-32ESS4MV.js}

@@ -584,6 +584,33 @@ var useChartDataTransform = (data) => {
 // src/hooks/use-chart-margin.tsx
 import { createScale, getTicks } from "@visx/scale";
 import { useMemo as useMemo5 } from "react";
+var DEFAULT_MARGIN_TOP = 10;
+var DEFAULT_MARGIN_RIGHT = 20;
+var DEFAULT_MARGIN_BOTTOM = 20;
+var DEFAULT_MARGIN_LEFT = 20;
+var DEFAULT_BOTTOM_FOR_TOP_AXIS = 10;
+var DEFAULT_FONT_SIZE = 12;
+var DEFAULT_TICK_LENGTH = 8;
+var DEFAULT_Y_TICK_WIDTH = 40;
+var resolveFontSize = (val) => {
+  if (typeof val === "number" && !isNaN(val)) {
+    return val;
+  }
+  if (typeof val === "string") {
+    const parsed = parseFloat(val);
+    return isNaN(parsed) ? void 0 : parsed;
+  }
+  return void 0;
+};
+var getXAxisLabelMetrics = (theme, orientation) => {
+  const xAxisStyles = orientation === "top" ? theme.axisStyles?.x?.top : theme.axisStyles?.x?.bottom;
+  const fontSize = resolveFontSize(xAxisStyles?.axisLabel?.fontSize) || resolveFontSize(theme.svgLabelSmall?.fontSize) || DEFAULT_FONT_SIZE;
+  const tickLength = xAxisStyles?.tickLength ?? DEFAULT_TICK_LENGTH;
+  return {
+    fontSize,
+    tickLength
+  };
+};
 var useChartMargin = (height, options, data, theme, horizontal = false) => {
   const yTicks = useMemo5(() => {
     const allDataPoints = data.flatMap((series) => series.data);
@@ -601,24 +628,31 @@ var useChartMargin = (height, options, data, theme, horizontal = false) => {
   }, [options, data, height, horizontal]);
   return useMemo5(() => {
     const defaultMargin = {
-      top: 10,
-      right: 20,
-      bottom: 20,
-      left: 20
+      top: DEFAULT_MARGIN_TOP,
+      right: DEFAULT_MARGIN_RIGHT,
+      bottom: DEFAULT_MARGIN_BOTTOM,
+      left: DEFAULT_MARGIN_LEFT
     };
-    const defaultTickWidth = 40;
     const yAxisOrientation = options.axis?.y?.orientation;
     const yAxisStyles = yAxisOrientation === "right" ? theme.axisStyles.y.right : theme.axisStyles.y.left;
     const yTickWidth = getLongestTickWidth(yTicks, options.axis?.y?.tickFormat, yAxisStyles.axisLabel);
-    const yMarginValue = (yTickWidth ?? defaultTickWidth) + (yAxisStyles?.tickLength ?? 0);
+    const yMarginValue = (yTickWidth ?? DEFAULT_Y_TICK_WIDTH) + (yAxisStyles?.tickLength ?? 0);
     if (yAxisOrientation === "right") {
       defaultMargin.right = yMarginValue;
     } else {
       defaultMargin.left = yMarginValue;
     }
-    if (options.axis?.x?.orientation === "top") {
-      defaultMargin.top = 20;
-      defaultMargin.bottom = 10;
+    const xOrientation = options.axis?.x?.orientation === "top" ? "top" : "bottom";
+    const {
+      fontSize,
+      tickLength
+    } = getXAxisLabelMetrics(theme, xOrientation);
+    const computedXMargin = fontSize + tickLength;
+    if (xOrientation === "top") {
+      defaultMargin.top = Math.max(defaultMargin.top, computedXMargin);
+      defaultMargin.bottom = DEFAULT_BOTTOM_FOR_TOP_AXIS;
+    } else {
+      defaultMargin.bottom = Math.max(defaultMargin.bottom, computedXMargin);
     }
     return defaultMargin;
   }, [options, theme, yTicks]);
@@ -1195,4 +1229,4 @@ export {
   Legend,
   useChartLegendItems
 };
-//# sourceMappingURL=chunk-AWNCAKZY.js.map
+//# sourceMappingURL=chunk-32ESS4MV.js.map