(Horizontal) bar and line chart with Highcharts

Question

I want to plot a horizontal bar graph behind a time series with Highstocks/Highcharts, similar to how volume is shown versus price in blue here. Having done some digging, I don't believe this is possible with Highcharts, as a bar graph basically inverts the x- and y-axes, and so I couldn't have time as an x-axis running along the bottom and price as an x-axis running vertically. Am I right about this?

Yes, that is correct. It can be accomplished by imposing a bar chart on top of the line chart, however (positioning the containing element of the bar chart over the containing element of the line chart, with transparent chart and plot backgrounds) — jlbriggs

jlbriggs jlbriggs · Accepted Answer · 2016-02-23T22:36:32

There is no built in option to achieve this.

You could potentially dummy the bar series by using the polygon series type.

I have achieved this in the past by creating two charts, with their containing divs positioned so that they appear as if they are the same chart.

HTML:

<section id="wrapper">
    <div id="line-chart"></div>
    <div id="bar-chart"></div>
</section>

CSS:

#wrapper {
    position:relative;
    margin:1em auto;
    padding:0;
    width:900px;
}
#line-chart {
    margin:0;
    padding:0;
    height:400px;
}
#bar-chart {
    position:absolute;
    top:0;
    right:0;
    width:200px;
    height:400px;
    margin:0;
    padding:0;
}

Working Example:

http://jsfiddle.net/jlbriggs/r2Lvo2dw/

(this example automatically builds a histogram out of the line data provided)

(Horizontal) bar and line chart with Highcharts

1 Answers