title: Highcharts: overlay label on a graph
body: <p>I'd like to overlay a custom layer over a chart (e.g. a comment, author). Reading the API there seems to be already <a href="http://api.highcharts.com/highcharts#labels" rel="nofollow">an object for the purpose</a>:</p>
  
  <blockquote>
    <p>A HTML label that can be positioined anywhere in the chart area.</p>
  </blockquote>
  
  <p>I tried using this on one of the example charts but it has no effect (see below), although the interpreter isn't issuing any error. Am I doing something wrong or should a lable of this kind be created some other way?</p>
  
  <p>Thank you.</p>
  
  <pre><code>    chart = new Highcharts.Chart({
          chart: {
              renderTo: 'pie-container',
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false
          },
          title: {
              text: 'Browser market shares at a specific website, 2010'
          },
          tooltip: {
              pointFormat: '{series.name}: &lt;b&gt;{point.percentage}%',
              percentageDecimals: 1
          },
          plotOptions: {
              pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  dataLabels: {
                      enabled: true,
                      color: '#FFFFFF',
                      connectorColor: '#FFFFFF',
                      formatter: function() {
                          return '&lt;b&gt;'+ this.point.name +'&lt;/b&gt;: '+ this.percentage +' %';
                      }
                  }
              }
          },
          series: [{
              type: 'pie',
              name: 'Browser share',
              data: [
                  ['Firefox',   45.0],
                  ['IE',       26.8],
                  {
                      name: 'Chrome',
                      y: 12.8,
                      sliced: true,
                      selected: true
                  },
                  ['Safari',    8.5],
                  ['Opera',     6.2],
                  ['Others',   0.7]
              ]
          }],
          labels: [
              {html: "&lt;b&gt;This is a label!&lt;/b&gt;", 
              style: {
                  left: '100px', 
                  top: '100px',
                  width: '50px'}}],
        });
     });
  });
  </code></pre>