0

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/

Meysam Zarei
  • 419
  • 2
  • 14

1 Answers1

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thanks for your answer, but with using render images, exporting takes time more than before. is there any way to make it faster? – Meysam Zarei Jul 16 '20 at 11:35
  • 1
    Hi @Meysam Zarei, It is related with loading external images and probably not much can be done about it. – ppotaczek Jul 16 '20 at 12:31