styling telerik chart title and X-axis

[Shashank]

Hi Team,

I am using telerik chart for the first time and I am trying to create bar chart in which i need to change the following items as described below :-

1. Change font size and color of title of graph title, X-axis and Y-axis.
2. Wrap and set width of of graph title and X-axis.
3. Have continuous line instead of dotted lines parallel to X-axis.

Looking forward for help.

Thanks,
-Shashank

[Shashank]

Currently I am using the below piece of code

var salesData = [
    { Month: 'January', Sales: 10 },
    { Month: 'February', Sales: 5 },
    { Month: 'March', Sales: 1 },
    { Month: 'April', Sales: 7 },
    { Month: 'May', Sales: 12 },
    { Month: 'June', Sales: 17 }
];

var revenueData = [
    { Month: 'January', Revenue: 5 },
    { Month: 'February', Revenue: 15 },
    { Month: 'March', Revenue: 10 },
    { Month: 'April', Revenue: 17 },
    { Month: 'May', Revenue: 17 },
    { Month: 'June', Revenue: 19 }
];

var chart = new Telerik.UI.RadChart(document.getElementById("codeChart"), {
    title: {
        text: 'End user Car/Mileage by region in week'
    },
    series: [
        {
            type: 'column',
            field: 'Sales',
            name: 'Sales',
            data: salesData
        },
        {
            type: 'column',
            field: 'Revenue',
            name: 'Revenue',
            data: revenueData
        }
    ],
    categoryAxis: {
        categories: ['January', 'February', 'March', 'April', 'May', 'June']
    },
    theme: "light"
});

-Shashank

[Martin Yankov]

Hi Shashank,

Thank you for your interest in Telerik UI for Windows 8 HTML.

Here are some hints to how you can accomplish your tasks:

1. Change font size and color of title of graph title, X-axis and Y-axis. - You can customize the chart and axis titles using the properties listed in this article - Title Configuration. In your case the X and Y axes are actually the Category and Value axes. Here is an code sample of customizing the titles:
2. Wrap and set width of of graph title and X-axis. - You can set the width of the chart by either setting a CSS width rule to the chart container or by using the chart width property. Unfortunately, there is no way for you to set a width for the titles and force them to wrap.
3. Have continuous line instead of dotted lines parallel to X-axis. - To customize the chart grid lines, you can use the axes' majorGridLines and minorGridLines properties. You can find a list of common axes properties in this article - Common Axes Configuration. In your case you will need to set the ​dashType grid lines property to "solid". For more grid lines customization properties refer to the GridLines Configuration article.

Here is a code sample of the chart declaration:

var chart = new Telerik.UI.RadChart(document.getElementById("codeChart"), {
    title: {
        text: 'End user Car/Mileage by region in week',
        font: "20px sans-serif",
        color: "#aa00bb"
    },
    series: [
        {
            type: 'column',
            field: 'Sales',
            name: 'Sales',
            data: salesData
        },
        {
            type: 'column',
            field: 'Revenue',
            name: 'Revenue',
            data: revenueData
        }
    ],
    valueAxis: {
        title: {
            text: "Sales/Revenue",
            font: "12px sans-serif",
            color: "#aa00bb"
        },
        majorGridLines: {
            dashType: "solid"
        }
    },
    categoryAxis: {
        title: {
            text: "Months",
            font: "12px sans-serif",
            color: "#aa00bb"
        },
        categories: ['January', 'February', 'March', 'April', 'May', 'June']
    },
    theme: "light"
});

I hope this information is helpful. Let me know if you need further assistance.

Regards,
Martin Yankov
Telerik