Use Hyperlinks in Axes Chart Labels
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I use hyperlinks in the axes labels of the Chart?
Solution
The following example demonstrates how to achieve this behavior.
<div id="chart"></div>
<script>
var data = [ {
"blog": "My blog",
"day": "1",
"value": 3,
"userColor": "#ffd600",
"url": "http://www.example.com"
}, {
"blog": "My blog",
"day": "2",
"value": 7,
"userColor": "#ffd600",
"url": "http://www.example.com"
}, {
"blog": "My blog",
"day": "3",
"value": 12,
"userColor": "#ffd600",
"url": "http://www.example.com"
}];
$("#chart").kendoChart({
dataSource: {
data: data
},
title: {
align: "left",
text: "Comments per day"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
field: "value",
colorField: "userColor"
}],
valueAxis: {
majorGridLines: {
visible: false
},
visible: false
},
categoryAxis: {
field: "day",
majorGridLines: {
visible: false
},
line: {
visible: false
},
labels: {
color: "#0487c4",
cursor: "pointer",
padding: {
top: 2,
bottom: 2,
left: 3,
right: 3
},
border: {
width: 1,
color: "#0487c4"
}
}
},
axisLabelClick: function(e) {
window.location = e.dataItem.url;
}
});
</script>