Previous Examples Next
Fill between 2 lines
0.5
1.0
1.5
2.0
2.5
3.0
3.5
4.0
4.5
5.0
5.5
6.0
6.5
2
4
6
8
10
12
14
16
18
20

Enter 2 series to fill between:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$(document).ready(function(){
    var l0 = [6,  11, 10, 13, 11,  7];
    var l1 = [3,   6,  7,  7,  5,  3];
    var l2 = [4,   8,  9, 10, 8,   6];
    var l3 = [9,  13, 14, 16, 17, 19];
    var l4 = [15, 17, 16, 18, 13, 11];
     
    var plot1 = $.jqplot("chart1", [l0, l1, l2, l3, l4], {
        title: "Fill between 2 lines",
        axesDefaults: {
            pad: 1.05
        },
        //////
        // Use the fillBetween option to control fill between two
        // lines on a plot.
        //////
        fillBetween: {
            // series1: Required, if missing won't fill.
            series1: 1,
            // series2: Required, if  missing won't fill.
            series2: 3,
            // color: Optional, defaults to fillColor of series1.
            color: "rgba(227, 167, 111, 0.7)",
            // baseSeries:  Optional.  Put fill on a layer below this series
            // index.  Defaults to 0 (first series).  If an index higher than 0 is
            // used, fill will hide series below it.
            baseSeries: 0,
            // fill:  Optional, defaults to true.  False to turn off fill. 
            fill: true
        },
        seriesDefaults: {
            rendererOptions: {
                //////
                // Turn on line smoothing.  By default, a constrained cubic spline
                // interpolation algorithm is used which will not overshoot or
                // undershoot any data points.
                //////
                smooth: true
            }
        }
    });
 
    // bind a function to the change button to update the plot's fillBetween series
    // and replot().
    $("button[name=changeFill]").click(function(e) {
        plot1.fillBetween.series1 = parseInt($("input[name=series1]").val());
        plot1.fillBetween.series2 = parseInt($("input[name=series2]").val());
        plot1.replot();
    });
});

The charts on this page depend on the following files:

?
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />