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

1. Split the text into three lines by using line feed characters(\n).
2. Handle the render event of the Chart.
3. In the render event handler:
   1. Use a jQuery selector and hide the second line.
   2. Use a jQuery selector and change the font-size of the third line.

<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>