Use FontAwesome Icons in 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
As the Chart labels cannot contain HTML markup, how am I supposed to implement FontAwesome icons by using CSS styles?
Solution
To achieve the desired scenario, use either of the following options:
Applying Unicode Code Points
Using the Unicode symbols from the font directly is the most common approach to achieve this behavior. However, an obvious drawback is that you are limited to FontAwesome for the entire label.
Series Labels
The following example demonstrates how to use FontAwesome icons in series labels with Unicode.
<!-- Include FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["Foo"],
labels: {
font: "16px FontAwesome",
// Character codes for FontAwesome available here:
// https://fortawesome.github.io/Font-Awesome/cheatsheet/
//
// For example:
// [] becomes String.fromCharCode(0xf251)
template: String.fromCharCode(0xf005) + " #: value #"
}
},
series: [{
data: [1]
}]
});
</script>
Series Notes
The following example demonstrates how to use FontAwesome icons in series notes with Unicode.
<!-- Include FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<div id="chart"></div>
<script>
$("#chart").kendoChart({
dataSource: {
data: [{
value: 1,
noteText: "A"
}, {
value: 2,
noteText: "B"
}]
},
series: [{
field: "value",
noteTextField: "noteText",
type: "line",
notes: {
label: {
font: "30px FontAwesome",
margin: { right: 5 },
// Character codes for FontAwesome are available at
// https://fortawesome.github.io/Font-Awesome/cheatsheet/
//
// For example,
// [] becomes String.fromCharCode(0xf251)
template: String.fromCharCode(0xf2ac)
},
icon: {
visible: false
}
}
}]
});
</script>
Rendering Custom Visuals
Visual templates are the most flexible way to override the rendering of the Chart elements. They allow you to construct the labels by using the Drawing API.
The following example demonstrates how to construct a visual that uses two Text shapes and to position them in a Layout. The first Text element contains the FontAwesome icon. The second one is a plain text label.
<!-- Include FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["Foo"],
labels: {
visual: function(e) {
// Layout text elements. See:
// https://docs.telerik.com/kendo-ui/api/javascript/drawing/layout
var layout = new kendo.drawing.Layout(e.rect, {
orientation: "horizontal",
// Center the content
justifyContent: "center",
// Align items on center line
alignItems: "center",
// Leave some space between the elements
spacing: 5
});
// Character codes for FontAwesome are available at
// https://fortawesome.github.io/Font-Awesome/cheatsheet/
//
// For example,
// [] becomes String.fromCharCode(0xf251)
var star = new kendo.drawing.Text(String.fromCharCode(0xf005), [0, 0], {
font: "14px FontAwesome"
});
// The category label
var text = new kendo.drawing.Text(e.text, [0, 0], {
font: "14px arial,sans-serif"
});
layout.append(star, text);
// Execute layout
layout.reflow();
return layout;
}
}
},
series: [{
data: [1]
}]
});
</script>