The topic of filling area between series has been discussed quite a lot. I've seen some solutions using 'arearange' series ( adding dummy serie with area range to add the fill color ) or using 'stacked area' ( using dummy area serie with stacking: true, transparent under the actual series, then add another stacked area with the needed color ). An example can be seen here.

but my problem is quite specific : I need to fill the area between to series which don't share the same yAxis, thus I can't add a dummy serie since I can't figure which of the yAxis to use.

( The same problem occurs when series don't share the same xAxis reference values, as seen in this example )

For example, let's say I want to fill the area on this chart where the blue 'rainfall' line is under the green 'temperature' line : JSFiddle example

How can I do that ?

The topic of filling area between series has been discussed quite a lot. I've seen some solutions using 'arearange' series ( adding dummy serie with area range to add the fill color ) or using 'stacked area' ( using dummy area serie with stacking: true, transparent under the actual series, then add another stacked area with the needed color ). An example can be seen here.

but my problem is quite specific : I need to fill the area between to series which don't share the same yAxis, thus I can't add a dummy serie since I can't figure which of the yAxis to use.

( The same problem occurs when series don't share the same xAxis reference values, as seen in this example )

For example, let's say I want to fill the area on this chart where the blue 'rainfall' line is under the green 'temperature' line : JSFiddle example

How can I do that ?

• javascript
• svg
• highcharts

3 Answers 3

I've accepted Sebastian answer and I publish here its implementation :

I've created a function that generates a dummy series with the type 'arearange', using the data of the first series and a modified version of the data in the second series in order to map them on the main yAxis :

/**
*generate a dummy arearange series in order to fill area between our two series.
*/
function createRangeSerie(data1, min1, max1, data2, min2, max2)
{
    //we will apply a linear transfomation to values from the second series
    var b = min1-min2;
    var a = (max1 - b) / max2;

    var rangeData = [];
    $.each(data1, function(index, value) {
         var value2 = a*data2[index] + b;

        rangeData.push([value, value2]);
    });    

    //return the third series, used to fill the area between our 2 series.    
    return {
        name: 'areaRangeSerie',
        type: 'arearange',
        data: rangeData
    };
};

then I use it to add the new area in my chart as seen in this fiddle example :

http://jsfiddle/2me4Z/3/

Thanks again guys!

LIMITATIONS : What I was afraid of occurs : in the case I want to fill only if the first curve is under the second (or vice versa). there is a problem on the adjacent points. As you can see in the updated JSfiddle. So this solution is still not perfect, I'll improve it.

LAST VERSION : In my final version, I've added the intersection point to my arearange serie. Now the result is perfect. You can see the result an the algorithm here in this JSFiddle as you can see, I4ve changed the xAxis so I've got values for putations instead of categories.

Edit : here is the function to find the intersection point from two lines ( each defined by two points so we need 4 arguments : line1Point1 line1Point2, line2Point1, line2Point2). I don't sue pixel coordinates but I pute intersection from my x and y values since the resulting point will be mapped by the highchart library the same way.

function intersectionPoint(l1Pt1, l1Pt2, l2Pt1, l2Pt2){
    console.log(l1Pt1, l1Pt2, l2Pt1, l2Pt2);

    //pute A B and C for the first line: AX + BY = C
    A1 = l1Pt2.y-l1Pt1.y;
    B1 = l1Pt1.x-l1Pt2.x;
    C1 = A1*l1Pt1.x + B1 *l1Pt1.y;

    //pute A B and C for the second line
    A2 = l2Pt2.y - l2Pt1.y;
    B2 = l2Pt1.x - l2Pt2.x;
    C2 = A2*l2Pt1.x + B2*l2Pt1.y;

    var delta = A1*B2 - A2*B1;
    if(delta == 0) {
        console.log("Lines are parallel");
        return null;
    }
    else
    {
        return {
            x: (B2*C1 - B1*C2)/delta,
            y: (A1*C2 - A2*C1)/delta
        };    
    }

};

I'm really expecting highchart to give a full official support for it since it will bee again more plex when using logarithmic axis X(

You can use the same two linked axis (the same ranges /ticks) but with different data, and then use additional series with arearange type: http://www.highcharts./demo/arearange

I think your options are pretty much one of these two:

1) Normalize your data before sending it to the chart so that they can use the same axis.

2) Develop a plex script to determine where the series are in relation to each other and create your dummy series accordingly.

HOWEVER.

It's extremely important to consider the fact that with two series using two separate axes, measuring two different things on two different scales....

The interaction between the 2 lines is pletely meaningless.

It is one of the major mon pitfalls of data visualization to highlight the interaction between two such lines, but the interaction is entirely dependent on the mostly arbitrary scaling of the two pletely different axis measurements.

FWIW.