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 2017 Link to this post

    Xaxis Label offset if Yaxis set to negative Version 2017.3.913.45



    Yaxis datasource range [0-30]

    HtmlChart.PlotArea.YAxis.MinValue = -1;

  2. Rumen
    Rumen avatar
    14324 posts

    Posted 21 Nov 2017 Link to this post


    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:

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

    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();
        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,
    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