diff --git a/api/charts.api.md b/api/charts.api.md
index 067efa733c..6eaa12c754 100644
--- a/api/charts.api.md
+++ b/api/charts.api.md
@@ -868,6 +868,7 @@ export interface HeatmapConfig {
     xAxisLabel: Font & {
         name: string;
         fontSize: Pixels;
+        width: Pixels | 'auto';
         fill: string;
         align: TextAlign;
         baseline: TextBaseline;
@@ -1889,8 +1890,8 @@ export type YDomainRange = YDomainBase & DomainRange;
 // Warnings were encountered during analysis:
 //
 // src/chart_types/heatmap/layout/types/config_types.ts:28:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:59:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:60:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
+// src/chart_types/heatmap/layout/types/config_types.ts:60:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
+// src/chart_types/heatmap/layout/types/config_types.ts:61:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:126:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:127:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/specs/index.ts:48:13 - (ae-forgotten-export) The symbol "NodeColorAccessor" needs to be exported by the entry point index.d.ts
diff --git a/src/chart_types/heatmap/layout/config/config.ts b/src/chart_types/heatmap/layout/config/config.ts
index a8fd7f6075..59987baf26 100644
--- a/src/chart_types/heatmap/layout/config/config.ts
+++ b/src/chart_types/heatmap/layout/config/config.ts
@@ -50,6 +50,7 @@ export const config: Config = {
   xAxisLabel: {
     name: 'X Value',
     visible: true,
+    width: 'auto',
     fill: 'black',
     fontSize: 12,
     fontFamily: 'Sans-Serif',
diff --git a/src/chart_types/heatmap/layout/types/config_types.ts b/src/chart_types/heatmap/layout/types/config_types.ts
index 2bfea11f19..001f89dbf6 100644
--- a/src/chart_types/heatmap/layout/types/config_types.ts
+++ b/src/chart_types/heatmap/layout/types/config_types.ts
@@ -55,6 +55,7 @@ export interface Config {
   xAxisLabel: Font & {
     name: string;
     fontSize: Pixels;
+    width: Pixels | 'auto';
     fill: string;
     align: TextAlign;
     baseline: TextBaseline;
diff --git a/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts b/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts
index 61c734f249..8b6e900943 100644
--- a/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts
+++ b/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts
@@ -32,10 +32,14 @@ import { getHeatmapTableSelector } from './get_heatmap_table';
  */
 export const getXAxisRightOverflow = createCachedSelector(
   [getHeatmapConfigSelector, getHeatmapTableSelector],
-  ({ xAxisLabel: { fontSize, fontFamily, padding, formatter }, timeZone }, { xDomain }): number => {
+  ({ xAxisLabel: { fontSize, fontFamily, padding, formatter, width }, timeZone }, { xDomain }): number => {
     if (xDomain.scaleType !== ScaleType.Time) {
       return 0;
     }
+    if (typeof width === 'number') {
+      return width / 2;
+    }
+
     const timeScale = new ScaleContinuous(
       {
         type: ScaleType.Time,