Kendo Column Chart Column Totals

[Alan]

Hi, if we are using Kendo Chart (Angular I believe) on a new project and i need the developers to replicate the example wireframe column chart below.
I have been advised that they can't get the column totals to appear at the top of the columns. Is this possible and if so what do they need to do to get the column totals at the top of the columns using angular?

 

 

Any help would be appreciated.

Regards

Alan

 

[Hetali]

Hi Alan,

Thank you for sharing the details. 

Yes, it is possible to show the total of the stacked series at the top in the Kendo UI Column Charts. Please use the content property of the SeriesLabelsComponent in the last series to show the stackValue. For example:

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item type="column" [stack]="true" [data]="[1, 2, 3]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="column" [data]="[6, 4, 1]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="column" [data]="[3, 8, 9]">
      <kendo-chart-series-item-labels [content]="seriesLabel">
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

public seriesLabel = (e: SeriesLabelsContentArgs): string => {
  return '$' + e.stackValue;
}

This StackBlitz example demonstrates the above discussed approach.

Please give it a try and let me know if you have any further questions pertaining to the Kendo UI Stacked Column Charts.

Regards,
Hetali
Progress Telerik

[Alan]

Thanks Hetali,

This is exactly what I wanted.

 

Regards

 

Alan