[Solved]-Making a master-detail Highchart in Stackoverflow style-Highcharts

Yes, it is very much possible. I would recommend using HighStock instead as its the chart that has better functionality for timeseries kind of data.

Here is how you do it in highstock, just set the series type of navigator to 'column'

  navigator: {
        series: {
            data: ADBE,
            type : 'column'
        }
    },

http://jsfiddle.net/bLqL3/1/
PS: I have changed only one of the line graphs (lower) to column and left the other one as exercise ;)

All the said the same can very much be done in highcharts too, the master detail chart there is a combination of more than one chart, the master being the same as the navigator in highstock, and detail is the main chart, so you can as well set the series type of the master to be 'column' there and you are done, fiddled @ http://jsfiddle.net/RAXa3/1/

    series: [{
                type: 'column',
                name: 'USD to EUR',
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(2006, 0, 01),
                data: data
            }],

You could have explored the reputation chart scripts to dig out your solution

new Highcharts.Chart({
chart: {
    renderTo: "master-graph",
    animation: !1,
    reflow: !1,
    borderWidth: 0,
    marginLeft: 62,
    backgroundColor: null,
    zoomType: "x",
    events: {
        selection: function(a){
            varb=a.xAxis[
                0
            ],
            a=b.min,
            b=b.max,
            c=this.xAxis[
                0
            ];c.removePlotBand("selected-area");c.addPlotBand({
                id: "selected-area",
                from: a,
                to: b,
                color: "rgba(0, 70, 200, 0.2)"
            });e(this);return!1
        }
    }
},
series: [
    {
        data: i,
        type: "column",
        color: "green"
    }
],
plotOptions: {
    series: {
        animation: !1,
        lineWidth: 1,
        marker: {
            enabled: !1
        },
        shadow: !1,
        states: {
            hover: {
                lineWidth: 1
            }
        },
        enableMouseTracking: !1
    },
    column: {
        borderWidth: 0,
        pointPadding: 0,
        groupPadding: 0
    }
},
xAxis: {
    type: "datetime",
    min: a,
    max: p,
    maxZoom: 2592E6,
    plotBands: [
        {
            id: "selected-area",
            from: h,
            to: p,
            color: "rgba(0, 70, 200, 0.2)"
        }
    ],
    title: {
        text: null
    },
    labels: {
        formatter: function(){
            returnHighcharts.dateFormat(7776E6<p-a?"%b '%y": "%b %e",
            this.value,
            !1)
        }
    },
    lineWidth: 0
},
yAxis: {
    gridLineWidth: 0,
    labels: {
        enabled: !1
    },
    title: {
        text: null
    },
    plotLines: b(),
    min: j,
    max: m,
    showFirstLabel: !1,
    endOnTick: !1,
    startOnTick: !1
},
title: {
    text: null
},
legend: {
    enabled: !1
},
tooltip: {
    formatter: function(){
        return!1
    }
},
credits: {
    enabled: !1
},
exporting: {
    enabled: !1
}
});

AND

new Highcharts.Chart({
chart: {
    renderTo: "detail-graph",
    animation: !1,
    defaultSeriesType: "column"
},
series: [
    {
        name: "rep",
        data: g,
        color: "green"
    }
],
plotOptions: {
    series: {
        animation: !1,
        cursor: "pointer",
        allowPointSelect: !0,
        shadow: !1,
        stickyTracking: !0,
        states: {
            hover: {
                enabled: !0,
                brightness: 0.5
            }
        }
    },
    column: {
        pointPadding: 0.03,
        groupPadding: 0,
        borderWidth: 0,
        events: {
            click: c
        }
    }
},
xAxis: {
    type: "datetime",
    labels: {
        rotation: 0,
        formatter: function(){
            returnHighcharts.dateFormat("%b %e",
            this.value,
            !1)
        }
    },
    lineWidth: 0,
    min: f,
    max: d,
    startOnTick: !0,
    endOnTick: !0
},
yAxis: {
    gridLineWidth: 0,
    plotLines: b(),
    min: e,
    max: h,
    title: {
        text: "reputation per day"
    },
    startOnTick: !1,
    endOnTick: !1
},
tooltip: {
    formatter: function(){
        return'<spanstyle="font-size: 10px;">'+Highcharts.dateFormat("%A, %B %e, %Y",
        this.point.x,
        !1)+'</span><br/><spanstyle="color:'+this.series.color+'">'+this.series.name+"</span>: <b>"+this.point.realRep+"</b>"
    },
    style: {
        lineHeight: "200%",
        padding: 10
    }
},
title: {
    text: null
},
legend: {
    enabled: !1
},
credits: {
    enabled: !1
}
});