When user moved/resized RangeSelector it could be OnClientNavigationRangeChangedEvent fired, with new RangeSelector.From and RangeSelector.To values.

The property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.maxDateGroups) can be set through the kendoWidget:
JavaScript:

        <script>
            function OnLoad(args) {
                var kendoWidget = args.get_kendoWidget();
                kendoWidget.options.categoryAxis.maxDateGroups = 8;
                kendoWidget.options.categoryAxis.baseUnit = 'fit';
                kendoWidget.redraw();
            }
        </script>

ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Width="640px" Height="480px">
            <ClientEvents OnLoad="OnLoad" />
            <PlotArea>
                <Series>
                    <telerik:LineSeries DataFieldY="SellQuantity">
                        <LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
                    </telerik:LineSeries>
                </Series>
                <XAxis DataLabelsField="SellDate">
                    <TitleAppearance Text="Sell Date">
                    </TitleAppearance>
                    <LabelsAppearance DataFormatString="d">
                    </LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                </XAxis>
                <YAxis>
                    <TitleAppearance Text="Quantity">
                    </TitleAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Sold Cars per Date">
            </ChartTitle>
        </telerik:RadHtmlChart>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart2.DataSource = GetData();
        RadHtmlChart2.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(2, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(4, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(5, 7, new DateTime(2013, 03, 18));

        return dt;
    }

For the time being the function can be set through the kendoWidget:

<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Product 1">
                <TooltipsAppearance BackgroundColor="Orange" DataFormatString="{0} sales" />
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="15000" />
                    <telerik:CategorySeriesItem Y="23000" />
                    <telerik:CategorySeriesItem Y="10000" />
                    <telerik:CategorySeriesItem Y="16000" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <XAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside"
            Reversed="false">
            <Items>
                <telerik:AxisItem LabelText="1" />
                <telerik:AxisItem LabelText="2" />
                <telerik:AxisItem LabelText="3" />
                <telerik:AxisItem LabelText="4" />
            </Items>
            <LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" />
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Quarters" />
        </XAxis>
        <YAxis AxisCrossingValue="0" Color="Black" MajorTickSize="1" MajorTickType="Outside"
            MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
            Step="10000">
            <LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Sales" />
        </YAxis>
    </PlotArea>
    <ChartTitle Text="Product Sales for 2011">
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom" />
    </Legend>
</telerik:RadHtmlChart>
<script>
    function pageLoad() {
        $ = $telerik.$;
        var kendoWidget = $find("<%=ColumnChart1.ClientID%>").get_kendoWidget();
        kendoWidget.options.series[0].labels.position = function (point) {
            if (point.value < 20000) {
                console.log(1);
                return "insideEnd";
            } else {
                console.log(2);
                return "outsideEnd";
            }
        }
        kendoWidget.redraw();
    }
</script>

For the time being you can manually fetch the data and pass it to the chart:
		<script>
			function pageLoad() {
				var dataSource = $find('<%= RadClientDataSource1.ClientID %>');
				dataSource.fetch(function (args) {
					var data = args.get_data(),
						chart = $find('<%=RadHtmlChart1.ClientID%>');
					//workaround
					chart.set_dataSource(data);
					chart.repaint();
				});
			}
		</script>
		<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
			<DataSource>
				<WebServiceDataSourceSettings>
					<Select Url="spain-electricity.json" DataType="JSON" />
				</WebServiceDataSourceSettings>
			</DataSource>
			<Schema>
				<Model>
					<telerik:ClientDataSourceModelField FieldName="year" DataType="String" />
					<telerik:ClientDataSourceModelField FieldName="solar" DataType="Number" />
				</Model>
			</Schema>
		</telerik:RadClientDataSource>

		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" ClientDataSourceID="RadClientDataSource1">
			<PlotArea>
				<Series>
					<telerik:LineSeries DataFieldY="year" Name="year">
					</telerik:LineSeries>
				</Series>
				<XAxis DataLabelsField="year"></XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

A workaround is to use the ClientTemplate and change the strings manually with some JavaScript (http://www.telerik.com/help/aspnet-ajax/htmlchart-client-templates-for-tooltips-and-labels-execute-javascript-and-display-html.html), e.g.:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400px" Height="400px">
	<PlotArea>
		<Series>
			<telerik:BarSeries>
			<LabelsAppearance>
			<ClientTemplate>
				#if (value > 0) {# $#=value# #} else {# -$#=value * -1# #} #
			</ClientTemplate>
			</LabelsAppearance>
				<SeriesItems>
					<telerik:CategorySeriesItem Y="20" />
					<telerik:CategorySeriesItem Y="10" />
					<telerik:CategorySeriesItem Y="-30" />
				</SeriesItems>
			</telerik:BarSeries>
		</Series>
	</PlotArea>
</telerik:RadHtmlChart>

Hello,

The RadHtmlCharts are great! One that is missing however -- a spectrum chart, aka a spectral chart. This takes in a set of data points and renders the values as color-dense shadings. Screenshot attached of one we made ourselves.

This would be useful for scientific applications.


thanks,
matt

If our X-axis is filled by numeric values, we don't want to navigate by date or by category or by logaritmic. We may want those values, the same shown in X-axis, determinating our chart.
For instance: latitude (X-axis) and longitude (Y-axis). We want to navigate by latitude and select view from lat. = 44 to lat. = 45. Date or datetime would be meaningless.
Will it be possible?

I have a stacked bar RadHtmlChart that is created programmatically in the code behind.
When I create the chart, and set the width to Unit.Pixel(1500), it works fine, as shown in Working.png. However, when I change the value to Unit.Percentage(90), the chart is not rendered properly at all.

Any fixes/workarounds for this?

Seán


For the time being you must set percentage to the chart's wrapper. For example:
CSS:
	<style type="text/css">
		html, body, form {
			padding: 0;
			margin: 0;
			height: 100%;
			overflow: hidden;
		}

		.myChart {
			width: 100% !important;
			height: 100% !important;
		}
	</style>
ASPX:
		<div style="width: 30%; height: 40%; border: 1px solid green;">
			<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" CssClass="myChart" 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>
					</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>
		</div>

I have a column series chart.
I have set colorfield for each series.
Series background change correctly, but label color does not change as per series color.
I can not set label color dynamically.

The lines can be similar to the ones in the box plot chart type - http://www.telerik.com/help/aspnet-ajax/htmlchart-types-box-plot-chart.html .

For the time being you can use transparent box plot series in order to simulate this. For example:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				//Attach the legendItemClick event on pageLoad:
				var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked);
			}
			function OnLegendClicked(e) {
				if (e.seriesIndex >= 3) {
					var meanSeriesVisible = e.sender.options.series[3].visible;
					var medianSeriesVisible = e.sender.options.series[4].visible;

					if (meanSeriesVisible == medianSeriesVisible) {
						if (e.series.visible == false) {
							e.sender.options.series[5].visible = false;
						}
					}
					else {
						if (e.series.visible == false) {
							e.preventDefault();
							e.sender.options.series[3].visible = false;
							e.sender.options.series[4].visible = false;
							e.sender.options.series[5].visible = true;
							e.sender.options.transitions = false;
							e.sender.redraw();
						}
					}
				}
			}
		</script>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000" Height="500">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Germany Gold" GroupName="Germany" Gap="1">
                        <Appearance>
                            <FillStyle BackgroundColor="#DDD9C3" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="13" />
                            <telerik:CategorySeriesItem Y="12" />
                            <telerik:CategorySeriesItem Y="16" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Silver" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#C4BD97" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="17" />
                            <telerik:CategorySeriesItem Y="16" />
                            <telerik:CategorySeriesItem Y="10" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Bronze" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#948A54" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="26" />
                            <telerik:CategorySeriesItem Y="20" />
                            <telerik:CategorySeriesItem Y="15" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" Color="White" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:BoxPlotSeries Name="Mean" Visible="true">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="11" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="15" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="14" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                    <telerik:BoxPlotSeries Name="Median" Visible="false">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                    <telerik:BoxPlotSeries Name="Mean and Median" Visible="false">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="11" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="15" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="14" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Number of Medals" />
                </YAxis>
                <XAxis>
                    <LabelsAppearance DataFormatString="Year {0}" />
                    <Items>
                        <telerik:AxisItem LabelText="2000" />
                        <telerik:AxisItem LabelText="2004" />
                        <telerik:AxisItem LabelText="2008" />
                    </Items>
                </XAxis>
            </PlotArea>
            <ChartTitle Text="Olympic Medals Per Country Over the Years">
            </ChartTitle>
            <Legend>
                <Appearance Position="Right" />
            </Legend>
        </telerik:RadHtmlChart>

export of the chart to image (or pdf) will show an html code of non-breaking space in chart title and chart legend, but not in a label added to HtmlChartHolder

allow for the chart plot area to be fixed width not counting the axis text. the issue I have is the legend on right side of chart changes the widths of chart when the text is long.

For the time being you can resize the chart with set_width/set_height methods. For example:

<head runat="server">
	<title></title>
	<style>
		.RadHtmlChart.k-chart, table {
			width: 100%;
			height: 100%;
		}

		td {
			border: 1px solid green;
			width: 60%;
			height: 60%;
			overflow:hidden;
		}

		html, body, form {
			height: 100%;
			overflow: hidden;
			margin: 0;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function resizedw() {
				// Haven't resized in 100ms!
				var donut = $find("<%=DonutChart.ClientID%>");
				var radar = $find("<%=RadarAreaChart.ClientID%>");

				var docDimensions = $telerik.getBounds(document.body);
				resizeChart(donut, docDimensions);
				resizeChart(radar, docDimensions);
			}

			function resizeChart(chart, docDimensions) {
				var chartDimensions = $telerik.getBounds(chart.get_element().parentElement);
				chart.set_width("'" + (chartDimensions.width / docDimensions.width) + "%'");
				chart.set_height(("'" + chartDimensions.height / docDimensions.height) + "'%");
			}

			var doit;
			window.onresize = function () {
				clearTimeout(doit);
				doit = setTimeout(resizedw, 1000);
			};
		</script>
		<table>
			<tr>
				<td>
					<telerik:RadHtmlChart runat="server" ID="DonutChart" Width="100%" Height="100%" Transitions="true">
						<Appearance>
							<FillStyle BackgroundColor="White"></FillStyle>
						</Appearance>
						<ChartTitle Text="OS Usage Statistics for December 2012">
							<Appearance Align="Center" Position="Top"></Appearance>
						</ChartTitle>
						<PlotArea>
							<Series>
								<telerik:DonutSeries>
									<LabelsAppearance Visible="false">
									</LabelsAppearance>
									<TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White"></TooltipsAppearance>
									<SeriesItems>
										<telerik:PieSeriesItem BackgroundColor="#00adcc" Name="Win7"
											Y="55.6"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#cccccc" Name="Win8" Y="2.5"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#999999" Name="Vista" Y="2.8"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#888888" Name="NT" Y="1.8"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#777777" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#666666" Name="Linux" Y="4.7"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#555555" Name="Mac" Y="8.7"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#444444" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>
									</SeriesItems>
								</telerik:DonutSeries>
							</Series>
						</PlotArea>
					</telerik:RadHtmlChart>
				</td>
				<td>
					<telerik:RadHtmlChart runat="server" ID="RadarAreaChart" Width="100%" Height="100%" Transitions="true">
						<PlotArea>
							<Series>
								<telerik:RadarAreaSeries Name="Position" MissingValues="Gap">
									<Appearance>
										<FillStyle BackgroundColor="#00adcc"></FillStyle>
									</Appearance>
									<LineAppearance Width="1" />
									<MarkersAppearance Visible="false" />
									<LabelsAppearance Visible="false"></LabelsAppearance>
									<SeriesItems>
										<telerik:CategorySeriesItem Y="159"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="170"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="100"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="103"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="173"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="107"></telerik:CategorySeriesItem>
									</SeriesItems>
								</telerik:RadarAreaSeries>
								<telerik:RadarAreaSeries Name="Person" MissingValues="Gap">
									<Appearance>
										<FillStyle BackgroundColor="red"></FillStyle>
									</Appearance>
									<LabelsAppearance Visible="false">
									</LabelsAppearance>
									<LineAppearance Width="1" />
									<MarkersAppearance Visible="false"></MarkersAppearance>
									<SeriesItems>
										<telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="168"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="150"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="109"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="76"></telerik:CategorySeriesItem>
									</SeriesItems>
								</telerik:RadarAreaSeries>
							</Series>
							<XAxis Color="Black" Reversed="false" StartAngle="180">
								<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
								<MinorGridLines Visible="false"></MinorGridLines>
								<Items>
									<telerik:AxisItem LabelText="Soft Skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Sector knowledge"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Finance knowledge"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Work experience"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Win7 skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="MS Office skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Programming skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Database skills"></telerik:AxisItem>
								</Items>
							</XAxis>
							<YAxis Visible="false">
								<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
								<MinorGridLines Visible="false"></MinorGridLines>
								<LabelsAppearance Step="1"></LabelsAppearance>
							</YAxis>
							<CommonTooltipsAppearance Color="White"></CommonTooltipsAppearance>
						</PlotArea>
						<ChartTitle Text="Position Profile">
							<Appearance Align="Center" BackgroundColor="White" Position="Top">
							</Appearance>
						</ChartTitle>
						<Legend>
							<Appearance BackgroundColor="White" Position="Bottom">
							</Appearance>
						</Legend>
					</telerik:RadHtmlChart>
				</td>
			</tr>
		</table>
	</form>

For the time being you can use the following workaround:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <script>
            function pageLoad() {
                var position = 'insideEnd'; // 'center'
                $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.position = position;
                $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.distance = -20;
                $find("<%=PieChart1.ClientID%>")._chartObject.redraw();
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
            <PlotArea>
                <Series>
                    <telerik:PieSeries StartAngle="90">
                        <LabelsAppearance DataFormatString="{0} %" />
                        <TooltipsAppearance DataFormatString="{0} %" />
                        <Items>
                            <telerik:SeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" YValue="18.3" />
                            <telerik:SeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" YValue="35.8" />
                            <telerik:SeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" YValue="38.3" />
                            <telerik:SeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" YValue="4.5" />
                            <telerik:SeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" YValue="2.3" />
                        </Items>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
            <ChartTitle Text="Browser Usage for April 2012">
            </ChartTitle>
        </telerik:RadHtmlChart>
        <script>
            var INSIDE_END = "insideEnd",
                CENTER = "center",
                LEFT = "left",
                RIGHT = "right",
                dataviz = kendo.dataviz,
                Box2D = dataviz.Box2D,
                math = Math;

            kendo.dataviz.PieSegment.fn.reflowLabel = function () {
                var segment = this,
                    sector = segment.sector.clone(),
                    options = segment.options,
                    label = segment.label,
                    labelsOptions = options.labels,
                    labelsDistance = labelsOptions.distance,
                    angle = sector.middle(),
                    lp, x1, labelWidth, labelHeight;

                if (label) {
                    labelHeight = label.box.height();
                    labelWidth = label.box.width();
                    if (labelsOptions.position == CENTER) {
                        sector.r = math.abs((sector.r - labelHeight) / 2) + labelHeight + labelsDistance;
                        lp = sector.point(angle);
                        label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
                    } else if (labelsOptions.position == INSIDE_END) {
                        sector.r = sector.r - labelHeight / 2 + labelsDistance;
                        lp = sector.point(angle);
                        label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
                    } else {
                        lp = sector.clone().expand(labelsDistance).point(angle);
                        if (lp.x >= sector.c.x) {
                            x1 = lp.x + labelWidth;
                            label.orientation = RIGHT;
                        } else {
                            x1 = lp.x - labelWidth;
                            label.orientation = LEFT;
                        }
                        label.reflow(Box2D(x1, lp.y - labelHeight, lp.x, lp.y));
                    }
                }
            }
        </script>

For the time being you can use the following workaround:
1) Either hide the chart with visibility:hidden instead of display:none
2) Or use the following workaround:
		<div id="div1" style="display: none;">
			<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
				<PlotArea>
					<Series>
						<telerik:ColumnSeries Name="Product 1">
							<SeriesItems>
								<telerik:CategorySeriesItem Y="1" />
								<telerik:CategorySeriesItem Y="2" />
								<telerik:CategorySeriesItem Y="3" />
							</SeriesItems>
						</telerik:ColumnSeries>
					</Series>
				</PlotArea>
			</telerik:RadHtmlChart>
		</div>
		<input type="button" onclick="showChart(); return false;" value="Show Chart" />
		<script>
			Telerik.Web.UI.RadHtmlChart.prototype._getMainConfig = function () {
				var that = this;
				//when visible is false - nothing is sent from the server to save transferred data
				//e.g - there are properties set but visible is false - we do not need to send those properties amyway
				//that is why - set visible: false when nothing is sent from the server
				that._options = $telerik._getPropertiesParameter(that, that.constructor);
				that._cleanUpConfigProperties();

				that._options["theme"] = that.get_skin();
				//that._options["visible"] = $(that.get_element()).is(':visible');
				that._options["title"] = that._chartTitle ? that._parseObject(that._chartTitle) : { visible: false };
				that._options["legend"] = that._legend ? that._parseObject(that._legend) : { visible: false };

				if (that._chartArea) {
					that._options["chartArea"] = that._parseObject(that._chartArea);
				}

				if (that._isSparklineChart()) {
					that._setMinimumSparklineWidth();
				}

				if (that._plotArea) {
					that._configurePlotArea();
				}

				if (that._series) {
					/*jshint evil: true */
					that._options["series"] = eval(that._series);
					/*jshint evil: false */
				}

				if (that._isStockChart()) {
					that._configureStockChart();
				}
			}
		</script>

If set to true the chart will round the first and last date to the nearest base unit.

For the time being the reversed properties can be set through the kendo widget:
		<script>
			function pageLoad(sender, args) {

				var radarChart = $find('<%=RadarLineChart.ClientID%>').get_kendoWidget();
				var polarChart = $find('<%=PolarAreaChart.ClientID%>').get_kendoWidget();


				radarChart.options.valueAxis.reverse = true;
				polarChart.options.yAxis.reverse = true;


				radarChart.options.categoryAxis.reverse = true;
				polarChart.options.xAxis.reverse = true;

				radarChart.redraw();
				polarChart.redraw();
			}
		</script>

		<telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="345" Height="345">
			<PlotArea>
				<XAxis Reversed="true">
					<Items>
						<telerik:AxisItem LabelText="January"></telerik:AxisItem>
						<telerik:AxisItem LabelText="February"></telerik:AxisItem>
						<telerik:AxisItem LabelText="March"></telerik:AxisItem>
						<telerik:AxisItem LabelText="April"></telerik:AxisItem>
						<telerik:AxisItem LabelText="May"></telerik:AxisItem>
					</Items>
				</XAxis>
				<YAxis Reversed="true">
				</YAxis>
				<Series>
					<telerik:RadarLineSeries Name="Avg Low" MissingValues="Gap">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="8000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="11000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="13000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
						</SeriesItems>
					</telerik:RadarLineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

		<telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="345" Height="345">
			<PlotArea>
				<XAxis Reversed="true">
				</XAxis>
				<YAxis Reversed="true">
				</YAxis>
				<Series>
					<telerik:PolarAreaSeries Name=">12.3 knots">
						<SeriesItems>
							<telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem>
						</SeriesItems>
					</telerik:PolarAreaSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>