Changing Axes Label Styles

[Mike]

I am trying to change the font size for axes labels from the client. I was able to do so with series labels as follows:

var chart = $find(chartname);
var kw = chart.get_kendoWidget();
kw.options.title.font = kw.options.title.font.replace("16px", "12px");
kw.options.series[2].labels.from.font = kw.options.series[2].labels.from.font.replace("12px", "8px");
kw.refresh();

 

And this works well for the series labels and the title font. However, when trying to change the axis labels in this way:

kw.options.xAxis.labels.font=kw.options.xAxis.labels.font.replace("12px","6px")

 

It does not seem to have any effect. Is this a bug? Or am I going about this the wrong way?

In case anyone is interested, the reason i am doing this is because I am exporting to PDF (with rad export manager) and there does not seem to be a way to scale the content to "fit to page" except changing the content size. (outside of asking the user to check the "fit to page" option when printing the pdf.  

[Vessy]

Hi Mike,

I tested the provided snippets at my end and the xAxis labels size is changed successfully at my end. Can you verify that the initial font set to the chart on your side is indeed 12px? Calling a simple console.log() should give the needed information:

kw.options.xAxis.labels.font

 

You can see the setup I used for my test below:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1640px" Height="480px">
            <ClientEvents OnLoad="chartLoad" />
            <PlotArea>
                <Series>
                    <telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
                    </telerik:ScatterLineSeries>
                </Series>
                <XAxis BaseUnit="Seconds" BaseUnitStep="5" Step="1">
                    <TitleAppearance Text="Sell Date">
                    </TitleAppearance>
                </XAxis>
                <YAxis>
                    <TitleAppearance Text="Quantity">
                    </TitleAppearance>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Sold Cars per Date">
            </ChartTitle>
        </telerik:RadHtmlChart>
        <script>
            function chartLoad() {
                var chartname = "<%=RadHtmlChart1.ClientID%>";
                var chart = $find(chartname);
                var kw = chart.get_kendoWidget();
                kw.options.title.font = kw.options.title.font.replace("16px", "12px");
                //kw.options.series[0].labels.from.font = kw.options.series[0].labels.from.font.replace("12px", "8px");
                kw.options.xAxis.labels.font = kw.options.xAxis.labels.font.replace("12px", "6px")
                kw.refresh();
            }
        </script>

    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }

    protected DataTable GetData()
    {
        DataTable dt = new DataTable();

        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("SellQuantity", typeof(int));
        dt.Columns.Add("SellDate", typeof(DateTime));
        dt.Columns.Add("SellTime", typeof(DateTime));

        dt.Rows.Add(2, 5, new DateTime(2011, 06, 12, 00, 01, 01));
        dt.Rows.Add(3, 6, new DateTime(2011, 06, 12, 00, 01, 02));
        dt.Rows.Add(4, 4, new DateTime(2011, 06, 12, 00, 01, 03));
        dt.Rows.Add(5, 7, new DateTime(2011, 06, 12, 00, 01, 04));


        return dt;
    }

 

Regards, Vessy
Progress Telerik

[Mike]

I was able to get it working by setting:

kw.options.valueAxis.labels.font

instead of 

kw.options.xAxis.labels.font

Thank you.

Mike H

[Mike]

Correction. I set 

kw.options.categoryAxis.labels.font

instead of 

kw.options.xAxis.labels.font

[Vessy]

Hi,

Thanks a lot for the update, Mike - I am glad you have managed to find the root of the problem and how to resolve it. 

Regards, Vessy
Progress Telerik