Chart subtitle not centering

3 posts, 0 answers
  1. Derek
    Derek avatar
    8 posts
    Member since:
    Mar 2019

    Posted 11 Jun Link to this post

    Hi

    I am using the Render event on a chart to add a subtitle with the code is based on the Kendo example "Display the Chart Title on Multiple Lines and Use Different Fonts". The problem i am having is that my subtitle is not centered and I assumed that because the chart title is centered by default then the subtitle would be as well. If you look at the dojo for the above mentioned example the subtitle is centered, however if you change the text of the second line to that shown below, you will see that is is no longer centerred. How can I ensure that my sub title is always centered. 

    Thanks

    <script>
        $("#chart").kendoChart({
            title: {
                text: "Total account value (USD):\ntextplaceholder\nClick a bar to drill down",
                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(Click)");
                $(secondLine).css({
                    "font-size": "10px"
                });
            }
        });
    </script>

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2302 posts

    Posted 13 Jun Link to this post

    Hi Derek,

    The behavior is observed because the title position is calculated based on the default font size. However, the font size for part of the text is changed and it takes less space to show. 

    In order to align the text I would suggest adding a space in the first line and including padding for the entire title:

    title: {
        text: "Total account value (USD): \nClick a bar to drill down",
        position: "bottom",
        align: "center",
        padding: {
            left: 60
        }
    },


    Check out the modified dojo below for reference:



    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Derek
    Derek avatar
    8 posts
    Member since:
    Mar 2019

    Posted 13 Jun in reply to Viktor Tachev Link to this post

    Thanks Viktor

    Unfortunately I dynamically change the chart title and the above solution would mean changing padding as well. I decided not to use the chart title and to use html instead. I used the same font family, font size and color as the kendo title and it works great.

    Thanks again for your reply.

Back to Top