CODEWITHSUNDEEP
kendo-ui-angular2
Maniac_1979
Maniac_1979

Reputation: 979

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,

Upvotes: 0

Views: 1141

Answers (1)

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

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.

Upvotes: 1

Related Questions