Jaspersoft BI Tools

iReport,Jaspersoft Design Studio,Jaspersoft Server, Schema Workbench,Analysis,Dashboards, Self Service BI, Domains,Topics,Ad-Hoc Reports, Jaspersoft ETL, Embedding BI,HTML-5 charts, Fusion Charts,JFree Charts,Drill down reports , Drill down Dashboards,Visualize.js, Performance Tuning, D3 Charts, Jaspersoft Customization

Wednesday, January 21, 2015

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 :


Sadakar Pochampalli
BI developer