This is a migrated thread and some comments may be shown as answers.

Donut Chart with center label

2 Answers 271 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

Accepted

answered on 30 Oct 2015, 11:58 AM

Hello,

The desired functionality is not supported by the donut chart out of the box. You can, however, create a label that has an absolute position over the donut and set its value according to the target donut value. For example:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.Label1 {

position: absolute;

color: white;

font-weight: bold;

font-size: 40px;

top: 110px;

left: 93px;

}

</style>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function pageLoad() {

updateDonutAndLabel();

}

function updateDonutAndLabel() {

//generate random value

var randNum = function (min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

var currValue = randNum(0, 33);

//set random value to the chart

var chart = $find('<%=RadHtmlChart1.ClientID%>')

chart._chartObject.options.series[0].data[0].value = currValue;

chart._chartObject.options.series[0].data[1].value = 100 - currValue;

//Set hole size and remove gradient

chart._chartObject.options.series[0].holeSize = 60;

chart._chartObject.options.series[0].overlay = { gradient: "none" };

chart.repaint();

//set the current value to the label

var label = $get("<%=Label1.ClientID %>");

label.textContent = currValue + " %";

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="250px" Height="250px">

<Appearance FillStyle-BackgroundColor="#C87545"></Appearance>

<PlotArea>

<Series>

<telerik:DonutSeries>

<LabelsAppearance Visible="false"></LabelsAppearance>

<SeriesItems>

<telerik:PieSeriesItem Y="0" Name="Item1" BackgroundColor="#FFC700" />

<telerik:PieSeriesItem Y="0" Name="Item2" BackgroundColor="#6E443D" />

</SeriesItems>

</telerik:DonutSeries>

</Series>

</PlotArea>

<Legend>

<Appearance Visible="false"></Appearance>

</Legend>

</telerik:RadHtmlChart>

<asp:Label ID="Label1" Text="10" runat="server" CssClass="Label1" />

<br />

<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="updateDonutAndLabel" Text="Update Donut and Label" />

</form>

</body>

</html>

I have also created a code library with this example here - http://www.telerik.com/support/code-library/put-label-in-donut-chart-center

Regards,
Danail Vasilev
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Donut Chart with center label

2 Answers, 1 is accepted