Change chart property values with css

[Natalie]

Is it possible to change the chart property values using CSS?
I was able to change the chart width and height but is there a way to change the label font size as well?

What I want to do is use media queries and customize the charts depending on the size and orientation on the device the users are using.
Is that possible?

Thanks

[Tsvetina]

Hi Natalie,

The chart labels font cannot be changed by itself using CSS, since the chart is drawn as SVG and its styles are defined inline for each <text> element. 
However, you can achieve your requirement with simple javascript logic upon creating the chart. The approach is equivalent to using a media query in CSS:

1) Check the document height and width (purple code).
2) Based on the returned values, using an if-else statement, define the style for the labels (orange code).
3) Assign this style in the chart definition (blue code).

Here is one such implementation:

var labelsFont;
var documentHeight = document.body.clientHeight;
var documentWidth = document.body.clientWidth;
if (documentWidth >= 1280 && documentHeight > 768) {
    labelsFont = "14pt Segoe UI"
}
else {
    labelsFont = "11pt Segoe UI"
}
var chart = new Telerik.UI.RadChart(document.getElementById("chart1"), {
    series: [{
        type: "pie",
        data: [
            { value: 16.7, category: "Europe", explode: true },
            { value: 20, category: "North America" },
            { value: 15.7, category: "South America" },
            { value: 26.6, category: "Asia" },
            { value: 23.5, category: "Australia" }
        ]
    }],
    legend: {
        labels: {
            color: "#fff",
            font: labelsFont
        }
    }
});

Best wishes,
Tsvetina
the Telerik team