Xaxis Label offset when Yaxis set to negative value

2 posts, 0 answers
  1. KHP9000
    KHP9000 avatar
    4 posts
    Member since:
    Jul 2017

    Posted 15 Nov Link to this post

    Xaxis Label offset if Yaxis set to negative Version 2017.3.913.45

     

    Scenario

    Yaxis datasource range [0-30]

    HtmlChart.PlotArea.YAxis.MinValue = -1;

  2. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 21 Nov Link to this post

    Hi,

    The reported behavior is by design and there is a feature request logged for it: ADD Top and Bottom Positions for Axes / Axes Labels in RadHtmlChart.
    You can find a workaround inside the item too.

    Another workaround that you can apply is to set the Margin attribute as highlighted below:

    ASPX
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="400px">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="Products" DataFieldY="moreData">
                    <TooltipsAppearance DataFormatString="${0}" />
                    <LabelsAppearance Visible="false" />
                </telerik:ColumnSeries>
            </Series>
            <XAxis DataLabelsField="moreData">
                 <LabelsAppearance>
                     <TextStyle Margin="50px" />
                 </LabelsAppearance>
            </XAxis>
            <YAxis MinValue="-1">
                 
                <LabelsAppearance DataFormatString="{0}" />
            </YAxis>
        </PlotArea>
        <Legend>
            <Appearance Visible="false" />
        </Legend>
        <ChartTitle Text="Bookstore Products">
        </ChartTitle>
        <ClientEvents OnSeriesClick="RadHtmlChart1_OnSeriesClick" />
    </telerik:RadHtmlChart>
    <script type="text/javascript">
        function RadHtmlChart1_OnSeriesClick(e) {
            alert(e.dataItem['Vendor']); // return undefined
        }
    </script>

    Codebehind:
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadHtmlChart1.DataSource = GetChartData();
            RadHtmlChart1.DataBind();
        }
     
        protected DataTable GetChartData()
        {
            DataTable tbl = new DataTable();
            tbl.Columns.Add(new DataColumn("Vendor", typeof(decimal)));
            tbl.Columns.Add(new DataColumn("Name", typeof(string)));
            tbl.Columns.Add(new DataColumn("moreData", typeof(decimal)));
            tbl.Columns.Add(new DataColumn("someColumn", typeof(string)));
            tbl.Rows.Add(new object[] { 0, "zero", 2, "zeroRecord" });
            tbl.Rows.Add(new object[] { 1, "one", 2, "firstRecord4" });
            tbl.Rows.Add(new object[] { 2, "two\\ntwo", 3, "secondRecord4" });//the name of this segment is separated in two lines
            tbl.Rows.Add(new object[] { 3, "three", 4, "thirdRecord4" });
            tbl.Rows.Add(new object[] { 98, "four", 5, "fourthRecord4" });
     
            return tbl;
        }
    }


    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top