How to display pie charts labels and tooltip in Indian Rupee format and also add symbol “₹” to it.

Problem:

To display pie chart labels in Indian rupee format for example 12,34,567 which is by default displayed as 1,234,567 when you create a report in studio and also add the Indian rupee symbol to the labels.

Solution:

This can be achieved using the formatter function for the pie chart data labels. HTML5 Charts or HighCharts allow usage of JavaScript functions as property values. You will need to enable them for the Jaspersoft Studio and Jaspererver before you use them. 

For TIBCO JasperSoft® Studio - 

Go to Window -> Preferences -> Select JasperSoft Studio category -> Select Properties category -> First type in the filter field "functions.allowed" to check if you already have the property.

If you don't see anything returned by the search, press Add Property name: com.jaspersoft.jasperreports.highcharts.function.properties.allowed Property value: true

For JasperReports® Server - 

Go to your <jasperserver-pro>/WEB-INF/classes, edit jasperreports.properties file -> Append com.jaspersoft.jasperreports.highcharts.function.properties.allowed=true and restart the application server. 

To format the datalabels for the pie chart, you will need to Edit the chart properties -> Go to Chart Formatting -> Show Advanced properties -> Navigate to plotOptions -> bar-> dataLabels -> formatter -> edit the property value and add the below function - 

<hc:chartProperty name="plotOptions.pie.dataLabels.formatter">
    <hc:propertyExpression>
        <![CDATA["function() {
                      var label     = this.y;
                      x             = this.y.toString();
                      var lastThree = x.substring(x.length-3);
                      var otherNumbers = x.substring(0,x.length-3);

                      if(otherNumbers != ''){
                          lastThree = ',' + lastThree;
                      }
                      var res       = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",")
                                      + lastThree;

                      return res + '₹';
                  }"]]>
    </hc:propertyExpression>
</hc:chartProperty>

You can interchange the position of the symbol ‘₹’ in return if you want it to be a prefix.

For the tooltip of the pie chart, you will need to add the same function as below except the symbol in plotOptions -> bar-> tooltips -> pointFormatter.

<hc:chartProperty name="plotOptions.pie.dataLabels.formatter">
    <hc:propertyExpression>
        <![CDATA["function() {
                      var label = this.y;
                      x = this.y.toString();
                      var lastThree = x.substring(x.length-3);
                      var otherNumbers = x.substring(0,x.length-3);

                      if(otherNumbers != ''){
                          lastThree = ',' + lastThree;
                      }
                      var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;

                      return res;
                 }"]]>
    </hc:propertyExpression>
</hc:chartProperty>

To add the rupee symbol to the tooltip, you will need to add it in the plotOptions -> bar-> tooltips ->valuePrefix or valueSuffix.

Related links -

• https://community.jaspersoft.com/wiki/display-axis-label-numbers-indian-numeric-system-html5-charts
• https://community.jaspersoft.com/wiki/using-functions-html5-charts-highcharts