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

Line chart first category is not starting from origin o

1 Answer 16 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
venu asked on 14 Jan 2019, 02:11 PM

Line chart is displaying as in attached file chart 1. I need to updated the code to display as in attached file chart 2. Also find code from.aspx and .cs files.


aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>

<html xmlns="">
<head id="Head1" runat="server">
    <form id="form1" runat="server">

         <telerik:radscriptmanager ID="QsfScriptManager" runat="server">
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

        <telerik:radhtmlchart runat="server" ID="RadHtmlChart1" Width="800px" Height="400px">
        <XAxis DataLabelsField="Measured_depth" MajorTickType="None">
            <MinorGridLines Visible="false" />
            <MajorGridLines Visible="false" />
        <YAxis MajorTickType="None">
            <MinorGridLines Visible="false" />

            <telerik:radajaxloadingpanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
        <telerik:radajaxmanager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />


            <asp:button ID="Button1" runat="server" text="Submit" OnClick="Button1_Click"/>


cs file:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using Telerik.Web.UI.HtmlChart;
using Telerik.Web.UI.HtmlChart.Enums;
using System.Data.SqlClient;
using System.Data;

public partial class Default2 : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)

    protected void Button1_Click(object sender, EventArgs e)

            DataTable dt = new DataTable();
            DataColumn dcMeasuredDepth = new DataColumn("Measured_depth", typeof(System.Decimal));
            DataColumn dcTrueVerticalDepth = new DataColumn("True_Vertical_Depth", typeof(System.Decimal));

            DataRow dr = dt.NewRow();
            dr[0] = 0.00;
            dr[1] = 0.00;

            dr = dt.NewRow();
            dr[0] = 858.60;
            dr[1] = 858.60;

            dr = dt.NewRow();
            dr[0] = 1740.40;
            dr[1] = 1740.35;

            dr = dt.NewRow();
            dr[0] = 1882.60;
            dr[1] = 1882.54;

            RadHtmlChart1.DataSource = dt;
            LineSeries ls = new LineSeries();

            ls.DataFieldY = "True_Vertical_Depth";

        catch (Exception ex)






1 Answer, 1 is accepted

Sort by
Marin Bratanov
Telerik team
answered on 17 Jan 2019, 07:07 AM
Hi Venu,

This is available as of R1 2019 that came out yesterday, under the Justified property of the x-axis. You can see it in action in the following demo:

On a side note, since you seem to be feeding the chart numerical data only, you mayu want to use a ScatterLineSeries instead. It will not use categories on the x-axis like the LineSeries and you cna control at what value the axis starts through its MinValue property:

Marin Bratanov
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.
Chart (HTML5)
Asked by
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question