Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      events: {
        load: function() {
          var chart = this,
            r = chart.renderer,
            each = Highcharts.each,
            left = chart.plotLeft,
            top = chart.plotTop,
            h = chart.plotHeight,
            w = chart.plotWidth,
            xAxis = chart.xAxis[0],
            yAxis = chart.yAxis[0],
            labels = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
            labelStyles = {
              'font-size': '12px',
              'color': 'red'
            },
            attr = {
              zIndex: 10
            },
            xPlotLine, yPlotLine,bbox, x, y;

          chart.label = [];
					
          xPlotLine = xAxis.toPixels(xAxis.plotLinesAndBands[0].options.value);
          yPlotLine = yAxis.toPixels(yAxis.plotLinesAndBands[0].options.value);

					
          //render
          each(labels, function(label, i) {
          
            chart.label[i] = r.text(label, 0, 0)
              .attr(attr)
              .css(labelStyles)
              .add();
              
            bbox = chart.label[i].getBBox();
              console.log(w);
            switch(i) {
            	case 0:
              	x = ((xPlotLine + left) / 2) - (bbox.width / 2);
                y = ((yPlotLine + top) / 2) - (bbox.height / 2);
              	break;
              case 1:
              	x = left + xPlotLine + ((w - xPlotLine)/2) - (bbox.width / 2);
                y = ((yPlotLine + top) / 2) - (bbox.height / 2);
              	break;
              case 2:
              	x = ((xPlotLine + left) / 2) - (bbox.width / 2);
                y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
              	break;
              case 3:
              	x = left + xPlotLine + ((w - xPlotLine)/2) - (bbox.width / 2);
                y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
              	break;
            }
            
   ...