0

The goal is to create a pie chart, where

  • the percentages (calculated or manually specified) are shown inside the pie.
  • data is shown upon mousehover.

Clarification: e.g. imagine a set consisting of 2 data labels. One is called apples (containing "15" apples), and the other one is called pears (containing "15" pears), then the percentages, always visible, shown inside the pie would be "50%" and "50%", whereas the data shown on mousehover would be "15" and "15".

Such has been already done in a previous post: Displaying percentage inside pie item for highcharts with JSFiddle 1.

However, would it be possible to

  • use a semi-circle donut pie chart, instead of a circle pie chart. (what is a semi-circle donut pie chart? -> JSFiddle 2)?

  • have text labels (data names) on the chart inside the pie chart, such as in Fiddle 2.

*Clarification: e.g. having the data labels "apples" and "pears" on the pie by default, such as "Firefox" and "Chrome" in Fiddle 2.*

Any help would be greatly appreciated, as I find it hard to combine these Fiddles, since I am far underexperienced with JS.

E.g. Fiddle 1 works/starts with $(function () { var chart = new Highcharts.Chart({,

whereas Fiddle 2 starts with $(function () { $('#container').highcharts({.

The Highcharts API Reference manual is learning me slowly, as a beginner.

Community
  • 1
  • 1
O0123
  • 481
  • 9
  • 28

1 Answers1

2

Since I'm not sure which you prefer here is a fiddle you can look at that leverage the highcharts formatter attribute:

formatter: function() {
       return Math.round(this.percentage*100)/100 + ' %';
}

I believe what you want is something like this.

alacy
  • 4,972
  • 8
  • 30
  • 47
  • Thanks, a very good and fast answer. Your first combination would be great! --- However, would you think it is possible to have the texts (data labels) (i.c. *Firefox*, *Chrome*, ...) inside the pie, always visible, such as in Fiddle 2 (to show **apples** and **pears** on the pie by default)? – O0123 Jan 23 '15 at 20:46
  • @VincentVerheyen do you mean like this --> http://jsfiddle.net/potk4jpd/4/? I think you are misunderstanding what a pie chart is. The percentages are calculated by the number of a specific type say `apples` divided by the total number of items. So if you had 15 apples and 15 pears each would be split 50% because the total number is 30. If you had 10 apples, 10 pears, and 10 oranges each would be 33.3%. – alacy Jan 23 '15 at 20:47
  • I apologize for my misunderstanding. I first thought your answer didn't calculate the percentages, and just showed the original mousehover data again, but with a %-mark after them). Later, I noticed I was mistaken. --- You had already achieved this aspect of the question, great! --- The only remaining part is getting the labels (**apples** and **pears**) on the pie. – O0123 Jan 23 '15 at 20:51
  • @VincentVerheyen see the edit that I just made to my answer, namely the fiddle I added at the end. – alacy Jan 23 '15 at 20:57
  • You nailed it! Many thanks. --- And you are handing out pies? You are the one who should be getting presents. :) – O0123 Jan 23 '15 at 20:59
  • If you would still have some more motivation, I just asked a similar question with the same features as your solution, but using a **single horizontal stacked bar** instead of a *pie chart*. The question can be found here: [Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover](http://stackoverflow.com/questions/28124459/highcharts-single-horizontal-stacked-bar-chart-with-data-names-labels-and-ag). – O0123 Jan 24 '15 at 10:57