View Full Version : [CLOSED] Pie Chart

Dec 16, 2016, 12:24 PM
Moving this from standard forums.

Hi All

Anyone got some code to insert a label into the centre space of a pie chart or know if there is a built in way of doing this?
Basically I want a label in the space created in the centre of the Pie chart which is created by setting Donut="55".


Dec 16, 2016, 5:03 PM
Hello @CanopiusApplications!

Just add an ext:Sprite like this:

X="240" Y="240"
Width="20" Height="20"
Fill="red" />

Inside the ext:Chart's Items block.

Hope this helps!

Dec 18, 2016, 1:11 PM
Hi Fabricio

Thanks for this, my concern with doing this was the re-positioning of the sprite on user actions such as browser resize, chart resize etc. Pretty sure I can come up with a way of doing this but was hoping there was some sort of inbuilt chart property that would do it for me.

At a guess the only way to do this would be to monitor the chart resize event and set dynamic X & Y based on size.

Marked as solved unless there is a better way.


Dec 19, 2016, 8:57 AM
This is what I ended up with which seems to work fine. Not tested fully though.

<ext:Chart ID="ChartAnalystPie" Flex="1" runat="server" Animate="false" Shadow="false" InsetPadding="25" Theme="Generic" >

<Resize Handler="var sp = item.items[0].surface.items.get('spcount'); sp.setAttributes({x:adjWidth / 2, y:adjHeight / 2}, true);"></Resize>

<ext:Sprite Type="Text" Text="MyLabel" Width="100" Height="20" X="0" Y="0" Fill="red" SpriteID="spcount"></ext:Sprite>

Dec 19, 2016, 4:11 PM
Hello @CanopiusApplications!

Thanks for the feedback, and glad it helped. Unfortunately yes, that seems to be one of the best solutions on your case. Anything other than that would involve binding the events to the sprite you add in another manner. There's no built-in method to do such a thing as far as I know.