Knowledge Base

Filling area between two lines

It’s quite often scenario when we need to show some allowed value fluctuation on the chart. Different names are used for this kind of chart – difference chart, band graph, range graph etc. Here is a demo of such chart made with amCharts.

To make fill between two lines you will need two graphs and so two value fields in your data provider. One should contain the lower range and another the upper range values. The upper graph should have fillAlphas set to some bigger than 0 value, let’s say 0.2. Ant the lower graph’s fillAlphas should be set to 0. If you’d do this and test your chart, you will see that the area from the upper graph to the axis is filled. To make fill stop at the lower graph you should set:

upperGraph.fillToGraph = lowerGraph;

lowerGraph can be both a reference to your lower graph object or id of this graph.