I have charts which have dyanamic Series value text so text is getting crop.
$('#topStationsChart').kendoChart({
dataSource: topFiveStation.LstTopFiveDataItem,
chartArea: {
height: 370
},
title: {
text: selectedKPI + " by " + activeVariable,
visible: true,
},
legend: {
position: 'top'
},
seriesDefaults: {
type: "bar"
},
series: [{
//name: '',
data: totalVisit,
//type: 'column',
stack: false,
color: '#08889b'
}, {
field: 'HalfValueVariance',
//categoryField: 'TopChartVariable',
categoryField: 'TopVariableFullName', // ARME- 610
type: 'line',
width: 0,
tooltip: {
visible: true,
template: function (e) {
var value = e.value * 2;
var strcommsepvalue = CommasSperatedNumber(value);
var tooltipString = "";
var KPINameString = selectedKPI + ($(".customSwitch span.active").text() == "Percent" ? "(%)" : " ");
tooltipString += "<span style=\"text-align:center;display:inline-block;width:100%;\">";
tooltipString += (activeVariable == "Top 5 Stations" ? "Station" : activeVariable) + " : " + e.category + "</span>";
tooltipString += "<hr style=\"border-color:#ccc;margin: 5px 0;\" class=\"hrTooltps\">"
tooltipString += KPINameString + " : " + "<span style=\"float:right;display:inline-block;\">" + strcommsepvalue + "</span>";
return tooltipString;
},
border: { color: "08889b" },
autoHide: false
},
highlight: {
toggle: function (e) {
e.preventDefault();
var visual = e.visual;
var transform = null;
if (e.show) {
var center = visual.rect().center();
// Uniform 1.5x scale with the center as origin
transform = kendo.geometry.transform().scale(1.5, 1.5, center);
}
visual.transform(transform);
}
},
markers: {
size: 30,
visual: function (e) {
var src = kendo.format('/' + "{0}", e.dataItem.IconURL);
if (e.dataItem.IconURL == null || e.dataItem.IconURL == undefined || e.dataItem.IconURL == '') {
src = "/Content/Images/stationIcon_placeholder.png";
}
var image = new kendo.drawing.Image(src, e.rect);
return image;
}
}
}],
valueAxis: {
title: {
text: strVarValTitle
},
labels: {
//format: "{0}%"
},
line: {
visible: true
},
majorGridLines: {
visible: false
},
axisCrossingValue: 0,
visible: true
},
categoryAxis: {
line: {
visible: true
},
majorGridLines: {
visible: false
},
labels: {
template: "#=shortLabels(value)#",
rotation: "auto",
visual: adjustLabelsForTopStationChart
},
visible: true,
},
tooltip: {
visible: true,
template: function (e) {
var value = e.value;
var strcommsepvalue = CommasSperatedNumber(value);
var tooltipString = "";
var KPINameString = selectedKPI + ($(".customSwitch span.active").text() == "Percent" ? "(%)" : " ");
tooltipString += "<span style=\"text-align:center;display:inline-block;width:100%;\">";
tooltipString += (activeVariable == "Top 5 Stations" ? "Station" : activeVariable) + " : " + e.category + "</span>";
tooltipString += "<hr style=\"border-color:#ccc;margin: 5px 0;\" class=\"hrTooltps\">"
tooltipString += "<span style=\"float:left;display:inline-block;\">" + KPINameString + "</span>" + " : " + "<span style=\"float:right;display:inline-block;\">" + strcommsepvalue + "</span>";
return tooltipString;
},
background: "rgba(248,248,248,0.8)",
color: "#333",
autoHide: false
//format: "{0}"
},
seriesHover: function(e) {
$("#topStationsChart").css("cursor", "default");
},
render: function (e) {
var tooltip = $(".customTooltipTop");
e.sender.surface.bind("mouseenter", function (e) {
if (e.element.parent.chartElement.content && e.element.parent.chartElement.text.indexOf('...') != -1) {
var pos = e.element.bbox().getOrigin();
tooltip.html(e.element.parent.chartElement.value)
.css({
left: pos.x - 60,
top: pos.y + 20
})
.show();
}
});
e.sender.surface.bind("mouseleave", function (e) {
tooltip.hide();
});
},
});
onBarLineChartHover(nBarLineChartLength, 13);
} else {
$("#topStationsChart").html("<div class='noData'>No Data Available</div>");
}
}