score:2

Note: I have modified my answer to better address the specific requests in the original poster's question.

Here's what I would suggest:

Create a stacked column chart, where one of the series is a "dummy" series with which the user can't interact. This will serve as your background.

Here's a quick fiddle I worked up based on the Highcharts stacked column demo: http://jsfiddle.net/brightmatrix/v97p3eam/

plotOptions: {
    column: { stacking: 'percent' }
},
series: [
    /* this is the "dummy" series
       set the "showInLegend" and "enableMouseTracking" attributes 
       to "false" to prevent user interaction */
    { name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray', 
              showInLegend: false, enableMouseTracking: false }, 
    /* here's the real data; set a unique color for each
       set nulls for the columns where that color/data is not needed */
    { name: 'Series 1', color: 'red', data: [2,null,null,null,null] }, 
    { name: 'Series 2', color: 'orange', data: [null,2,null,null,null] },
    { name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] },
    { name: 'Series 4', color: 'green', data: [null,null,null,2,null] },
    { name: 'Series 5', color: 'blue', data: [null,null,null,null,1] }
]

Please let me know if this is helpful for you!

enter image description here


Related Query

More Query from same tag