Creating Multiple Plotbands in HTML5 (Highcharts)

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 (, 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="">
<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([list of JSON plotBand objects]).
Thanks much.
richbl's picture
Joined: May 22 2014 - 7:14pm
Last seen: 3 years 6 months ago

Hi, I just ran into this same problem.   Did you ever find an answer to this.


judy.leblanc - 6 years 3 months ago

2 Answers:


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, "" must be set to true in your (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. 

Binary Data jrxml with two plotlines4.22 KB
ghudson_1's picture
Joined: Oct 30 2012 - 12:51pm
Last seen: 4 days 12 hours ago

May i know where we can get this  file in Jasper Studio?


raghavmish's picture
Joined: Jul 20 2016 - 10:54pm
Last seen: 4 years 4 months ago