Show series category names in a column chart [Kendo UI for Angular]

[Simon]

Hi,

 

I'm trying to figure out how to display the category name for each data series on a column chart (I'm trying to get to something like the attached picture).

For now I'm just hard coding up an example in an html template. and so far I have the following:

<kendo-chart [categoryAxis]="{ categories: ['Assets', 'Liabilities']}">
    <kendo-chart-title text="Balance Sheet" font="22pt Segoe UI">
    </kendo-chart-title>
    <kendo-chart-series-defaults type="column" [labels]="{ visible: true }">
    </kendo-chart-series-defaults>
    <kendo-chart-legend [visible]="false"></kendo-chart-legend>


    <kendo-chart-series>
        <kendo-chart-series-item [stack]="true" [gap]="0.5" [data]="[60000, 0]" [name]="'Current Assets'">
        </kendo-chart-series-item>
        <kendo-chart-series-item  [name]="'Capital & Reserves'" [data]="[0, 20000]">
        </kendo-chart-series-item>
        <kendo-chart-series-item  [name]="'Current Liabilities'" [data]="[0, 40000]" >
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

 

Looking at the docs (SeriesLabel) I think I can add more to the labels json object I'm configuring on line 4. But I'm struggling to get the syntax correct.

Does anyone have any suggestions?

 

[Daniel]

Hello,

You can use the content option for this purpose - example.

Regards,
Daniel
Telerik by Progress