title: Highcharts Styling Questions
body: <p>I'm hoping for some help on styling a line Highchart.</p>
  
  <p>I'm trying to get the graph here to look like the image:</p>
  
  <p><a href="http://www.myhealthcoach.tv/HRA/aardvark.php" rel="nofollow">Example of my graph</a></p>
  
  <p>But I'm struggling to get the block colour lables?</p>
  
  <p>Any help would be much appreciated!</p>
  
  <p>Thanks</p>
  
  <pre><code>$('#container').highcharts({
          chart: {
              type: 'line',
              plotBackgroundImage: 'images/fibre.jpg',
              plotBorderWidth: 0,
  
  
              /*,
              marginRight: 130,
              marginBottom: 25*/
          },
          title: 
          {
              text    : strTitle
          },
          tooltip: 
          {
              enabled: false
          },
          xAxis: 
          {
              categories: arrXAxis,               
              title: 
              {
                  text: strXTitle
              },
  
          },          
          yAxis: 
          {
              title: 
              {
                  text: ''
              },
              labels: {
                  formatter: function() {
                     // return this.value +'?'
                     return('');
                  }
              },
              min: 0,
              max: 10,
              minorGridLineWidth: 0,
              alternateGridColor: null,
              gridLineWidth: 0,
              plotBands: 
              [{ 
                  from: intRedStart,
                  to: intRedEnd,
                  color: 'rgba(229, 28, 36, 0.6)',
                  label: 
                  {
                      text: 'High Risk',
                      style: 
                      {
                          color: '#606060'
                      }
                  }
              },
              { 
                  from: intAmberStart,
                  to: intAmberEnd,
                  color: 'rgba(239, 140, 30, 0.6)',
                  label: 
                  {
                      text: 'Improvement',
                      style: 
                      {
                          color: '#606060'
                      }
                  }
              },
              { 
                  from: intGreenStart,
                  to: intGreenEnd,
                  color: 'rgba(43, 174, 115, 0.6)',
                  label: 
                  {
                      text: 'Healthy',
                      style: 
                      {
                          color: '#606060'
                      }
                  }
              }   
  
  
              ]
          },
          legend: {
             /*
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -10,
              y: 100,
              borderWidth: 0*/
          },
          series:
          [{
              allowPointSelect: false,    
              showInLegend: false,
              data: arrData   
          }   /*, {
                  name: '1',
                  data: [10]
              }, {
                  name: '2',
                  data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
              }, {
                  name: '3',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
              }*/]
      });
  </code></pre>