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>