CODEWITHSUNDEEP
highcharts
Meysam Zarei
Meysam Zarei

Reputation: 439

How to move point's label and SVGs by moving a point graphic in highcharts gantt?

In this example, I tried to move the points by points.graphic.translate(0, -25), but it can't help to move point's label and SVGs. You can see the details in the example.

events: {
        load() {

        var chart = this,
            series = chart.series[0];
        
        series.points.forEach(function(point) {
          point.graphic.translate(0, -25);
        });
      }
    }

Upvotes: 0

Views: 42

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You need to move each element separately.

Label:

  point.dataLabel.text.translate(0, -25)

And custom image just after rendering it:

  points.forEach(function(point) {
    point.customImg = 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();

    point.customImg.translate(0, -25)
  });

Demo: https://jsfiddle.net/BlackLabel/05hmufxa/

Upvotes: 1

Related Questions