Creating plotbands in Highcharts that spans only one bar

Question

I want to create something similar to this in Highcharts: with plotsbands that are unique to each bar.

I've managed to do this by creating one chart for each bar but that doesn't scale very well:

http://jsfiddle.net/dffmgv5o/

$(function () {
    $('#container').highcharts({
        chart: {
                type: 'bar',
            marginLeft: 130
        },
        exporting: { enabled: false },
        title: {text: ''},
        xAxis: {categories: ['One category']},
        yAxis: {
                labels: {
                enabled: false
            },
            allowDecimals: false,
            min: 0,
            max: 100,
            title: {
                    enabled: false
            },
            plotBands: [{
              color: 'green', // Color value
              from: 0, // Start of the plot band
              to: 35 // End of the plot band
            }, {
              color: 'orange', // Color value
              from: 35, // Start of the plot band
              to: 60 // End of the plot band
            }, {
              color: 'red', // Color value
              from: 60, // Start of the plot band
              to: 100 // End of the plot band
            }]
        },
        credits:{enabled:false},
        legend: {enabled: false},
        series: [{
            name: 'Value',
            data: [49],
            color: '#444444',
            dataLabels: {
                enabled: true
            },
            pointWidth: 15
        }]
    });

    $('#container2').highcharts({
        chart: {
                        type: 'bar',
                    marginLeft: 130

            },
        exporting: { enabled: false },
        title: {text: ''},
        xAxis: {categories: ['Another category']},
        yAxis: {
                labels: {
                enabled: false
            },
            allowDecimals: false,
            min: 0,
            max: 100,
            title: {
                    enabled: false
            },
            plotBands: [{
              color: 'red', // Color value
              from: 0, // Start of the plot band
              to: 35 // End of the plot band
            }, {
              color: 'orange', // Color value
              from: 35, // Start of the plot band
              to: 70 // End of the plot band
            }, {
              color: 'green', // Color value
              from: 70, // Start of the plot band
              to: 100 // End of the plot band
            }]
        },
        credits:{enabled:false},
        legend: {enabled: false},
        series: [{
            name: 'Value',
            data: [65],
            color: '#444444',
            dataLabels: {
                enabled: true
            },
            pointWidth: 15
        }]
    });

    $('#container3').highcharts({
        chart: {type: 'bar',
            marginLeft: 130},
        exporting: { enabled: false },
        title: {text: ''},
        yAxis: {
            allowDecimals: false,
            min: 0,
            max: 100,
            title: {
                    enabled: false
            }
        },
        credits:{enabled:false},
        legend: {enabled: false},
        series: [{
            dataLabels: {
                enabled: true
            }
        }]
    });
});

How can I do this by creating only one chart?

Answer 1

You can achieve that with three additional series (one series per color) with disabled grouping and correctly set bar width.

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },

  xAxis: {
    categories: ['One category', 'Another category']
  },

  yAxis: {
    min: 0,
    max: 100
  },

  plotOptions: {
    series: {
      grouping: false,
      pointWidth: 30,
      borderWidth: 0,
      enableMouseTracking: false,
    }
  },

  legend: {
    enabled: false
  },

  series: [{
    data: [100, 100],
    linkedTo: 'main',
    colorIndex: 5
  }, {
    data: [65, 55],
    linkedTo: 'main',
    colorIndex: 2
  },{
    data: [35, 15],
    linkedTo: 'main',
    colorIndex: 3
  }, {
    id: 'main',
    data: [49, 65],
    pointWidth: 15,
    colorIndex: 0,
    enableMouseTracking: true
  }]
})

Live example and output

http://jsfiddle.net/crz1bs4m/