✨ (discrete bar) hide horizontal axis (#4371)

* ✨ (discrete bar) hide horizontal axis

* 🔨 remove relative mode from discrete bar chart configs

* 🤖 style: prettify code

db/migration/1735896576517-RemoveRelativeModeFromDiscreteBarCharts.ts

@@ -0,0 +1,21 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class RemoveRelativeModeFromDiscreteBarCharts1735896576517
+    implements MigrationInterface
+{
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`
+            -- sql
+            update chart_configs
+            set
+                patch = json_remove(patch, '$.stackMode'),
+                full = json_remove(full, '$.stackMode')
+            where
+                chartType = 'DiscreteBar'
+                and full ->> '$.stackMode' = 'relative';
+        `)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    public async down(): Promise<void> {}
+}

packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx

@@ -37,11 +37,7 @@ import {
     GRAPHER_AREA_OPACITY_DEFAULT,
     GRAPHER_FONT_SCALE_12,
 } from "../core/GrapherConstants"
-import {
-    HorizontalAxisComponent,
-    HorizontalAxisGridLines,
-    HorizontalAxisZeroLine,
-} from "../axis/AxisViews"
+import { HorizontalAxisZeroLine } from "../axis/AxisViews"
 import { NoDataModal } from "../noDataModal/NoDataModal"
 import { AxisConfig, AxisManager } from "../axis/AxisConfig"
 import { ColorSchemes } from "../color/ColorSchemes"
@@ -305,7 +301,6 @@ export class DiscreteBarChart
     @computed private get innerBounds(): Bounds {
         return this.boundsWithoutColorLegend
             .padLeft(Math.max(this.seriesLegendWidth, this.leftValueLabelWidth))
-            .padBottom(this.showHorizontalAxis ? this.yAxis.height : 0)
             .padRight(this.rightValueLabelWidth)
     }
 
@@ -350,10 +345,6 @@ export class DiscreteBarChart
         return this.barPlacements.map((b) => b.width)
     }
 
-    @computed private get showHorizontalAxis(): boolean | undefined {
-        return this.manager.isRelativeMode
-    }
-
     private d3Bars(): Selection<
         BaseType,
         unknown,
@@ -504,7 +495,7 @@ export class DiscreteBarChart
     }
 
     renderChartArea(): React.ReactElement {
-        const { manager, boundsWithoutColorLegend, yAxis, innerBounds } = this
+        const { manager, yAxis, innerBounds } = this
 
         const axisLineWidth = manager.isStaticAndSmall
             ? GRAPHER_AXIS_LINE_WIDTH_THICK
@@ -516,22 +507,6 @@ export class DiscreteBarChart
                 {this.showColorLegend && (
                     <HorizontalNumericColorLegend manager={this} />
                 )}
-                {this.showHorizontalAxis && (
-                    <>
-                        <HorizontalAxisComponent
-                            bounds={boundsWithoutColorLegend}
-                            axis={yAxis}
-                            preferredAxisPosition={innerBounds.bottom}
-                            labelColor={manager.secondaryColorInStaticCharts}
-                            tickMarkWidth={axisLineWidth}
-                        />
-                        <HorizontalAxisGridLines
-                            horizontalAxis={yAxis}
-                            bounds={innerBounds}
-                            strokeWidth={axisLineWidth}
-                        />
-                    </>
-                )}
                 {!this.isLogScale && (
                     <HorizontalAxisZeroLine
                         horizontalAxis={yAxis}