Completed
Last Updated: 07 Apr 2016 18:45 by Anil
Tom
Created on: 04 Dec 2013 18:50
Category: HtmlChart
Type: Feature Request
4
ADD legend positioning options for RadHtmlChart
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>
2 comments
Anil
Posted on: 07 Apr 2016 18:45
This is mixing up Axis Labels in legend in the bottom of chart. How do we add some space between X-Axis labels in Legend at the bottom.

function changelegendposition(KendoChart) {
    KendoChart.options.legend.position = "custom";
    KendoChart.options.legend.orientation = "horizontal";
    KendoChart.options.legend.offsetX = 60;
    KendoChart.options.legend.offsetY = 198;
    KendoChart.options.labels.offsetX = 10;
    KendoChart.redraw();
}

chart height is 220
Attached Files:
matt
Posted on: 07 Aug 2014 16:21
sweet tip, was looking to do the same. Offset properties would be ideal.