BarPlotbandTitles

by kzoon

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar',
        plotBorderColor: 'red',
        plotBorderWidth: 1,

        marginRight: 20
    },
    legend: {
        enabled: false
    },
    xAxis: {
        categories: ['A',
                     'B',
                     'C',
                     'D',
                     'E',
                     'F',
                    'G',
                    'H'],

        plotBands: [
            {
            color: '#ffffff',
            from: -0.5,
            to: 1.5,
            label: {
                text: 'plotband 1',
                align: 'right',
                textAlign: 'right',
                verticalAlign: 'middle',
                style: {
                    color: '#666666'
                }
            }},
        {
            color: '#E5F6F6',
            from: 1.5,
            to: 3.5,
            label: {
               text: 'plotband 2',
                align: 'right',
                textAlign: 'right',
                verticalAlign: 'middle',
                 x: -10,
              style: {
                    color: '#666666'
                }
            }},
            
        {
            color: '#ffffff',
            from: 3.5,
            to: 5.5,
            label: {
                text: 'plotband 3',
                align: 'right',
                textAlign: 'center',
                verticalAlign: 'middle',
                rotation: 90,
                style: {
                    color: '#666666'
                }
            }},
        {
            color: '#E5F6F6',
            from: 5.5,
            to: 7.5,
            label: {
                text: 'plotband 4',
                align: 'right',
                textAlign: 'center',
                x: -15,
                rotation: 90,
                style: {
                    color: '#666666'

                    
                }
            }}
            
  ...