Chart styling

11 posts, 0 answers
  1. Chris
    Chris avatar
    1 posts
    Member since:
    Jul 2011

    Posted 25 Oct 2012 Link to this post

    Hi

    Does anybody know how you can use a stylesheet to style the chart in order to control the font of the title and the labels.
    Looking at the developer tools, it appears all the styles are inline.

    thanks
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 29 Oct 2012 Link to this post

    Hello Chris,

    To achieve this you can use the font configuration option. For example: 
    $("#chart").kendoChart({
      //....
      title: {
         text: "Chart Title",
         font: "44px Arial,Helvetica,sans-serif"
      },
      categoryAxis: {
         //....
         labels: {
               font:
    "24px Arial,Helvetica,sans-serif"
           }
      }
    });

    Kind regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 06 Nov 2012 Link to this post

    Can you set the color of the font?  The grey doesnt suite our color scheme.

    I figured it out.  You can add color: "#FFF" to the legend, title etc...  Color is not covered in the documentation for the title.
  5. Chris
    Chris avatar
    1 posts
    Member since:
    Jul 2011

    Posted 06 Nov 2012 Link to this post

    I need to be able to acheive the styling by using a stylesheet - not by hard coding the font name/size etc into the kendo chart script.
    thanks
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 09 Nov 2012 Link to this post

    Hello Chris,

    I am afraid it is not possible to control the font/size of the title/labels in Kendo UI Chart using external stylesheet - you should use the configuration options.  
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 17 Oct 2013 Link to this post

    Iliana, what about: 
    font-weight
    font-style
    etc.
    ??

    This stuff is not documented properly!

    Have you guys noted in your forums how many people are talking about the fact that your documentation is incomplete or seriously lacking? 
  8. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 17 Oct 2013 Link to this post

    How about aligning the title left or right, maybe bottom or top? 
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 17 Oct 2013 Link to this post

    Hello Jacques,

    Up to your questions:

    • The font property is a shorthand for setting font-style, font-variant, font-weight, font-size, line-height and font-family (W3C standards). Hence you could achieve the expected result using the following syntax: 
      $("#chart").kendoChart({
         title: {
           //....
           font: "bold italic 44px Arial,Helvetica,sans-serif",
         },
        //....
      })
    • As pointed in the documentation, the title can be aligned via title.align or title.position options:
      $("#chart").kendoChart({
        title: {
            //.....
            align: "left",
            position"bottom"  
        },
        //....
      })

    Regards,

    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Jason
    Jason avatar
    4 posts
    Member since:
    Sep 2012

    Posted 18 Nov 2013 Link to this post

    What people seem to be missing here is that the test (title, etc.) is part of the generated svg for the chart, not html. Because it's not html, CSS styling cannot be applied to it. That's why it's necessary to use the control settings to set these things.

    I hope that helps clarify this a bit.
  11. Stephen
    Stephen avatar
    24 posts
    Member since:
    May 2011

    Posted 10 Jul 2015 in reply to Jason Link to this post

    Jason said:What people seem to be missing here is that the test (title, etc.) is part of the generated svg for the chart, not html. Because it's not html, CSS styling cannot be applied to it. That's why it's necessary to use the control settings to set these things.

    That is entirely incorrect. CSS styling absolutely CAN be applied to SVG. Unfortunately, since Kendo generates the SVG without CSS classes we can't use this feature. Please add this at some future release. Being forced to do this in the configuration makes it extremely difficult to use these controls in a responsive design.

  12. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 15 Jul 2015 Link to this post

    Hi,

    Not relying on SVG-specific features is intentional as the Drawing API that underpins the charts supports multiple rendering targets. This includes Canvas, PDF and VML.

    If you try to export your chart, or page containing charts, to an image or PDF file the CSS styles will not kick in. That's something that we would like to avoid.

    I hope this clears up the motivation behind this decision.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready