Change Default Fonts in High Charts Inside Jasper Server

Requirements: To apply/modify font changes like font-family/font-size/font-color in the Jasper high charts reports created using both the Jaspersoft studio and ad-hoc editor.

Prerequisites: Jasper server professional version, Jaspersoft studio professional.

Steps:
1. Change the javascript optimize to false because we are modifying the script file. To check the changes applied immediately we have to use normal scripts. After completing the development we can optimize the scripts and change value to true.

Value: javascript.optimize=false
File to modified: js.config.properties
Location: (Jasper server)\apache-tomcat\webapps\jasperserver-pro\WEB-INF

2. Open the highcharts-more.js file present in the location: (Jasper server)\apache-tomcat\webapps\jasperserver-pro\scripts\bower_components\highcharts-pack\highcharts
3. In the above file inside the function, Highcharts create a new theme and set the theme to the high charts

Function reference: (function (Highcharts)  
Theme:
Highcharts.theme = {
    chart: {
        style: {
            fontFamily: 'Source Sans Pro'
        }
    },
    xAxis: {
        labels: {
            style: {
                font: '12px Source Sans Pro !important'
                }
            }
    },
    yAxis: {
        labels: {
            style: {
				font: '12px Source Sans Pro !important'
            }
        }
    }
};
Highcharts.setOptions(Highcharts.theme);

In the above theme, we have added properties like font family on the entire chart, modifying the labels font size of both xAxis and yAxis.

4. Save the file and run the report in jasper server. Now changes will be applied to the report
5. To apply the same font changes in the exported high charts report, we have to modify the high charts jar file

Jar File: jasper reports-highcharts-7.1.0.jar
Location: (Jasper server)\apache-tomcat\webapps\jasperserver-pro\WEB-INF\lib

6. Open the jar file with WinRAR and go to folder:

 jasperreports-highcharts-7.1.0.jar\com\jaspersoft\jasperreports\highcharts\charts\render\scripts

7. Take the js file “highcharts-more-4.2.1.src.js” to the system and add the above code
8. Drag the same file into the jar file
9. Now restart the jasper server
10. Export the report into pdf and we can see the applied font changes

Before modifying default font properties in high charts:

After modifying default font properties in high charts:

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download

In case if you have any queries please get us at support@helicaltech.com

Thank You
Ramu Vudugula
Helical IT Solutions Pvt Ltd

Change Default Fonts in High Charts Inside Jasper Server high charts How to change default chart properties in the jasper server jasper high charts jasper server JasperReports: HTML5 high chart X Axis label font size jaspersoft consulting Making Jaspersoft Ad Hoc Reports Sing and Dance