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

Xaxis Label offset when Yaxis set to negative value

1 Answer 105 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
KHP9000
Top achievements
Rank 1
KHP9000 asked on 15 Nov 2017, 08:45 PM

Xaxis Label offset if Yaxis set to negative Version 2017.3.913.45

 

Scenario

Yaxis datasource range [0-30]

HtmlChart.PlotArea.YAxis.MinValue = -1;

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
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.
Tags
Chart (HTML5)
Asked by
KHP9000
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or