How to create a Doughnut HTML5 chart

Requirement

Sometimes you need to create a simple one level Donut (or Doughnut? either works i suppose) chart. The HTML5 Charts library in Jaspersoft Studio provides an option of more complex DualLevelPie chart, but is there a simpler way?

Solution

A Donut chart can be created by simply adding the following property:

<hc:chartProperty name="plotOptions.pie.innerSize" value="50%"/>

The value can be percentage as above, or it can be a number in pixels if you have specific size requirements. So before adding this property your chart will look something like this:

After:

Also attaching a sample report that runs on Foodmart data source.

Ref. case #00072043

donut_chart.jrxml