This is a migrated thread and some comments may be shown as answers.
Chart styling
10 Answers 747 Views
This is a migrated thread and some comments may be shown as answers.
Support
Top achievements
Rank 1
Support asked on 25 Oct 2012, 09:44 AM
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

10 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 29 Oct 2012, 05:34 PM
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!
0
Elliot
Top achievements
Rank 1
answered on 06 Nov 2012, 06:19 PM
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.
0
Support
Top achievements
Rank 1
answered on 06 Nov 2012, 06:24 PM
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
0
Iliana Nikolova
Telerik team
answered on 09 Nov 2012, 01:00 PM
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!
0
Jacques
Top achievements
Rank 2
answered on 17 Oct 2013, 07:07 AM
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? 
0
Jacques
Top achievements
Rank 2
answered on 17 Oct 2013, 07:19 AM
How about aligning the title left or right, maybe bottom or top? 
0
Iliana Nikolova
Telerik team
answered on 17 Oct 2013, 06:24 PM
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!
0
Jason
Top achievements
Rank 1
answered on 19 Nov 2013, 12:40 AM
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.
0
Stephen
Top achievements
Rank 1
answered on 10 Jul 2015, 02:39 PM

[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.

0
T. Tsonev
Telerik team
answered on 15 Jul 2015, 10:46 AM
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!
 
Asked by
Support
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Elliot
Top achievements
Rank 1
Support
Top achievements
Rank 1
Jacques
Top achievements
Rank 2
Jason
Top achievements
Rank 1
Stephen
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or