Edit this page

Display the Chart Title on Multiple Lines and Use Different Fonts

Environment

Product Progress Kendo UI Chart
Progress Kendo UI 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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy