Display marker or images inside bars of barchart in Highcharts

Question

I know charts with type 'bar' do not support markers. But still is there any workaround to display images/marker symbols inside bars of barchart in Highcharts.

Highchart object :

Highcharts.chart('container', {
  chart: {
    type: 'bar',
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
  },
  xAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    title: {
      text: null
    }
  },
  yAxis: {
    // min: 0,
    title: {
      text: 'Population (millions)',
      align: 'high'
    }
  },
  tooltip: {

    formatter: function() {

      return '<b>' + this.series.name + '<br/>' + this.x + '<br/>' + this.y + '000000</b>'

    }

  },
  plotOptions: {
    series: {

      allowPointSelect: true,

      marker: {
        enabled: true,

        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
      },
      dataLabels: {
        enabled: true,
        color: "blue",
        crop: false,
        overflow: "none"
      },

    }

  },
  legend: {
    align: 'right',
    verticalAlign: 'top',
    layout: 'vertical',
    // x: -150,
    // y: 100,
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Year 1800',

    data: [-10700, 45000, 45000, -20300, 20000],
    zones: [{
      value: 100,
      color: 'orange'
    }, {
      value: 500,
      color: 'black'
    }, {
      color: 'blue'
    }]
  }]
});

Refer : http://jsfiddle.net/fv1tmd0b/

Answer 1

Add a new scatter series with disabled mouse tracking and link it to the main series. In data property set the markers position.

{
  enableMouseTracking: false,
  linkedTo: '1',
  type: 'scatter',
  data: [-10700, 45000, 45000, -20300, 20000]
}

example: http://jsfiddle.net/fv1tmd0b/1/