Use Hyperlinks in Axes Labels
It is possible to use hyperlinks in the axes labels of a Kendo UI Chart.
The example below demonstrates how to achieve this behavior.
Example
<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>
See Also
- Chart JavaScript API Reference
- Drawing API
- How to Aggregate Data in Pie Charts
- How to Draw on Scatter Plots Surface
- How to Expand Clickable Area of Points
- How to Fit PDF Exported Chart to Page
- How to Handle Right Click in Charts
- How to Place Text in the Center of Donut Charts
- How to Render Custom Plot Bands
- How to Set Different Marker Types for Grouped Line Charts
- How to Use Linear Gradient As Background in Bars
For more runnable examples on Kendo UI Charts, browse the How To documentation folder.