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

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>

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>

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>

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

For the time being the property can be set through the kendoWidget:
Available options can be found here - http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.weekStartDay
		<script>
			function pageLoad() {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject;
				kendoWidget.options.categoryAxis.weekStartDay = 1;
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1" DataFieldY="SellQuantity">
					</telerik:ColumnSeries>
				</Series>
				<XAxis DataLabelsField="SellDate">
					<LabelsAppearance DataFormatString="yyyy/MM/dd"></LabelsAppearance>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

For the time being the property can be set through the kendoWdiget:

        <script>
            function pageLoad() {
                var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject;
                kendoWidget.options.series[0].labels.distance = 20;
                kendoWidget.redraw();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:PieSeries>
                        <SeriesItems>
                            <telerik:PieSeriesItem Y="30" />
                            <telerik:PieSeriesItem Y="10" />
                            <telerik:PieSeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

For the time being you can set the property through the kendoWidget. All available options are available at http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.connectors
        <script>
            function pageLoad() {
                var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject;
                kendoWidget.options.series[0].connectors = {width: "3", color: "#ff0000"};
                kendoWidget.redraw();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:PieSeries>
                        <SeriesItems>
                            <telerik:PieSeriesItem Y="30" />
                            <telerik:PieSeriesItem Y="10" />
                            <telerik:PieSeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

Series tooltips are not visible in a Stock chart when the same series is added programmatically in the plotarea and the navigator simultaneously.

The workaround is to:
1) Create different series for the plot area and the navigator.
2) Explicitly set the tooltips' visibility with JS like this:
        <script type="text/javascript">
            function pageLoad() {
                var chart = $find("Chart");
                var series = chart._chartObject.options.series[0];
                series.tooltip.visible = true;
                //repaint the chart to apply the changes
                chart.repaint();
            }
        </script>

The CSS styles of the selection hint of the navigator in HtmlChart are not applied correctly in a data navigation scenario.

The workaround is to override the styles that you need like this:
        .k-navigator-hint .k-tooltip {
            border: 2px solid red !important;
            color: #000 !important;
        }

For the time being properties can be set to the kendoWidget on the client:
ASPX:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.xAxis.min = new Date(2013, 04, 01);
				chart._chartObject.options.xAxis.max = new Date(2013, 05, 01);
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
						<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
						</LabelsAppearance>
						<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
					</telerik:ScatterLineSeries>
				</Series>
				<XAxis BaseUnit="Days">
					<TitleAppearance Text="Sell Date">
					</TitleAppearance>
					<LabelsAppearance DataFormatString="d" RotationAngle="45">
					</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)
	{
		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(2013, 05, 12));
		dt.Rows.Add(2, 5, new DateTime(2013, 05, 13));
		dt.Rows.Add(3, 6, new DateTime(2013, 05, 17));
		dt.Rows.Add(4, 4, new DateTime(2013, 05, 18));
		dt.Rows.Add(5, 7, new DateTime(2013, 05, 22));

		return dt;
	}

For the time being the function can be set through the kendoWidget:
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.series[0].markers.type = function (point) {
					if (point.value > 2) {
						return "triangle";
					}
					else {
						return "circle";
					}
				};
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1" />
							<telerik:CategorySeriesItem Y="2" />
							<telerik:CategorySeriesItem Y="3" />
						</SeriesItems>
					</telerik:LineSeries>
				</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>

For the time being the property can be set through the kendoWidget:
ASPX:
		<script>
			function pageLoad() {
				$ = $telerik.$;
				var kendoWidget = $find("<%=PieChart1.ClientID%>")._chartObject;
				kendoWidget.options.series[0].labels.visible = function (point) {
					if (point.value < 5) {
						return false;
					} else {
						return true;
					};
				}
				kendoWidget.redraw();
			}
		</script>

		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px">
			<PlotArea>
				<Series>
					<telerik:DonutSeries 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:DonutSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Browser Usage for April 2012">
			</ChartTitle>
		</telerik:RadHtmlChart>

Under the standard definition of data format strings, range scaling can be applied (i.e. divide by 1000) using , prefixing the implied or explicit decimal place.
e.g. DataFormatString="{0:#,#,}" will display 3000000 as 3,000

This works on RadPivotGrid correctly, but RadHTMLChart does not work either on data labels, axis labels, or pretty much anywhere else. Apparently a problem with kendo.format(), which does not do this as per documentation for DataFormatString

N.B. This is commonly used in finance presentations to globally present in $thousands.

When data-bound categorical series has zeros in the x-axis labels they are parsed and the zeros disappear. For example:
ASPX:

            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <telerik:RadHtmlChart runat="server" ID="Radhtmlchart1">
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries DataFieldY="Score1"></telerik:ColumnSeries>
                   </Series>

                   <XAxis DataLabelsField="Student">
                    </XAxis>
                </PlotArea>
            </telerik:RadHtmlChart>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        Radhtmlchart1.DataSource = GetData();
        Radhtmlchart1.DataBind();
    }
    protected DataTable GetData()
    {
        DataTable table = new DataTable();

        table.Columns.Add("Student", typeof(string));
        table.Columns.Add("Score1", typeof(int));

        table.Rows.Add(new object[] { "0806014562", 40 });
        table.Rows.Add(new object[] { "0806014562", 50 });
        table.Rows.Add(new object[] { "0806014562", 70 });
        return table;
    }
Workarounds:
1) Use format string to add the desired missing zeros when parsed.

<LabelsAppearance DataFormatString="0{0}"></LabelsAppearance>

2) Add items programmatically

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

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

Was hoping for the functionality where the difference area between lines could be colored accordingly.

example: htmlchart with 3 lines 1:+standard 2:-standard and 3:Actual value. If the Actual value line is below the -standard, the difference area should be colored red. In case it crosses the +standard it should be green.

Likely the Actual value line would be an Area-serie but that aside.

For the time being the property can be set through the kendoWidget:
$find('chartID').get_kendoWidget().options.panes[1].height = 60;
$find('chartID').get_kendoWidget().redraw();

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>