Tooltip using a dataItem which is an array

[Jurgen]

I'm developing a stacked chart in Kendo UI. The datasource provides objects which have properties and 2 nested objects. 1 of these nested objects provides the data for the chart. The other nested object provides numbers I need to show in the Tooltip. I set the Tooltip Template like this:

    .Template("#= value #% - N:#= dataItem.numbers #"))

where value references the first nested object with data (are percentages). This works fine. dataItem.numbers references the second nested object (with corresponding numbers). I would like to show the corresponding numbers. But I always get "undefined" as result.

How can I change this code so the corresponding numbers are shown in the Tooltip?

        .Series(series =>
        {
            foreach (var s in Model.StapeltrendSerie)
            {
                if (s.type.Equals("column"))
                {
                    series.Column(s.data)
                          .Name(s.name)
                          .Axis("Percentage")
                          .Stack(true)
                          .Color(s.color)
                          .Tooltip(tooltip => tooltip
                                    .Visible(true)
                                    .Template("#= value #% - N:#= dataItem.numbers #"))
                          .Labels(labels => labels.Visible(false))
                          .GroupNameTemplate("#= group.value # (#= series.name #)");
                }else if (s.type.Equals("line") && Model.TrendlijnWeergeven)
                {
                    series.Line(s.data).Markers(m => m.Type(ChartMarkerShape.Circle))
                          .Name(s.name)
                          .Axis("Score")
                          .Stack(false)
                          .Color("#"+Model.TrendlijnKleur)
                          .Tooltip(tooltip => tooltip.Visible(false))
                          .Labels(labels => labels.Visible(true))
                          .GroupNameTemplate("#= group.value # (#= series.name #)");
                }
            
            }
        })

This is the object represented by s

    public class StapeltrendSerieModel
    {
        public decimal[] data { get; set; }
        public int[] numbers { get; set; }
        public string type { get; set; }
        public bool stack { get; set; }
        public string name { get; set; }
        public string color { get; set; }
        public string axis { get; set; }
        public string category { get; set; }
        public int order { get; set; }
    }

s.data is an array of decimals. (percentages) s.numbers contains the corresponding numbers (as integers) And I was hoping dataItem.numbers would do the trick. But of course DataItem refers to an entry of the s.data array. How can I address the s.numbers value?

[T. Tsonev]

Hi,

Currently the series do not receive a reference to the full data item. Instead, they only get the items in data array with no reference to the parent.
The traditional way to get around this is to create a view model like this:
int Value { get; set; }
int[] Numbers { get; set; }

This is not terribly efficient as it will require copying the number array for each data point.

Another approach would be to serialize the numbers independently:
<script>
    var seriesNumbers = {};
    @foreach (var s in Model.StapeltrendSerie)
    {
        <text>
        seriesNumbers[s.name] = @Json.Encode(s.numbers);
        </text>
    }
</script>

The seriesNumbers variable can then be accessed from the tooltip as seriesNumbers[series.name]
I hope this helps.

Regards,
T. Tsonev
Telerik