feat(chart): add option to display column titles for landscape bar ch…

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 {

src/components/chart/chart.tsx

@@ -16,6 +16,7 @@
  * @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 @@
     @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,21 +146,30 @@
             return <limel-spinner limeBranded={false} />;
         }
 
-        return (
+        return [
             <table
                 aria-busy={this.loading ? 'true' : 'false'}
                 aria-live="polite"
                 style={{
                     '--limel-chart-number-of-items':
                         this.items.length.toString(),
                 }}
             >
                 {this.renderCaption()}
                 {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 @@
                 >
                     <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 @@
         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,14 +360,24 @@
             tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;
         }
 
-        return (
+        const tooltip = (
             <limel-tooltip
                 {...tooltipProps}
                 openDirection={
                     this.orientation === 'portrait' ? 'right' : 'top'
                 }
             />
         );
+
+        if (
+            this.showColumnTitles &&
+            this.orientation === 'landscape' &&
+            this.type === 'bar'
+        ) {
+            return [<div class="column-title">{text}</div>, tooltip];
+        }
+
+        return tooltip;
     }
 
     private calculateRange() {

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;
+    };
+}

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

src/components/chart/partial-styles/_bar-gantt-dot.scss

@@ -5,6 +5,7 @@
     }
 
     .item {
+        position: relative;
         display: flex;
         align-items: center;
         justify-content: center;