For the time being the following events can be handled through the chartObject.
-drag event is fired when the plot area of the main chart is dragged.
-zoom event is fired when the mouse wheel is used in the plot area of the main chart.
-select event is fired when the range of the selector from the navigator pane is changed.

JavaScript:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function OnLoad(sender) {
                var chart = sender;
                chart._chartObject.bind("dragEnd", OnDragEnd);
                chart._chartObject.bind("selectEnd", OnSelectEnd);
                chart._chartObject.bind("zoom", OnZoom);
            }
            function OnDragEnd(e) {
                alert("OnDragEnd triggered: \nMin: " + e.axisRanges['mainAxis'].min + "\n Max: " + e.axisRanges['mainAxis'].max);
            }
            function OnSelectEnd(e) {
                alert("OnSelectEnd triggered: \nFrom: " + e.from + "\n To: " + e.to);
            }
            function OnZoom(e) {
            
                alert("OnZoom triggered: \nMin: " + e.axisRanges['mainAxis'].min + "\n Max: " + e.axisRanges['mainAxis'].max);
            }
        </script>
    </telerik:RadCodeBlock>
ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="400"
            Transitions="true">
            <ClientEvents OnLoad="OnLoad" />
            <PlotArea>
                <XAxis Name="mainAxis" DataLabelsField="SellDate" Type="Date">
                </XAxis>
                <Series>
                    <telerik:ColumnSeries DataFieldY="SellQuantity">
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
            <Navigator Visible="true">
                <XAxis Name="navAxis"></XAxis>
                <SelectionHint Visible="true" />
                <Series>
                    <telerik:AreaSeries DataFieldY="SellQuantity">
                    </telerik:AreaSeries>
                </Series>
            </Navigator>
        </telerik:RadHtmlChart>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }

    protected DataTable GetData()
    {
        DataTable dt = new DataTable();

        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("SellQuantity", typeof(int));
        dt.Columns.Add("SellDate", typeof(DateTime));

        dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));
        dt.Rows.Add(1, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(2, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(3, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(4, 7, new DateTime(2013, 03, 18));

        return dt;
    }

The property indicates whether the series name will be visible in the legend. For the time being the following workaround can be used:

JavaScript:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart.get_kendoWidget().options.series[0].visibleInLegend = false;
                chart.get_kendoWidget().options.series[1].visibleInLegend = true;
                chart.repaint();
            }
        </script>
    </telerik:RadCodeBlock>

ASPX:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="2" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Series 2">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="3" />
                            <telerik:CategorySeriesItem Y="4" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

For the time being the following workaround can be used:    

Category Axis:

JavaScript:

  <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.categoryAxis.labels.template = "Item: #=value#";
                chart.repaint();
            }
        </script>

ASPX:

       <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="25" />
                            <telerik:CategorySeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="1" />
                        <telerik:AxisItem LabelText="2" />
                        <telerik:AxisItem LabelText="3" />
                        <telerik:AxisItem LabelText="4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

Numeric Axis:
        <script>
            function changeValues(value) {
                var newValue;
                switch (value) {
                    case 1:
                        newValue = "AA";
                        break;
                    case 2:
                        newValue = "BB";
                        break;
                    case 3:
                        newValue = "CC";
                        break;
                    case 4:
                        newValue = "DD";
                        break;
                    default:
                        newValue = value;
                }
                return newValue;
            }
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.xAxis.labels.template = "#=changeValues(value)#";
                chart.repaint();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
            <PlotArea>
                <Series>
                    <telerik:ScatterLineSeries Name="series 1">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem Y="30" X="1" />
                            <telerik:ScatterSeriesItem Y="10" X="2" />
                            <telerik:ScatterSeriesItem Y="25" X="3" />
                            <telerik:ScatterSeriesItem Y="20" X="4" />
                        </SeriesItems>
                    </telerik:ScatterLineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

For the time being the following workaround can be used:

JavaScript:

    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart.get_kendoWidget().options.valueAxis.labels.template = "#if(value > 20) {# Value #=value# is a good option#} else {# value below 20 is a bad option #}#";
            chart.repaint();
        }
    </script>

ASPX:


        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="25" />
                            <telerik:CategorySeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <YAxis>
                    <LabelsAppearance DataFormatString="dd{0}">
                    </LabelsAppearance>
                </YAxis>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="item 1" />
                        <telerik:AxisItem LabelText="item 2" />
                        <telerik:AxisItem LabelText="item 3" />
                        <telerik:AxisItem LabelText="item 4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

Hover over first legend item highlights all chart sections for donut chat type.
Hover over the rest of the legend items doesn't highlight the corresponding section of the donut chart.

The options for positioning a legend in a RadHtmlChart are somewhat limited. Useful extensions:

1. Support Left/Center/Right options for legends positioned at top and bottom; support Top/Middle/Bottom options for legends positioned at left and right.

2. Support positioning legends within the plot area.

For the time being the following workaround can be used:
		<script>
			function pageLoad() {
				var kendoWidget1 = $find("<%=PieChart1.ClientID%>").get_kendoWidget();
				kendoWidget1.options.legend.position = "custom";
				kendoWidget1.options.legend.offsetX = 300;
				kendoWidget1.options.legend.offsetY = 80;
				kendoWidget1.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:PieSeries StartAngle="90">
						<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" />
						<TooltipsAppearance DataFormatString="{0} %" />
						<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="Browser Usage for April 2012">
			</ChartTitle>
		</telerik:RadHtmlChart>

If the type of the XAxis is category the field from the data source used for the XAxis must not be tried to be parsed to DateTime format.

For the time being the issue can be workaround as follows:

-Either set an appropriate DataFormatString for the XAxis labels. For example:

        <telerik:RadHtmlChart ID="ColumnChart" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="yValues">
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="xLabels" Type="category">
                    <LabelsAppearance DataFormatString="d - MM"></LabelsAppearance>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

- OR add the XAxis items manually from the data source:

ASPX:

        <telerik:RadHtmlChart ID="ColumnChart" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="yValues">
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="xLabels" Type="category">
                    <LabelsAppearance></LabelsAppearance>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        ColumnChart.DataSource = GetData();
        ColumnChart.DataBind();

        DataTable currDT = GetData();
        for (int i = 0; i < currDT.Rows.Count; i++)
        {
            AxisItem currItem = new AxisItem(currDT.Rows[i]["xLabels"].ToString());
            ColumnChart.PlotArea.XAxis.Items.Add(currItem);
        }
    }

    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("yValues");
        dt.Columns.Add("xLabels");

        dt.Rows.Add(10, "1 - 10");
        dt.Rows.Add(30, "2 - 11");
        dt.Rows.Add(20, "3 - 12");

        return dt;
    }

For the time being the following workaround can be used:

JavaScript:

    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.series[0].labels.background = "yellow";
            chart._chartObject.options.series[0].labels.border = {
                width: 2,
                dashType: "dashDot",
                color: "green"
            };
            chart.repaint();
        }
    </script>

ASPX:

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

The workaround is to set <MarkersAppearance Visible="false"  />.

For the time being the following workaround can be used:
JavaScript:
	<script>
		function pageLoad() {
			var pieChart = $find('<%=PieChart1.ClientID%>');
			pieChart._chartObject.options.seriesDefaults.labels.distance = 10;
			pieChart.repaint();
		}
	</script>
ASPX:
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="300" Height="300">
			<PlotArea>
				<Series>
					<telerik:PieSeries>
						<SeriesItems>
							<telerik:PieSeriesItem Name="Item 1" Y="18.3"></telerik:PieSeriesItem>
							<telerik:PieSeriesItem Name="Item 2" Y="35.8"></telerik:PieSeriesItem>
							<telerik:PieSeriesItem Name="Item 3" Y="38.3"></telerik:PieSeriesItem>
						</SeriesItems>
					</telerik:PieSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

When an item's value is equal to zero in a Bar or Column series,, its labels is not shown.

I would like the ability to set a gradient for the plot area of the RadHtmlChart control, instead of just being able to set a solid color.  Thanks!

A good improvement in RadHtmlChart would be the introduction of Waterfall series.

Currently there is some space between the PlotArea and the starting/ending points of the LineSeries in RadHtmlChart.
To changethat behavior, so that it is similar to the one in AreaSeries  the justified property (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.justified) can be set through the underlying Kendo Chart widget:

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script>
                function onLoad(sender) {
                    var chart = sender.get_kendoWidget();
                    var opts = chart.options;
                    opts.categoryAxis.justified = true;
                    chart.setOptions(opts);
                    chart.redraw();
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
            <ClientEvents OnLoad="onLoad" />
            <PlotArea>
                <Series>
                    <telerik:LineSeries Name="Week 15" MissingValues="Interpolate">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15" />
                            <telerik:CategorySeriesItem Y="23" />
                            <telerik:CategorySeriesItem />
                            <telerik:CategorySeriesItem Y="71" />
                            <telerik:CategorySeriesItem Y="93" />
                            <telerik:CategorySeriesItem Y="43" />
                            <telerik:CategorySeriesItem Y="23" />
                        </SeriesItems>
                    </telerik:LineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

Currently BaseUnit property for DateAxes in RadHtmlChart accepts the following values - year, months, days, hours and minutes. Improve this property by adding seconds, weeks and auto.