Recently I wanted to center a sprite (image or text) inside an Extjs donut chart (Sencha Charts, Extjs 5.1+). There's not an out-of-the-box way to do this in Extjs and I couldn't find much online, so I figured out a solution and now I'm sharing it. I was using this to display a project logo image in the center of the donut, however the same principal applies to display any sprite to include textual data.
You'll need to do two things, which require knowing the image size, the chart's container size, and some simple math.
Draw the sprite and center it inside the donut using the chart's boxready listener.
Move the sprite to the donut's center using the chart's resizeHandler.
Please note you'll need to account for things like insetPadding and legend height/width depending where/if you have a legend displayed. Please see the code snippet below for implementation details on the boxready listener and resizeHandler.
Comments