Display the Chart Title on Multiple Lines and Use Different Fonts
Environment
Product | Progress® Kendo UI® Chart for jQuery |
Product Version | Created with the 2017.3.1026 version |
Description
How can I display a subtitle with an empty line and smaller font in the Kendo UI Chart?
Solution
- Split the
text
into three lines by using line feed characters(\n
). - Handle the
render
event of the Chart. - In the
render
event handler:- Use a jQuery selector and
hide
the second line. - Use a jQuery selector and change the
font-size
of the third line.
- Use a jQuery selector and
<style>
.topPadding {
padding-top: 2cm;
}
</style>
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Total account value (USD):\ntextplaceholder\n$250,000",
position: "bottom"
},
series: [{
data: [1, 2, 3]
}],
render: function(e) {
var tph = e.sender.element.find("text:contains(textplaceholder)");
tph.hide();
var secondLine = e.sender.element.find("text:contains($250,000)");
$(secondLine).css({
"font-size": "10px"
});
}
});
</script>