diff --git a/src/components/chart/chart.scss b/src/components/chart/chart.scss
index 1708f15429..83329ffada 100644
--- a/src/components/chart/chart.scss
+++ b/src/components/chart/chart.scss
@@ -19,6 +19,9 @@ $default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));
     isolation: isolate;
 
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
     width: 100%;
     height: 100%;
     min-width: 0;
@@ -59,6 +62,13 @@ table {
     }
 }
 
+.column-title {
+    @include mixins.truncate-text;
+    position: absolute;
+    top: -1.5rem;
+    max-width: 100%;
+}
+
 *,
 *:before,
 *:after {
diff --git a/src/components/chart/chart.tsx b/src/components/chart/chart.tsx
index c84bbd2d8d..ea05b52c30 100644
--- a/src/components/chart/chart.tsx
+++ b/src/components/chart/chart.tsx
@@ -16,6 +16,7 @@ const DEFAULT_INCREMENT_SIZE = 10;
  * @exampleComponent limel-example-chart-orientation
  * @exampleComponent limel-example-chart-max-value
  * @exampleComponent limel-example-chart-type-bar
+ * @exampleComponent limel-example-chart-column-titles
  * @exampleComponent limel-example-chart-type-dot
  * @exampleComponent limel-example-chart-type-area
  * @exampleComponent limel-example-chart-type-line
@@ -111,6 +112,19 @@ export class Chart {
     @Prop({ reflect: true })
     public loading: boolean = false;
 
+    /**
+     * When set to `true`, displays column titles for bar charts.
+     * By default, column titles are not rendered.
+     */
+    @Prop({ reflect: true })
+    public showColumnTitles: boolean = false;
+
+    /**
+     * Label for the horizontal axis (X-axis).
+     */
+    @Prop({ reflect: true })
+    public xAxisLabel?: string;
+
     private range: {
         minValue: number;
         maxValue: number;
@@ -132,7 +146,7 @@ export class Chart {
             return <limel-spinner limeBranded={false} />;
         }
 
-        return (
+        return [
             <table
                 aria-busy={this.loading ? 'true' : 'false'}
                 aria-live="polite"
@@ -145,8 +159,17 @@ export class Chart {
                 {this.renderTableHeader()}
                 {this.renderAxises()}
                 <tbody class="chart">{this.renderItems()}</tbody>
-            </table>
-        );
+            </table>,
+            this.renderXAxisLabel(),
+        ];
+    }
+
+    private renderXAxisLabel() {
+        if (!this.xAxisLabel) {
+            return;
+        }
+
+        return <div>{this.xAxisLabel}</div>;
     }
 
     private renderCaption() {
@@ -237,7 +260,7 @@ export class Chart {
                 >
                     <th>{this.getItemText(item)}</th>
                     <td>{this.getFormattedValue(item)}</td>
-                    {this.renderTooltip(item, itemId, size)}
+                    {this.renderItemLabel(item, itemId, size)}
                 </tr>
             );
         });
@@ -322,7 +345,7 @@ export class Chart {
         return item.text;
     }
 
-    private renderTooltip(item: ChartItem, itemId: string, size: number) {
+    private renderItemLabel(item: ChartItem, itemId: string, size: number) {
         const text = this.getItemText(item);
         const PERCENT_DECIMAL = 2;
         const formattedValue = this.getFormattedValue(item);
@@ -337,7 +360,7 @@ export class Chart {
             tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;
         }
 
-        return (
+        const tooltip = (
             <limel-tooltip
                 {...tooltipProps}
                 openDirection={
@@ -345,6 +368,16 @@ export class Chart {
                 }
             />
         );
+
+        if (
+            this.showColumnTitles &&
+            this.orientation === 'landscape' &&
+            this.type === 'bar'
+        ) {
+            return [<div class="column-title">{text}</div>, tooltip];
+        }
+
+        return tooltip;
     }
 
     private calculateRange() {
diff --git a/src/components/chart/examples/chart-column-titles.tsx b/src/components/chart/examples/chart-column-titles.tsx
new file mode 100644
index 0000000000..9aa15b11cd
--- /dev/null
+++ b/src/components/chart/examples/chart-column-titles.tsx
@@ -0,0 +1,50 @@
+import { Component, h, Host, State } from '@stencil/core';
+import { chartItems } from './chart-items-bar';
+
+/**
+ * Bar chart with column titles
+ *
+ * By setting the `showColumnTitles` prop to `true`, you can display column titles
+ * for bar charts in landscape orientation. This is useful when you want to clearly
+ * label each bar with its category name directly in the chart, rather than relying
+ * on tooltips.
+ *
+ * When `showColumnTitles` is `false` (the default), the chart will use tooltips
+ * to display item information on hover instead.
+ */
+@Component({
+    tag: 'limel-example-chart-column-titles',
+    shadow: true,
+    styleUrl: 'chart-examples.scss',
+})
+export class ChartColumnTitlesExample {
+    @State()
+    private showColumnTitles = true;
+
+    public render() {
+        return (
+            <Host class="large">
+                <h4>Monthly Sales Performance</h4>
+                <limel-chart
+                    type="bar"
+                    items={chartItems}
+                    orientation="landscape"
+                    showColumnTitles={this.showColumnTitles}
+                    xAxisLabel="Months"
+                    maxValue={100}
+                />
+                <limel-example-controls>
+                    <limel-switch
+                        label="Show column titles"
+                        value={this.showColumnTitles}
+                        onChange={this.handleToggleChange}
+                    />
+                </limel-example-controls>
+            </Host>
+        );
+    }
+
+    private handleToggleChange = (event: CustomEvent<boolean>) => {
+        this.showColumnTitles = event.detail;
+    };
+}
diff --git a/src/components/chart/examples/chart-type-bar.tsx b/src/components/chart/examples/chart-type-bar.tsx
index eee223aece..ee46051d7b 100644
--- a/src/components/chart/examples/chart-type-bar.tsx
+++ b/src/components/chart/examples/chart-type-bar.tsx
@@ -50,6 +50,7 @@ export class ChartTypeBarExample {
                     items={chartItems}
                     orientation={this.orientation}
                     maxValue={this.maxValue}
+                    showColumnTitles={true}
                 />
                 <limel-example-controls>
                     <limel-select
diff --git a/src/components/chart/partial-styles/_bar-gantt-dot.scss b/src/components/chart/partial-styles/_bar-gantt-dot.scss
index 3577502fc8..cf4800e289 100644
--- a/src/components/chart/partial-styles/_bar-gantt-dot.scss
+++ b/src/components/chart/partial-styles/_bar-gantt-dot.scss
@@ -5,6 +5,7 @@
     }
 
     .item {
+        position: relative;
         display: flex;
         align-items: center;
         justify-content: center;