I want to add some text or image under a Highchart, but it must appear above the Highchart legend.

My code:

$(function () {
    Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'drawPoints', function (proceed) {
        proceed.apply(this);
        for (i in this.data) {
            if(this.data[i].options.x > 90)
            this.data[i].graphic.dashstyleSetter(this.options.dashStyle || 'solid');
        }
    });

    $('#container').highcharts({

        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts Bubbles'
        },

        series: [{
            dashStyle: 'dash',
            data: [
                [97, 36, 79],
                [94, 74, 60],
                [68, 76, 58],
                [64, 87, 56],
                [68, 27, 73],
                [74, 99, 42],
                [7, 93, 87],
                [51, 69, 40],
                [38, 23, 33],
                [57, 86, 31]
            ],
            marker: {
                lineColor: 'red'
            }
        }]
    });
});

Here's my JsFiddle: /

I want to add a static image or text underneath the chart, but above the legend to indicate what the dashed bubbles mean.

This answer shows how to add it below the legend: How do you add text to the bottom center of legend and bottom center of chart under legend?

I am at a loss as to how to modify it.

Thanks in advance.

I want to add some text or image under a Highchart, but it must appear above the Highchart legend.

My code:

$(function () {
    Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'drawPoints', function (proceed) {
        proceed.apply(this);
        for (i in this.data) {
            if(this.data[i].options.x > 90)
            this.data[i].graphic.dashstyleSetter(this.options.dashStyle || 'solid');
        }
    });

    $('#container').highcharts({

        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts Bubbles'
        },

        series: [{
            dashStyle: 'dash',
            data: [
                [97, 36, 79],
                [94, 74, 60],
                [68, 76, 58],
                [64, 87, 56],
                [68, 27, 73],
                [74, 99, 42],
                [7, 93, 87],
                [51, 69, 40],
                [38, 23, 33],
                [57, 86, 31]
            ],
            marker: {
                lineColor: 'red'
            }
        }]
    });
});

Here's my JsFiddle: http://jsfiddle/qebxk6ty/6/

I want to add a static image or text underneath the chart, but above the legend to indicate what the dashed bubbles mean.

This answer shows how to add it below the legend: How do you add text to the bottom center of legend and bottom center of chart under legend?

I am at a loss as to how to modify it.

Thanks in advance.

• javascript
• jquery
• html
• css
• highcharts

3 Answers 3

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./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

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/qebxk6ty/7/

Was dealing with same issue but with Pie Chart as xAxis title doesn't work with PIE chart I solved it with positioning legend and subtitle both.

// Data retrieved from https://netmarketshare.
Highcharts.chart('container', {
    chart: {
    type: 'pie',
    marginBottom: 100 // Increase the margin to make room for the subtitle and legend
  },
  title:{
    text: 'Browser market shares at a specific website, 2014'
  },
  subtitle: {
    text: 'Source: Wikipedia',
    align: 'center',
    verticalAlign: 'bottom',
    style: {
    fontSize: 20,
    },
    y: -20 // Adjust the y position of the subtitle
  },
  legend: {
    align: 'center',
    verticalAlign: 'bottom',
    y: 50 // Adjust the y position of the legend
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      depth: 35,
      showInLegend: true,
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }
  },
  series: [{
    type: 'pie',
    name: 'Browser share',
    data: [
      ['Firefox',   45.0],
      ['IE',       26.8],
      ['Chrome', 12.8],
      ['Safari',    8.5],
      ['Opera',     6.2],
      ['Others',   0.7]
    ]
  }],
});