How to display X-axis value as legend in Angular Column Chart?

Description

This article demonstrates how to display X-axis values as legend items in an Angular Column Charts. This approach is useful when each column represents a unique category or data point and you want to reflect that directly in the legend.

Solution

To display X-axis values as legends, set the mode property of the legendSettings to “Point”. This configuration will treat each data point on the X-axis as a separate legend item.

Implementation

The following code snippet shows how to enable this feature in your Angular Column Chart.

app.component.ts

public legend: Object = {
       visible: true,
       mode: "Point",
       enableHighlight : true
}

app.component.html

<ejs-chart [legendSettings]="legend">
</ejs-chart>

Output

The chart will now display the X-axis category values (e.g., CHG2, CHG10, CHG14, CHG1) as individual legend items.

Live Demo

View Sample in Stackblitz