javascript - Show gaps (diff) between a bar and a line -

is possible draw gaps between different chart types? in example (picture below) have bars , line in same chart. gap difference of line-value , bar-value below. furthermore, if bar above line, should green gap, else red one.

it's possible draw "normal" gap-bar bottom line behind actual bar, work red gaps , not green ones?

here's example image: http://i.imgur.com/ruvjxa2.png

what showing 4 different data series. blue bar series, black line series, green bar "below" series , red bar "above" series.

given have line , bar series this:

var databar = [[0,23],[1,34],[2,45],[3,21]]; var dataline = [[0,13],[1,53],[2,23],[3,90]]; 

you can create other 2 series like:

  var diffabove = [];   var diffbelow = [];   (var j = 0; j < 10; j++) {     if (dataline[j][1] > databar[j][2]) {       diffabove.push([j, dataline[j][3], databar[j][4]]);     } else {       diffbelow.push([j, databar[j][5], dataline[j][6]]);     }   } 

and put using array of series objects:

  var dataseries = [{       color: 'blue',       data: databar,       lines: {         show: false       },       bars: {         show: true,         align: 'center',         barwidth: 0.8       }     }, {       color: 'black',       data: dataline,       lines: {         show: true       },       bars: {         show: false       }     }, {       color: 'red',       data: diffabove,       lines: {         show: false       },       bars: {         show: true,         barwidth: 0.5,         align: 'center'       }     }, {       color: 'green',       data: diffbelow,       lines: {         show: false       },       bars: {         show: true,         barwidth: 0.5,         align: 'center'       }     }   ]; 

this produces (example here):