Render SVG images on each point of gantt chart in highcharts

Question

I want to put some images as SVG on each point in Gantt chart, I've tried something like below:

function (chartt) { // on complete
            chartt.renderer.image('imageURL.png',100,100,30,30)
                .add();
}

But after running this code, the image will be shown on the corner of the page. I want to draw images on each point in the chart and set their position related to its point.

Live Demo: https://jsfiddle.net/meysamm22/x41wdu5z/

Answer 1

You need to use the right x and y attributes, calculate them based on plotX and plotY point's properties:

    function(chartt) { // on complete
        var points = chartt.series[0].points,
            width = 30,
            height = 30;

        points.forEach(function(point) {
            chartt.renderer.image(
                    'https://www.highcharts.com/images/employees2014/Torstein.jpg',
                    point.plotX + chartt.plotLeft + point.shapeArgs.width / 2 - width / 2,
                    point.plotY + chartt.plotTop - height / 2,
                    width,
                    height
                )
                .attr({
                    zIndex: 5
                })
                .add();
        });
    });

---

Live demo: https://jsfiddle.net/BlackLabel/r4ph3ykz/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image