Completed
Last Updated: 20 Apr 2022 16:11 by ADMIN
ADMIN
Marin Bratanov
Created on: 02 May 2014 13:08
Category: HtmlChart
Type: Feature Request
2
ADD Properties to control the size of the legend explicitly in RadHtmlChart
Width and height properties for the legend that will provide firm dimensions in pixels, so regardless of the series names' length, it will always have constant size.
You can set width and height through the kendo widget:
		<script>
			function pageLoad() {
				var chart = $find("<%=DonutChart.ClientID%>").get_kendoWidget();
				chart.options.legend.height = 80;
				chart.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="DonutChart" Width="500" Height="500" 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>
3 comments
ADMIN
Vessy
Posted on: 20 Apr 2022 16:11

The requested properties are available through the Legend.Appearance option of RadHtmlChart:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
           <Legend>
               <Appearance Width="200" Height="300" OffsetX="10" OffsetY="20" ></Appearance>
           </Legend>
            ...
        </telerik:RadHtmlChart>

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Danail Vasilev
Posted on: 15 Feb 2015 11:40
Regarding positioning the legend without affecting the appearance of the plot area you can use "custom" position and offsetX/offsetY properties. You can set these properties through the kendo widget as illustrated in the http://feedback.telerik.com/Project/108/Feedback/Details/67001 feedback item.
ADMIN
Marin Bratanov
Posted on: 07 May 2014 08:32
This is a part of the request from http://feedback.telerik.com/Project/108/Feedback/Details/126326 so you may want to follow it too.