Changing Axes Label Styles

5 posts, 0 answers
  1. Mike
    Mike avatar
    4 posts
    Member since:
    Jul 2014

    Posted 03 Aug Link to this post

    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.  

  2. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 07 Aug Link to this post

    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.
  3. Mike
    Mike avatar
    4 posts
    Member since:
    Jul 2014

    Posted 08 Aug in reply to Vessy Link to this post

    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

  4. Mike
    Mike avatar
    4 posts
    Member since:
    Jul 2014

    Posted 08 Aug in reply to Mike Link to this post

    Correction. I set 

    kw.options.categoryAxis.labels.font

    instead of 

    kw.options.xAxis.labels.font

  5. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 09 Aug Link to this post

    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.
Back to Top