100% stacked bar chart - show percentages as labels in the bar

[Karthik]

hi,

How do I display the auto generated percent value as label in the bars?

I have a bar chart with [stack]="{ type: '100%' }". I would like to display the percentage as label in the bar (like in attached pic).

I tried label component but getting the value displayed rather calculated percentage. 

<kendo-chart-series-item-labels format="{0:P}" position="center">

Here's the code:

https://stackblitz.com/edit/angular-ivy-n9xwdr?file=src%2Fapp%2Fapp.component.html

[Hetali]

Hello Karthik,

Thank you for sharing the details and the example.

In order to show the percentage as labels in the Kendo UI Column Chart, use the content input as seen below:

<kendo-chart [seriesColors]="['#f68928', '#00a4e7', '#85c441']">
  <kendo-chart-series>
    <kendo-chart-series-item
      *ngFor="let item of series"
      [data]="item.items"
      [name]="item.value"
      [stack]="{ type: '100%' }"
    >
      <kendo-chart-series-item-labels format="{0:c}" position="center" [content]="content">
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

public content = (e: SeriesLabelsContentArgs): string => {
  if (e.percentage) {
    return (Math.round(e.percentage*10000)/100).toString() + '%';
  } else {
    return "0%";
  }
}

In this updated StackBlitz example, I have replaced the label value with the label percentage in the Kendo UI Column Chart.

I hope this information helps.

Regards,
Hetali
Progress Telerik

[Karthik]

hi Hetali,

Thanks for the solution, it works great. But I just checked my project and it uses kendo-angular-charts 4.2.1 and angular 10.2.4. It looks like SeriesLabelsContentArgs is not available in kendo-angular-charts 4.2.1 as I am getting below compile error. Please let me know if there is an alternate solution?

'"@progress/kendo-angular-charts"' has no exported member named 'SeriesLabelsContentArgs'. Did you mean 'SeriesLabelsComponent'?

Looks like the SeriesLabelsComponent -> content is of type any in my kendo package.

Here's the angular 10/kendo 4 Stackblitz which shows error when you hover 'SeriesLabelsContentArgs ' but renders percentage, not sure how.

Regards
Karthik

[Hetali]

Hi Karthik,

Indeed, the SeriesLabelsContentArgs type was added in Charts package v7.1.0.

To use the content property with Charts v4.2.1, set the argument type to any as seen in this updated StackBlitz example.

Regards,
Hetali
Progress Telerik

[Karthik]

Thanks Hetali, that worked.

Regards
Karthik