Search code examples
kendo-ui-angular2

Dynamic legend for Kendo UI for Angular 2 charts

Does anybody know how to generate dynamic legends based an array? I can't find it in the examples / manual.

Any help would be really appreciated,

Please see my code below:

<kendo-chart >
        <kendo-chart-title text="Gender"></kendo-chart-title>
        <kendo-chart-legend position="top" labels="SearchStatistics.GenderStatistics[?].Index">
          </kendo-chart-legend>
        <kendo-chart-series>
            <kendo-chart-series-item type="pie" [data]="SearchStatistics.GenderStatistics">
            </kendo-chart-series-item>
        </kendo-chart-series>
    </kendo-chart>

Where GenderStatistics is an array that holds 2 properties, Index and Value.

Example:

0:
{Index: "M", Value: 3}
1:
{Index: "U", Value: 1}
2:
{Index: "F", Value: 2}

So the idea here would be to get 3 Legends, M, F and U.

Thank you,

Solution

  • The series field and categoryField properties should be set, in order to render the pie chart. The field property provides the value that will be shown in the pie chart. The categoryField provides the label.

    <kendo-chart-series-item type="pie"
    [data]="SearchStatistics.GenderStatistics"
    field="Value" categoryField="Index">
</kendo-chart-series-item>

    See this plunkr.