Change Bar Colors Based on Bar Value

Scenario

You want the color of your bars/columns to change based on the value of each bar/column. For example, you want the any bars that are below "10" to be red, and any bars that are above "10" to be green.

Here's an example:

And another:

Accomplishing this design in Jasper requires a little bit of JavaScript, but don't worry! All you have to do is copy & paste the code, and change a couple values to your liking.

Follow these steps:

Step 1 - Create a "Zones" Variable

• Right-click on the Variables section in your Outline

• Select Create Variable

• Go to the Properties Tab.

• Name your variable. (I usually name mine zones, but you can name it whatever you want.)

• Click the Pencil Icon to the right of the "Expression" field to pull up the expression editor.

• Copy and paste the following code into the expression editor:

"(function(){"+
    "return [ {"+
        "value: 10,"+
        "color: 'red'"+
        "},{"+
        "color: 'green'"+
        "}"+
    "]"+
"})()"

• Change the values and colors to your liking.

  • In the example above, any bar below "10" will be red. All other bars will be green.

  • Change the "10" to whatever value you like.

  • Change the colors to whatever color you like.

    • You can use HEX codes if you'd like for more precise colors.

Step 2 - Add Advanced Property to your HTML5 Chart

• Double-click on your chart

• Click Show Advanced Properties

• Click Add

• Set the Property name to one of the following, depending on your chart type:

  • plotOptions.bar.zones

  • Or, plotOptions.column.zones

• Check the Use an Expression box

• Click on the pencil icon to summon the Expression Editor

• Click on Variables in the left-hand column

• Double-click on your zones variable

• Click Finish. Click Ok.

That's it!

The bars in your chart should now be changing colors based on the color zones you created. This is a simple example with only two zones, but you could create a chart that has as many different color zones as you'd like.

If you need more help, please feel free to submit a ticket by emailing [e-mail]. We are happy to help!