Custom Visualization Component v6.0.x

This Wiki Page is a work in progress.

The custom visualization component is a JasperReports custom component that can be used to display, inside a report, an SVG dynamically generated by using Javascript.

The component itself does nothing, in the sense that you need to specify a javascript file that will be used by the custom visualization component in a small html document to produce the specific SVG image. When a report is exported in HTML, the custom visualization component works in a way very similar to the HTMLComponent, except for the fact that javascript is included from a file and data (such as parameters or datasets) can be dynamically passed to the script. When the report is exported in any other format, PhantomJS, an offscreen application to render web pages, is used to execute the script and extract the SVG image, which may used as it is (i.e. when exporting to PDF), or converted in an high quality image (for export formats like DOCX or ODF).

Currently (6.0.1), the Custom Visualization Component is part of Jaspersoft Studio, but it could eventually moved inside JasperReports Library.

Source code



See Custom Visualization Component v6.0.x: How to run the Samples


  • PhantomJS

PhantomJS is not shipped with Jaspersoft Studio, so when using the custom visualization component is necessary to have it installed apart. It is available for all the major OSs here:

The PhantomJS license is BSD, but third parties licenses prevent us from including it in our software.


Jaspersoft Studio 6.2

In Jaspersoft Studio 6.2, simply make sure that the path to PhantomJS is in your classpath. Do not manually configure the JasperReports properties for requirejs or add the jar files.

Jaspersoft Studio 6.0 to 6.1.x

For Jaspersoft Studio 6.0 to 6.1.x, the Custom Visualization Component requires a very simple configuration which consists in specifying where the require.js script is located (used for server side export only) and allow JasperReports Server to server files from a specific package (like for other components like the JasperReports HighCharts custom component). This information is provided by setting two JasperReports properties inside the file (on the server this file is located at:

<JRS installation directory>/apache-tomcat/webapps/jasperserver-pro/WEB-INF/classes/

The two properties are:


Replace /path/to/require.js with a proper absolute path to require.js. Please note that on Windows this path should just start with a letter (i.e. C:/path/to/require.js), while on the other systems, this should be prefixed by file://. This comes from a PhantomJS requirement when loading files from the local filesystem.

When working with Jaspersoft Studio, these two properties are automatically generated and added to the JasperReports properties handled by the designer, you can see them from the Preferences > Jaspersoft Studio > Properties.

In the old version (v5.6.x) of the component, it was required to specify the location of each javascript being used in your components, this is no longer necessary. In JasperReports Server all your scripts will be loaded inside the report unit as resources.

The final requirement is of course the component itself. This is represented by a jar, that must be added to your classpath. The jar should be shipped with JasperReports Server, it is also shipped with Jaspersoft Studio. The file is called jasperreports-customvisualization-x.y.z.jar, a version of it is attached for to this page, but you are encouraged to use the last version shipped with JasperReports Server or Jaspersoft Studio. This file will eventually become part of JasperReports Library in the future.


The Custom Visualization Component is part of our opensource offering, and it is coverd by the LGPL v3 license like JasperReports.

This license, anyway, is not extended to the scripts that you may want to use and does not apply to the samples which may be scripts provided under difference licenses and PhantomJS, required to generate the SVG images off-screen (for PDF, DOCX and other format exports).

Next Steps

See Also