dataItem returning undefined after refreshing or redrawing chart (custom tooltip)

[John]

We are trying to set specific date returns and reload the charts. Everything is working except that when the we call the chart.refresh or chart.redraw functions, the dataItem specified in the tooltip template is returning undefined. Would appreciate any help.

function updateDateRange(timelabel) {
  var prevDateRange = timelabel.text();

  var dateRange = new Date();

  switch (prevDateRange) {
    case "7 days":
      timelabel.text("30 days");
      dateRange.setDate(dateRange.getDate() - 30);
      break;
    case "30 days":
      timelabel.text("60 days");
      dateRange.setDate(dateRange.getDate() - 60);
      break;
    case "60 days":
      timelabel.text("90 days");
      dateRange.setDate(dateRange.getDate() - 90);
      break;
    case "90 days":
      timelabel.text("7 days");
      dateRange.setDate(dateRange.getDate() - 7);
      break;
  }

  var chart = timelabel.siblings(".widgetchart").data("kendoChart");

  chart.options.categoryAxis.min = dateRange;
  /* Note: For some reason, if the min value of the categoryAxis is set to a low enough  value (in my tests, less than 10 days from the current date), it rewrites the dataItem value in the tooltip template, causing it to throw a few undefined where dataItem properties are being accessed. Modifying other properties of the kendoChart data object does not cause it to break. */
  chart.redraw();
}

$("#" + id).kendoChart({
theme: "metroblack",
//autoBind: false,
dataSource: {
transport: {
read: {
url: url,
dataType: jsontype
}
},

schema: {
data: function(response) {
var data = response.data;

//remapping of data to match format
for (var i=0; i < data.length; i++) {
var item = data[i];
item.date = item.date;
item.value = item.engagement;
item.retweets = item.retweet_count;
item.replies = item.reply_count;
item.display = item.group_name;
}

return data;
},
model: {
fields: {
date: {
type: "date",
}
}
}
}
},
chartArea: {
opacity: 0
},
legend: {
position: "custom",
offsetX: $("#" + id).fromRight(100),
offsetY: 20,
},
series: [{
type: "line",
field: "value",
markers: {
border: {
width: 0
},
visible: true,
},
width: 2,
missingValues: "interpolate"
}],
dataBound: fillPoints,
categoryAxis: {
min: new Date().setDate(new Date().getDate() - 7),
baseUnitStep: "auto",
field: "date",
},
valueAxis: {
labels: {
format: "N0",
},
},
tooltip: {
visible: true,
// This item works the first time but every refresh, the dataItem is "undefined"
template: "<div style='text-align:center'>Retweets: #= dataItem.retweets #<br>Engagement: #= value.addCommas() #<br>#= category.toString('M/d') #</div>"
},
});

[Hristo Germanov]

Hi John,

Could you please send me a running sample project(or an jsbin/jsfiddle) reproducing this issue? Thus I will give all my best to find a quick solution of your requirements.

All the best,
Hristo Germanov
the Telerik team