score:4

Accepted answer

You can do this,

 $('#container').highcharts({
  xAxis: {
      title: {
        text: "DISPLAY WHATEVER YOU WANT TO"
      }
    },

DEMO

EDIT

  chart: {
                events: {
                    load: function () {
                        var label = this.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30)
                        .css({
                            width: '450px',
                            color: '#222',
                            fontSize: '16px'
                        })
                        .attr({
                            'stroke': 'silver',
                            'stroke-width': 2,
                            'r': 5,
                            'padding': 10
                        })
                        .add();

                        label.align(Highcharts.extend(label.getBBox(), {
                            align: 'center',
                            x: 0, // offset
                            verticalAlign: 'bottom',
                            y: 50 // offset
                        }), null, 'spacingBox');

                    }
                },

DEMO

score:2

Increase chart.spacingBottom and legend.y properties.

chart: {
  spacingBottom: 100,
},

legend: {
    y: 100
},

Render label/image, align it and set its y property.

function renderLabel() {
var label = this.renderer.label("How do I move this center and under the legend.")
  .css({
    width: '180px'
  })
  .attr({
    'stroke': 'silver',
    'stroke-width': 1,
    'r': 5,
    'padding': 10
  })
  .add();

label.align(Highcharts.extend(label.getBBox(), {
  align: 'center',
  x: 0, // offset
  verticalAlign: 'bottom',
  y: 60 // offset
}), null, 'spacingBox');
}

Values are mostly hardcoded but if you want to do it in a dynamic way then you need to set the values based on label/img height.

example: http://jsfiddle.net/qebxk6ty/7/


Related Query

More Query from same tag