http://dojo.telerik.com/aGisuSuR/2
I am trying to hide and show error bar on a Kendo line chart based on when the mouse is over the line point, is it possible to do this? I tried using highlight, I can probably create a visual, but I just wanted to hide all the error bars and show only when the point is highlighted. I tried to set erroBar visibility false and set it to true on Highlight, that doesn't seem to work. Even if this worked, this would set the visibility of all error bars?, I just want to set it for only one point at a time, as showing all at once is will overlap error bars.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/line-charts/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
var StrokeAnimation = kendo.drawing.Animation.extend({
init: function(element) {
kendo.drawing.Animation.fn.init.call(this);
this.initialStroke = $.extend({}, element.options.stroke);
this.color = element.options.fill.color;
this.element = element;
},
step: function(pos) {
this.element.stroke(this.color, this.initialStroke.width * pos * 5, 0.5);
},
reset: function() {
this.element.options.set("stroke", this.initialStroke);
}
});
$("#chart").kendoChart({
dataSource: [
{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973,
"low":51000,
"high":68000
},
{
"country": "Spain",
"year": "2007",
"unit": "GWh",
"solar": 508,
"hydro": 30522,
"wind": 27568,
"nuclear": 55103,
"low":52000,
"high":60000
},
],
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "line",
errorLowField: "low",
errorHighField: "high",
errorBars: {
highlight:{
line: {
width: 1,
dashType: "solid"
}
},
visible: true,
endCaps: true,
width: 10,
color: "darkblue",
line: {
width: 1,
dashType: "solid"
}
},
highlight: {
errorBars: {
line: {
width: 1,
dashType: "solid"
}
}
}
},
series: [{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
field: "year",
labels: {
rotation: -90
},
crosshair: {
visible: false
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: false,
shared: false,
format: "N0"
},
render: function(e) {
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>1 Answer, 1 is accepted
Hello Raju,
I am afraid that such behavior is not supported. The errorBar could not be shown/hidden dynamically as in order to hide it or show it the entire Chart should be redrawn.
Let me know in case you have any additional questions on the matter.
Regards,
Neli
Progress Telerik