Kendo stacked bar chart tooltip with array

Hi everyone,

I’ve been working on a stacked bar chart on the age of vehicles. It shows the amount of vehicles with ages in categories. The categories are groups of ages (like 0 to 2 and 3 to 5) and the stacks are based on the ages within this category (which for 0 to 2 would be 0, 1 and 2) and the amount of vehicles with each age.

I want the tooltip to show the age of each stack and the amount of vehicles with this age. I can manage to show the amount of vehicles, but am having trouble showing the age (by which I mean the age of this specific part of the stack, not the category). I did put the ages into an array, which I then set as the name of the stack. I can put this array in the tooltip, but only need the specific age for the item I’m hovering on.

The code for my kendo Chart looks like this:

$("#ageGraph").kendoChart({
title: { text: "Leeftijd", color: "white" },
legend: { visible: false },
tooltip: { visible: true, template: "#: series.name #" },
chartArea: {
height: 500,
background: "#252730",
},
axisDefaults: {
majorGridLines: {visible: false}
},
valueAxis: {
title: { text: "Aantal voertuigen", font: "9pt sans-serif", position: "top" },
color:"white",
majorUnit: 100
},
categoryAxis: {
title: { text: "Leeftijd", font: "9pt sans-serif", position: "right" },
color:"white",
labels: { rotation: 90 },
categories: v_categories
},
seriesDefaults: {
type: "column",
overlay: { gradient: "none"},
opacity: 1,
width: 200,
gap: 0.2,
},
series: [
{
name : ["Jonger", (v_averageRounded - 7), (v_averageRounded - 4), (v_averageRounded - 1), (v_averageRounded + 2), (v_averageRounded + 5), "Ouder"],
stack: "Leeftijd",
data: [v_thirdLeftLowest, v_secLeftLowest, v_firstLeftLowest, v_middleLowest, v_firstRightLowest, v_secRightLowest, v_thirdRightLowest]
},
{
name : ["Jonger", (v_averageRounded - 6), (v_averageRounded - 3), v_averageRounded, (v_averageRounded + 3), (v_averageRounded + 6), "Ouder"],
stack: "Leeftijd",
data: [v_thirdLeftMiddle, v_secLeftMiddle, v_firstLeftMiddle, v_middleMiddle, v_firstRightMiddle, v_secRightMiddle, v_thirdRightMiddle]
},
{
name : ["Jonger", (v_averageRounded - 5), (v_averageRounded - 2), (v_averageRounded + 1), (v_averageRounded + 4), (v_averageRounded + 7), "Ouder"],
stack: "Leeftijd",
data: [v_thirdLeftHighest, v_secLeftHighest, v_firstLeftHighest, v_middleHighest, v_firstRightHighest, v_secRightHighest, v_thirdRightHighest]
},
],
seriesColors: ["#7CC6EF", "#4E9AD4", "#125078"],
});


The v_averageRounded variable is the rounded average age, which I use to calculate the categories. The v_thirdLeftLowest, v_secondLeftLowest etc are those calculated categories.

So my question is: how can I get the right array item from series.name to show in the tooltip?

Thanks in advance!
Famke

Continue reading...