Semi-circle donut pie chart with labels (data names) and %-ages on the pie ... and data numbers on mousehover

Question

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.

Answer 1

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.