Label/Value in the middle of a donut hole pie-chart

8,321 views
Skip to first unread message

Al Bunch

unread,
Jan 15, 2014, 9:42:15 AM1/15/14
to flot-...@googlegroups.com
Is there an easy way to place a value in the middle of a pie chart?  

Specifically, I'm using the pie chart to display a rolling 90 day window of the number of tickets in a certain state and I'd like to place a total of all tickets being displayed in the middle/donut hole area.

If this isn't achievable, can you recommend an alternative package that's flexible enough to get this done?
Message has been deleted

j...@rouillard.org

unread,
Jan 17, 2014, 3:37:37 AM1/17/14
to flot-...@googlegroups.com
There is no method specifically built for this, but you have access to the data, so you could put a div over your graph with the value in it.

Here is a jsfiddle on a solution (if i understood correctly your question):

Ced

unread,
Jan 17, 2014, 4:20:56 PM1/17/14
to flot-...@googlegroups.com
Nice fiddle.  I have a suggestion, though...
The horizontal text centering was a little off based on my browser window's size... here's some CSS that should center the text better in both horizontal and vertical dimension.  It works well with varying font sizes as well:

#center {
  height: 250px;
  line-height: 250px;
  padding-top: 8px;
  position: absolute;
  text-align: center;
  top: 0;
  vertical-align: middle;
  width: 250px;

Al Bunch

unread,
Jan 21, 2014, 8:38:41 AM1/21/14
to flot-...@googlegroups.com
Many thanks - this gets me exactly what I need, I don't know why I didn't think about an overlay before.

Ced - your CSS fixed the offset on my display as well.

Thanks again to both of you.
Reply all
Reply to author
Forward
0 new messages