putting an image in each category in Highcharts

Question

I have this code:

http://jsfiddle.net/waqLq62d/

and let me know how to put an image at the beginning of the category. so as it is shown in this picture.

I do not know how, thank you very much.

$('#container').highcharts({

        xAxis: {
            categories: [data.d[300].nomindicador, data.d[500].nomindicador, data.d[600].nomindicador,data.d[700].nomindicador, data.d[900].nomindicador],
            title: {
                text: null
            },
            labels: {

            align: 'left',
            x: 10,
            y: -20

            }

        },
        yAxis: {

            title: {
                text: 'Resultado',
                 align: 'right'
            }

        },
        tooltip: {
            valueSuffix: ' dollars'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: false
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'center',
            verticalAlign: 'bottom',
            x: -40,
            y:40 ,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        }

Answer 1

To achieve this, you have to have to use the useHTML property on the labels object and set it to true.

Then, you have to use the format property to inject an HTML image in your label.

Full working example here:

http://jsfiddle.net/u3o416xb/

The code should look something like this:

labels: {
    x: -5,
    y: -20,
    useHTML: true,
    format: '<div style="position: absolute; left: 40px"> my label </div> <img style="height: 30px; width: 30px; margin-top: 10px"  src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'
}