Jump to content

Creating Multiple Plotbands in HTML5 (Highcharts)


Recommended Posts

Hello All,


I'm running Jaspersoft Studio 5.6, and am creating a HTML5 (highcharts) line chart. 


I would like to create a set of horizontal plotbands in my chart, similar to the attached image.




Using the highcharts API reference (http://api.highcharts.com/highcharts), I can generate a single plotband using the following syntax in the JRXML file:


<hc:chartProperty name="yAxis.plotBands.color">



<hc:chartProperty name="yAxis.plotBands.from">

<hc:propertyExpression><![CDATA[new Integer(0)]]></hc:propertyExpression>


<hc:chartProperty name="yAxis.plotBands.to">

<hc:propertyExpression><![CDATA[new Integer(50)]]></hc:propertyExpression>


And as expected, this produces a single y-axis plotband from 0 to 50.


My question is this: how can I generate an additional plotband in the same chart, say from 60 - 80?


If I attempt to replicate the code above, it's simply reinterpreted as the same attributes, but with different (newer) values.


The issue has to do with how to correctly interpret the JSON of the highcharts plotBands call. What I need to do is get the following JSON syntax into proper JRXML format:


plotBands: [{

                color: '#E3FFC5',

                from: '0',

                to: '50'

            }, {

                color: '#E3FFC5',

                from: '60',

                to: '80'



In this case, I want to create an array of object (and not an array of array which is often used). Something like java.util.Arrays.asList(
  1. ).


Thanks much.

Link to comment
Share on other sites

  • 3 months later...
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...

An array of objects for something like yAxis.plotLines, or plotBands, and setting such values as properties is not currently supported. There is a feature request for this ability, specifically for plotlines.

There is a workaround that might help in some scenarios or help give you some ideas. 

First, "com.jaspersoft.jasperreports.highcharts.function.properties.allowed" must be set to true in your jasperreports.properties (in your client as well as JRS), then use a function to return the values. 

The following would return a single line. 
(function(){return [{value: 0.696, width: 1, color: 'green', dashStyle: 'dash', label: { text: 'Latest value', align: 'right', y: 12, x: 0 }]})() 

Attached is an example of doing something similar with plotLines, with a TimeSeriesLine chart using our sample foodmart tables, it has two lines. 

Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...