Hello,
I read an example of Donut Chart from this :
https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/donutchart/defaultcs.aspx
Is it possible to configure Telerik HTML Chart so it can create our desirable chart as it seems on attachment ?
If it's possible how can we set the starting Line of Label Position to in the middle of Chart Area Slice ?
Thank you in advance
1 Answer, 1 is accepted
0
Hi Mozart,
Currently the position of the labels can be controlled either by
- setting the StartAngle of the DonutSeries
- or by setting the labels distance (through the kendo widget of the control)
For example:
<script>
function onChartLoad(chart, args) {
var options = {
seriesDefaults: {
labels: {
distance: 70,
}
}
};
chart.get_kendoWidget().setOptions(options);
}
</script>
<telerik:RadHtmlChart runat="server" ID="DonutChart1" Width="520" Height="500" Transitions="true"
Skin="Silk">
<ClientEvents OnLoad="onChartLoad" />
<ChartTitle Text="OS Usage Statistics for December 2012">
<Appearance Align="Center" Position="Top">
</Appearance>
</ChartTitle>
<Legend>
<Appearance Position="Right" Visible="true">
</Appearance>
</Legend>
<PlotArea>
<Series>
<telerik:DonutSeries StartAngle="120" HoleSize="65">
<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" Visible="true"></LabelsAppearance>
<TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
<SeriesItems>
<telerik:PieSeriesItem BackgroundColor="#00adcc" Exploded="false" Name="Win7" Y="55.6"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Win8" Y="2.5"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#999999" Exploded="false" Name="Vista" Y="2.8"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#888888" Exploded="false" Name="NT" Y="1.8"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#777777" Exploded="false" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Linux" Y="4.7"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#555555" Exploded="false" Name="Mac" Y="8.7"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#444444" Exploded="false" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>
</SeriesItems>
</telerik:DonutSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
Regards,
Vessy
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).