chart title

2 posts, 0 answers
  1. moran
    moran avatar
    5 posts
    Member since:
    Feb 2016

    Posted 16 Feb Link to this post

    Hi,

    I want to have the following title for my chart:

    "Q1 BTI vs, POR

    (with open po's from 2015)"

     

    meaning 2 lines. and I want to make the font of the second line, much smaller than the first line.

    how can I do that?

  2. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 16 Feb Link to this post

    To get 2 lines put a '\n' where you want the line break:  "Q1 BTI vs, POR\n(with open po's from 2015)"

    To change the font size of the second line, I use the render event to get the text element of the second line and manipulate it.  Set the x coordinate to the center of the chart, change the text-anchor to middle and then get the second element and change its font size:

    $("#chart").kendoChart({
      title: {
        text: "Q1 BTI vs, POR\n(with open po's from 2015)",
        font: "20px sans-serif",
        color: "rgba(55,55,55,0.999)"
      },
      series: [
        { data: [1, 2, 3] }
      ],
      render: function(e){
        $('[fill="rgba(55,55,55,0.999)"]').attr("x", e.sender.element.width() / 2).attr("text-anchor", "middle")[1].style.fontSize = "12px";
      }
    });

     

    DEMO

  3. Kendo UI is VS 2017 Ready
Back to Top