Adding an area fill to show warning zones

June 3, 2013
Design Approaches

In this example I will go over some simple tips of what’s required to use color area fills to display warning zones.

  1. Using a simple line chart that shows three color zones and one DataSet you will need to add four LineSets. A couple things to note is that the color fills shown in the “zones” are always drawn from top to bottom after a line value is given. The order of the LineSets matters as well so you will need to create the fills in reverse to be able to show the lower value fills and not have them covered.


  2. Starting with the top color (green), the value for all the 5 data points of the green LineSet will be 500.

    AreaFill2_green lineset

  3. Next up will be to add the yellow line fill. The value for all the 5 data points of the yellow LineSet will be 100.

    AreaFill2_yellow lineset

  4. The last color will be the red line fill. The value for all the 5 data points of the red LineSet will be 0 since the left scale goes down to -100.

    AreaFill2_red lineset

  5. Finally the data line will be plotted in the foreground.

    AreaFill2_data lineset

So if you want to add more zones, you’ll need to repeat the same steps by working your way from the largest fill value in the background and work your way outwards to the smallest value up front.

If you have any questions, please feel free to contact us at

Comments are closed.