Kendo angular 2 line chart, need index of category axis inside series item

Question

I'm creating a kendo ui angular 2 line chart that displays a number of purchases per account on a specific date. The incoming data is in the following form:

lineData = {
    categories: [ 11/27/2016, 11/28/2016, 11/29/2016, 11/30/2016 ], // strings 
    series: [
        {
            name: 'Account1',
            totals: [ 0, 2, 0, 0 ],
            sums: [ 0, 3, 0, 0 ]
        },
        {
            name: 'Account2',
            totals: [ 0, 0, 2, 2 ],
            sums: [ 0, 0, 3, 5 ]
        },
        {
            name: 'Account3',
            totals: [ 1, 0, 0, 0 ],
            sums: [ 2.5, 0, 0, 0 ]
        }
    ]
}

Each position of the totals and sums arrays corresponds to a position in the categories field. In my template, I loop over the series with ngFor, which renders a graph that I'm looking for.

My issue comes when laying out a tooltip for the series items. The default tooltip displays the total value (the value denoted on the y-axis). Each of the values in the series totals and sums arrays corresponds to the category position. I'd like to get the index of the current category position so I can display the total and sum in the tooltip. My current graph layout:

<kendo-chart (legendItemClick)="eventHandler($event)">
    <kendo-chart-area [height]="300"></kendo-chart-area>
    <kendo-chart-legend position="right"></kendo-chart-legend>
    <kendo-chart-series >
        <kendo-chart-series-item *ngFor="let item of lineData.series; let i     = index" type="line" [data]="item.totals" [name]="item.name | uppercase">
            <kendo-chart-series-item-tooltip format="{0}">
                <!--<template kendoSeriesTooltipTemplate let-value="item">
                    <span>Items: {{item.totals[CATEGORY INDEX NEEDED HERE]}}</span>
                    <span>Total: {{item.sums[CATEGORY INDEX NEEDED HERE] |     currency:'USD':true:'1.2-2'}}</span>
                </template>-->
            </kendo-chart-series-item-tooltip>
        </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-series-item-labels [visible]="true"></kendo-chart-series-    item-labels>
    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="lineData.categories" [name]="dateAxis"></kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <kendo-chart-value-axis>
        <kendo-chart-value-axis-item>
            <kendo-chart-value-axis-item-labels [step]="1"></kendo-chart-    value-axis-item-labels>
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
</kendo-chart>

I've tried many different configurations of the categoryField and categoryAxis properties on the series items, and tried using ngFor over the categories for kendo-chart-category-axis-item-labels. Assigning [categoryField]=lineData.categories only renders the first point on the graph, and renders that point incorrectly. The documentation is somewhat lean, due to Kendo UI for Angular 2 still being in development. I realize that my data may not be in the ideal form, and I'm open to any approach, even if it requires changing my data model. All guidance will be greatly appreciated.

Documentation links:

ChartComponent

SeriesComponent

CategoryAxisComponent

CategoryAxisItemComponent

SeriesItemComponent

Tsvetomir Tsonev Tsvetomir Tsonev · Accepted Answer · 2016-12-17T10:20:52

Adding a category index to the tooltip template would definitely help here. Since this is not available now, I'd recommend transforming the data into an array of objects that fully describe each data point:

[{
    date: new Date('2016-11-27'), name: 'Account 1', sum: 0, total: 0
}, {
    date: new Date('2016-11-27'), name: 'Account 2', sum: 0, total: 0
}, {
    date: new Date('2016-11-27'), name: 'Account 3', sum: 2.5, total: 1
},
...
]

This also requires that we group data on the name field. With that done, we can access the fields directly:

<kendo-chart-series-item-tooltip>
  <template kendoSeriesTooltipTemplate let-dataItem="dataItem">
    <span>Items: {{dataItem.total}}</span>
    <span>Total: {{dataItem.sum | currency:'USD':true:'1.2-2'}}</span>
  </template>
</kendo-chart-series-item-tooltip>

You can see a complete demo in this plunkr.

Note that we can actually remove all data points that have only zeroes in them. The Chart can generate these for us if we set missingValues to zero. We're left with the following points that describe the full data set above:

[{
    date: new Date('2016-11-27'), name: 'Account 3', sum: 2.5, total: 1
}, {
    date: new Date('2016-11-28'), name: 'Account 1', sum: 2, total: 3
}, {
    date: new Date('2016-11-29'), name: 'Account 2', sum: 3, total: 2
}, {
    date: new Date('2016-11-30'), name: 'Account 2', sum: 5, total: 2
}]

Note that you no longer have to track indices. The Chart does this for you based on the date field. See the complete demo in this plunkr.

While developing the samples above I've noticed an issue - the tooltip will not display unless you specify format. I've logged this in our bug tracker.

The other thing I noticed is that the Tooltips help topic doesn't explain how to access the fields of the TooltipTemplatePoint. I'll add this info there as it's rather important.

Kendo angular 2 line chart, need index of category axis inside series item

1 Answers