I would like to be able to supply DateTime values for the x axis of an HTMLChart scatter line series to represent a timeline.  Would it be possible to make this easier by having the control plot points plotted based upon the tick count of the value and add support for appropriate label format strings?

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.

As of R1 2017 you can use the stackTotal property of the labels:
https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/show-stack-total

---
old information

For the time being this can be achieved by creating an additional bar/column series with the following settings:

-series items are set with insignificantly small values (e.g. 0.001)

-the name property of the series is not specified, so that it is not visible in the legend

-the color of the series matches the color of the plot area, so that the series items and the legend of the series are not visible

-clienttemplates for the labels of this series is used in order to sum up the grand total and display it

An example on the described scenario can be found in the http://www.telerik.com/support/kb/aspnet-ajax/chart-%28html5%29/details/displaying-grand-total-in-stacked-series-labels-and-pie-series-legend KB article

provide htmlchart in 2D/3D

Add the ability to click the legend's items in a similar way like the series 'items. For the time being the following workaround can be used:
JavaScript:
	<script>
		function pageLoad() {
			//Attach the legendItemClick event on pageLoad:
			var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked);
		}
                //The following function toggles the visibility of the clicked series from the legend
		function OnLegendClicked(e) {
			//Get a reference to the chart and the target axis
			var chart = e.sender;
			var targetAxisName = e.series.axis;
			var numValueAxes = chart.options.valueAxis.length;
			//Iterate through the y-axes and toggle the visibility of the axis that corresponds to the clicked series from the legend
			for (var i = 0; i < numValueAxes; i++) {
				var currValueAxisName = chart.options.valueAxis[i].name;
				if (currValueAxisName == targetAxisName) {
					chart.options.valueAxis[i].visible = !chart.options.valueAxis[i].visible;
				}
			}
		}
	</script>
ASPX:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries AxisName="axis1" Name="Series1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:LineSeries>
					<telerik:LineSeries AxisName="axis2" Name="Series2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="3000" />
							<telerik:CategorySeriesItem Y="1000" />
							<telerik:CategorySeriesItem Y="2000" />
						</SeriesItems>
					</telerik:LineSeries>
					<telerik:LineSeries AxisName="axis2" Name="Series3">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="3500" />
							<telerik:CategorySeriesItem Y="1500" />
							<telerik:CategorySeriesItem Y="2500" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<YAxis Name="axis1" MinValue="0" MaxValue="30">
				</YAxis>
				<AdditionalYAxes>
					<telerik:AxisY Name="axis2" MinValue="900" MaxValue="3600"></telerik:AxisY>
				</AdditionalYAxes>
			</PlotArea>
		</telerik:RadHtmlChart>

LineBreak is not supported by SVG (more on that - http://www.w3.org/TR/SVG11/text.html#Introduction) and RadHtmlChart uses SVG to render in modern browsers. Add the ability to handle long label text in SVG as well. Currently long strings are getting clipped. 

For the time being the labels can be manually split in separate text elements. For example:
		<script>
			function pageLoad() {
				wrapLabels();
			}
			function wrapLabels() {
				//Find all text elements on the page
				var textElements = document.getElementsByTagName("text");
				//Iterate through the text elements
				for (var i = 0; i < textElements.length; i++) {
					var currTextEl = textElements[i];
					//Set the desired string/symbol that represents the line break
					var lineBreakSymbol = "@LineBreak@";
					if (currTextEl.textContent.indexOf(lineBreakSymbol) != -1) {
						var lines = currTextEl.textContent.split(lineBreakSymbol);
						//Adjust the x and y coordinates for the new text element from the old one
						var textAlignCoefficient = 7;
						var x = currTextEl.attributes.x.textContent * 1 + lines[1].length * textAlignCoefficient;
						var y = currTextEl.attributes.y.textContent * 1 + 20;
						//Obtain the same style for the new text element from the old one
						var style = currTextEl.attributes.style.textContent;
						//Add the new SVG text element
						addSVGTextElement(currTextEl, x, y, style, lines[1]);
						//Adjust the text and the position for the old text element
						currTextEl.textContent = lines[0];
						currTextEl.attributes.x.textContent = currTextEl.attributes.x.textContent * 1 + lines[1].length * textAlignCoefficient;
					}
				}
			}
			function addSVGTextElement(placeHolder, x, y, style, text) {
				var newText = document.createElementNS("http://www.w3.org/2000/svg", "text");

				newText.setAttributeNS(null, "x", x);
				newText.setAttributeNS(null, "y", y);
				newText.setAttributeNS(null, "style", style);

				var textNode = document.createTextNode(text);
				newText.appendChild(textNode);
				placeHolder.parentNode.insertBefore(newText, placeHolder);
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<ChartTitle Text="Chart title @LineBreak@ more text in title">
			</ChartTitle>
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
						<LabelsAppearance>
							<ClientTemplate>
Category is #=category#@LineBreak@Value is: #=value#
							</ClientTemplate>
						</LabelsAppearance>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="item 1" />
						<telerik:AxisItem LabelText="item 2" />
						<telerik:AxisItem LabelText="item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

Currently BarSeries/ColumnSeries are rendered like a "glass" gradient and PieSeries/DonutSeries like a "roundedBevel" gradient. Expose an OverlayGradient property that lets you control the gradient (e.g. "glass", "roundedBevel", "sharpBevel", "none"). For the time being the properties can be set through the chartObject:
JavaScript:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script>
			function pageLoad() {
				var chart1 = $find("<%=ColumnChart1.ClientID%>");
				//Set glass gradient to first series
				chart1._chartObject.options.series[0].overlay = { gradient: "glass" };
				//Remove gradient from second series
				chart1._chartObject.options.series[1].overlay = { gradient: "none" };
				chart1.repaint();

				var chart2 = $find("<%=PieChart1.ClientID%>");
				//Set sharpBevel gradient to pie series
				chart2._chartObject.options.series[0].overlay = { gradient: "sharpBevel" };
				chart2.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
ASPX:
		<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series with Gradient">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="23000" />
							<telerik:CategorySeriesItem Y="10000" />
							<telerik:CategorySeriesItem Y="16000" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series with no Gradient">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="35000" />
							<telerik:CategorySeriesItem Y="10000" />
							<telerik:CategorySeriesItem Y="20000" />
							<telerik:CategorySeriesItem Y="17000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px">
			<PlotArea>
				<Series>
					<telerik:PieSeries StartAngle="90">
						<SeriesItems>
							<telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" Y="18.3" />
							<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />
							<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />
							<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />
							<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
						</SeriesItems>
					</telerik:PieSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Pie with Gradient">
			</ChartTitle>
		</telerik:RadHtmlChart>

When using custom shapes (circles, triangles, etc) in a RadHtmlChart, the custom shape should be displayed in the legend instead of always a square.  This is because when printing with a black & white printer, the colored squares won't help the reader read the chart, however the shapes would.

For the time being you can stack 100% series through the chartObject. For example:
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				var chart = $find("<%=ColumnChart1.ClientID%>");
				chart._chartObject.options.series[0].stack = { type: "100%" };
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="23000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Product 2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="35000" />
							<telerik:CategorySeriesItem Y="13000" />
							<telerik:CategorySeriesItem Y="20000" />
						</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>

There are two workarounds you can use in the meantime

- Use string representations of the dates instead of actual dates. In this manner you can bind the chart to strings and use a "regular" categorical axis and then the plot bands will work based on the index of the item. In such a case you will need to aggregate the data yourself before passing it to the chart.
- Using the Kendo Chart widget directly, and here is an example of using date objects and adding plot bands dynamically: https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/dynamic-plot-bands

Here is also a basic example of fetching the Kendo Chart scripts through a hidden RadHtmlChart so that you can easily use the Kendo Chart widget

<script>
    var myData = [{
        "day": new Date("2014/01/01")
    }, {
        "day": new Date("2014/01/02")
    }, {
        "day": new Date("2014/01/31")
    }];
 
 
    function addPlotBand() {
        $ = $telerik.$;
 
        var start = new Date(2014, 0, 1 + Math.floor(Math.random() * 30));
        var end = new Date(start.getTime() + 1000 * 3600 * 24); // 24 hours after start
 
        var options = {};
 
        options["categoryAxis"] = {
            plotBands: [{
                from: start,
                to: end,
                color: "green"
            }]
        };
 
        $("#chart2").data("kendoChart").setOptions(options);
    }
 
    function pageLoad() {
        $ = $telerik.$;
        $("#chart2").kendoChart({
            dataSource: {
                data: myData
            },
            categoryAxis: {
                type: "date",
                field: "day"
            }
        });
    }
</script>
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="addPlotBand" Text="add plotband" />
<div id="chart2"></div>
<telerik:RadHtmlChart runat="server" ID="chart" Style="visibility: hidden;">
    <PlotArea>
        <XAxis DataLabelsField="day">
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>

Expose a Visible property for the Series in RadHtmlChart. For example when a Series is clicked it can be hidden.
For the time being the following workaround can be used:
JavaScript:
	<script>
		function pageLoad() {
			var chart = $find("<%=RadHtmlChart1.ClientID%>");
			chart._chartObject.options.series[0].visible = false;
			chart.repaint();
		}
	</script>
ASPX:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series 2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="5" />
							<telerik:CategorySeriesItem Y="12" />
							<telerik:CategorySeriesItem Y="8" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

A good improvement in the RadHtmlChart would be to add an Opacity property for the series, which would allow the control of its transparency. The property can be set through the chartObject:
JavaScript:
		<script>
			function pageLoad() {
				var chart = $find("<%=BubbleChart.ClientID%>");
				chart._chartObject.options.series[0].opacity = 0.3;
				chart.repaint();
			}
		</script>
ASPX:
		<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
			<PlotArea>
				<Series>
					<telerik:BubbleSeries>
						<Appearance FillStyle-BackgroundColor="#6ab2c9">
						</Appearance>
						<SeriesItems>
							<telerik:BubbleSeriesItem Size="3" X="5" Y="5500" />
							<telerik:BubbleSeriesItem Size="12" X="14" Y="12200" />
							<telerik:BubbleSeriesItem Size="33" X="20" Y="39000" />
							<telerik:BubbleSeriesItem Size="10" X="18" Y="24400" />
							<telerik:BubbleSeriesItem Size="42" X="20" Y="32000" />
						</SeriesItems>
					</telerik:BubbleSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

Currenlty Series like Bubble, Bar, Column, Donut, Pie and Candlestick do not expose any appearance properties for the Series border. Expose appearance border properties like width, dashtype, color and opacity.

Temporary workaround for managing the border appearance:
Javascript:
	<script language="javascript">
		function pageLoad() {
			var chart = $find("RadHtmlChart1");
			chart._chartObject.options.series[0].border = {
				width: 2,
				color: "black",
				dashType: "dash",
				opacity: 0.2
			}
			chart.repaint();
		}
	</script>

ASPX:
	<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
		<PlotArea>
			<Series>
				<telerik:ColumnSeries>
					<SeriesItems>
						<telerik:CategorySeriesItem Y="30" />
						<telerik:CategorySeriesItem Y="10" />
						<telerik:CategorySeriesItem Y="20" />
					</SeriesItems>
				</telerik:ColumnSeries>
			</Series>
		</PlotArea>
	</telerik:RadHtmlChart>

So cool RadHtmlChart navigator should be able to be attached to non-stock layout charts, support multiple databound series and y-axis items other than financial data

Currently the available appearance options of the line in Area, Line and ScatterLine Series are width and background color. Expose additional option for changing the dash type(e.g. dash, dashDot, Dot, etc). For the time being the following workaround can be used:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				//DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid
				chart._chartObject.options.series[0].dashType = "dot";
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="item 1" />
						<telerik:AxisItem LabelText="item 2" />
						<telerik:AxisItem LabelText="item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

For example by exposing an additional width property.

For the time being you can use the following workaround:
		<script>
			function OnLoad(sender, args) {
				var kendoWidget = $find('<%=RadHtmlChart1.ClientID%>').get_kendoWidget();
				kendoWidget.options.legend.reverse = true;
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<ClientEvents OnLoad="OnLoad" />
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series 2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="2" />
							<telerik:CategorySeriesItem Y="5" />
							<telerik:CategorySeriesItem Y="7" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series 3">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="9" />
							<telerik:CategorySeriesItem Y="11" />
							<telerik:CategorySeriesItem Y="13" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance RotationAngle="33"></LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

Please provide RadHtmlChart Export features

Similar to the feature in RadChart - http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/logarithmicaxis/defaultcs.aspx. 
For the time being the following workaround can be used:
ASPX:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.valueAxis.type = "log";
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<PlotArea>
				<YAxis></YAxis>
				<Series>
					<telerik:ColumnSeries>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		double[] yValues = new double[] { 0.01, 0.05, 0.11, 2, 2.5, 10, 30 };
		for (int i = 0; i < yValues.Length; i++)
		{
			CategorySeriesItem csi1 = new CategorySeriesItem() { Y = (decimal)yValues[i] };
			(RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems.Add(csi1);
		}
	}