In scenarios where the Series are Column/Bar and Positive and Negative values are present, the XAxis labels are overlapped by the Series themselves. Expose an additional Position property for the axis labels that controls their position to Top/Bottom. For the time being you can choose either approach: 1) Use a second x-axis that stores only the labels: a) Category Axis example: <script> function BottomXAxisLabels() { var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); var axis = $telerik.$.extend(true, {}, chart.options.categoryAxis); axis.line.visible = false; chart.setOptions({ categoryAxis: [{}, axis] }); chart.options.valueAxis.axisCrossingValues = [0, -99999999999]; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="BottomXAxisLabels" /> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> </Items> </XAxis> </PlotArea> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart> b) Numeric axis example: <script> function BottomXAxisLabels() { var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); var axis = $telerik.$.extend(true, {}, chart.options.xAxis); axis.line.visible = false; chart.setOptions({ xAxis: [{ labels: { visible: false }}, axis] }); chart.options.yAxis.axisCrossingValues = [0, -99999999999]; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="BottomXAxisLabels" /> <PlotArea> <Series> <telerik:ScatterLineSeries Name="Product 1"> <SeriesItems> <telerik:ScatterSeriesItem Y="15000" X="5" /> <telerik:ScatterSeriesItem Y="-4000" X="6" /> <telerik:ScatterSeriesItem Y="10000" X="7"/> </SeriesItems> </telerik:ScatterLineSeries> </Series> </PlotArea> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart> 2) Use the TextStyle property of the RadHtmlChart , in order to set higher margin for the XAxis labels. For example: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance> <TextStyle Margin="135 0 0 0" /> </LabelsAppearance> <Items> <telerik:AxisItem LabelText="item1" /> <telerik:AxisItem LabelText="item2" /> <telerik:AxisItem LabelText="item3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart> Note: Labels margin and chart's PlotArea height are inversely proportional - the higher the margin is the lower the chart's PlotArea height will be. This resizing is needed, in order for the chart's main dimensions to be kept.