Tip : HTML-5 Pie chart long label wrapping in Jasper Studio 6.x & Jasper Server 6.x (OR) HighCharts pie multi line labels

This small post will give you the tip of  label wrapping for HTML-5 pie chart in Jasper Studio 6.x (as well in Jasper 6.x server)version.

I'd like to show you the problem first , how it look when there are long categories(or labels) and then will show you how to make them wrap or splitting into multiple lines. 

A sample Data : 

Problem Statement : 

OUTPUT image : How we want it ?

How to get above functionality ? Solution :

1) Right Click on the chart -> Click on Edit Chart Properties

2) Click on Advanced Properties button 

3) Click on Add button add below property : Giving Label size 

4) Property name : plotOptions.pie.dataLabels.style.width    

    Property Value : 130

From Highcharts documentation ; 

style: CSSObject

Styles for the label. Defaults to {"color": "#606060", "fontSize": "11px"}.

    

5) Property Name : plotOptions.pie.dataLabels.x

    Property Value : 3

    

From Highcharts documentation ; 

x: Number

The x position offset of the label relative to the point. Defaults to 0.

What you can find in upcoming posts ?

Applying more advanced properties to get better look & feel as well other functionalities. 

I hope this post & reference links give starting point on exploring more & more on advanced properties starting with html-5 chart in Jasper desktop reporting. 

References :

1) http://stackoverflow.com/questions/16710540/highcharts-pie-chart-multi-line-labels-overlapping

2) http://api.highcharts.com/highcharts#plotOptions.pie.dataLabels.style  and

3) http://community.jaspersoft.com/wiki/advanced-formatting-new-html5-charts

Sadakar Pochampalli

BI developer