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

[Solved] Xaxis Label offset when Yaxis set to negative value

1 Answer 206 Views

Chart (HTML5)

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

1 Answer, 1 is accepted

answered on 21 Nov 2017, 03:22 PM

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.