Two chart types in one?

Question

Is it possible to generate a chart like the following with Highcharts? If so, how would I do it?

The upper chart is not the problem. In addition I need the stacked blocks below. A blueprint would be sufficient.

I've inherited a project from a co-worker which is already using Highcharts, and now I need to extend the functionality.

Answer 1

Yeah this is possible. I put together a jsfiddle to simulate what you want to do.

http://jsfiddle.net/vbpDS/4312/

So the important part:

In your collection of series, you need to tell it that you want a particular series to be of the column type (if your default type is set to line - that is if a type is not defined in the series, it will automatically be drawn as whatever your default is set to).

chart: {
        renderTo: 'container',
        defaultSeriesType: 'line'
    },
    series: [{
        type: 'column',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        stack:'1'

    },{
        type: 'column',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        stack:'1'

    }
             , {
        data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4]

    },{
        data: [100, 110, 120, 130, 140, 150, 140, 130, 120, 110, 100, 110]  
    }]

Now because you also want the columns to stack, you have to tell it which groups of data need to be stacked with one another. So you set the stack property to anything you want, but just make sure they match so they will be 'tied' together.

EDIT: Btw the highcharts api documentation is great! Check it out for more information: http://www.highcharts.com/ref/