This is a migrated thread and some comments may be shown as answers.

Changing Axes Label Styles

4 Answers 15 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 03 Aug 2019, 07:53 PM

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.  

4 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 07 Aug 2019, 02:18 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mike
Top achievements
Rank 1
answered on 08 Aug 2019, 09:37 PM

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

0
Mike
Top achievements
Rank 1
answered on 08 Aug 2019, 09:39 PM

Correction. I set 

kw.options.categoryAxis.labels.font

instead of 

kw.options.xAxis.labels.font

0
Vessy
Telerik team
answered on 09 Aug 2019, 05:35 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart (HTML5)
Asked by
Mike
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Mike
Top achievements
Rank 1
Share this question
or