Add Colored Zones or Plot Bands to Your Chart

Do you want to create colored "zones" in your chart? Here's an example:

Creating colored plot bands in your charts requires a little bit of JavaScript, but don't worry. All you have to do is copy and paste the JavaScript code, and enter a few values.

But first, you have to enable a property in Jaspersoft Studio in order to allow JavaScript functions.

Note: If you have already enabled this property for previous reports, there is no need to do so again. Enabling this property needs to be done only once.

Set JSS Property

Open JSS and go to “Properties” or “Preferences”. On a Mac, it’s “Preferences”, but on a PC, it might be “Properties”. I think it’s under the “Window” menu on a PC.

Once you have the Properties/Preferences window open:

1. Unfold the Jaspersoft Studio Section

2. Select “Properties”

3. Click “Add:

4. Paste in the following for “Property Name”: com.jaspersoft.jasperreports.highcharts.function.properties.allowed

5. Set the value to: true

Add Plot Bands to Your HTML5 Chart

Now, to add plot bands to your chart:

• Double-click on your chart

• Click Show Advanced Properties

• Click Add

• Set the Property name to: xAxis.plotBands OR yAxis.plotBands

• Check the "Use an expression" box

• Click the pencil icon to the right of the "Property value" field

• Copy & Paste the code below into the Expression Editor:

"(function(){return ["+
    "{"+
        "from: 0,"+
        "to:3,"+
        "color: '#FFFFEA',"+
        "label:"+ 
            "{"+
                "text: 'Zone 1',"+
                "align: 'center',"+
                "verticalAlign: 'top'"+
            "}"+
    "},"+
    "{"+
        "from: 3,"+
        "to: 6.5,"+
        "color: '#F2FDFF',"+
        "label:"+
            "{"+
                "text: 'Zone 2',"+
                "align: 'center',"+
                "verticalAlign: 'top'"+
            "}"+
    "}"+
"]})()"

• Now, adjust the values in the code to your liking.

  • The "from" and "to" values will determine where your plot bands start and end.

    • For plot bands on your xAxis, the "from" and "to" corresponds to the index of your categories. Indexes start at 0, so your first category is 0, your second category is 1, etc.

      • You can even enter a value in ".5" increments to move the edge if your plot band over if you'd like.

    • For plot bands on your yAxis, the "from" and "to" simply correspond to the values of your yAxis.

  • The "text" value will determine the label for each of your plot bands.

  • The "align" and "verticalAlign" values can be set to center, left, or right. This will allow you to move the label around in the plot band so the text shows up where you want.

The example above creates TWO plot bands, but you can create as many plot bands as you need.

For example, this code would create THREE plot bands.

"(function(){return ["+
    "{"+
        "from: 0,"+
        "to:3,"+
        "color: '#FFFFEA',"+
        "label:"+ 
            "{"+
                "text: 'Zone 1',"+
                "align: 'center',"+
                "verticalAlign: 'top'"+
            "}"+
    "},"+
    "{"+
        "from: 3,"+
        "to: 6,"+
        "color: '#F2FDFF',"+
        "label:"+
            "{"+
                "text: 'Zone 2',"+
                "align: 'center',"+
                "verticalAlign: 'top'"+
            "}"+
    "},"+
    "{"+
        "from: 6,"+
        "to: 10,"+
        "color: '#F2FDFF',"+
        "label:"+
            "{"+
                "text: 'Zone 3',"+
                "align: 'center',"+
                "verticalAlign: 'top'"+
            "}"+
    "}"+
"]})()"

The FIRST line and the LAST line of the code should always stay the same.

The syntax can be a bit tricky, so don't hesitate to reach out for help if you get lost in the syntax! Simply email [e-mail].