top of page

Extjs: Centering Sprites in Donut (Pie) Charts

Michael Bevels
Sep 26, 2016
1 min read

Updated: Feb 12, 2025

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.

  1. Draw the sprite and center it inside the donut using the chart's boxready listener.

  2. 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.




1 Comment


davidthom.a.s.282.55
Sep 02

soi cầu miền bắc mình thấy dễ xem hơn mấy trang thống kê số mình hay dùng trước đây. Lúc đầu mình cũng hơi nghi ngờ vì mấy site kiểu này hay trình bày rối, nhưng trang này vào cái là thấy bài theo đúng ngày 3 9 2026, kéo xuống là gặp phần dự đoán XSMB hôm nay nên đỡ mất công lục lọi, nội dung chia theo từng khối ngắn nhìn phát nắm được ý. Mình chỉ lướt nhanh mấy đoạn họ nói dựa vào thống kê kết quả quay trước để chọn cặp số gợi ý, đọc vừa đủ hiểu chứ không dài dòng, với lại phần chốt số để ngay dưới tiêu đề nên mắt bắt…

Like

CONTACT US

Message Received​

Address
Fortitude Technologies
1818 Library St, Suite 500
Reston, VA 20190

​​

Email
info@fortitudetec.com

​

Phone
703.956.3552

CONNECT WITH US

  • LinkedIn
  • Facebook
  • Twitter

© 2023 Fortitude Technologies LLC, INFO@FORTITUDETEC.COM

bottom of page