Chart styling

[Support]

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

[Iliana Dyankova]

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

[Elliot]

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.

[Support]

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

[Iliana Dyankova]

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

[Jacques]

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? 

[Jacques]

How about aligning the title left or right, maybe bottom or top? 

[Iliana Dyankova]

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

[Jason]

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.

[Stephen]

[quote]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.[/quote]

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.

[T. Tsonev]

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