CODEWITHSUNDEEP
javascriptsvghighchartsannotations
Roy.L.T
Roy.L.T

Reputation: 183

Highcharts Annotation SVG doesn't move with other shapes

in my Highcharts project, I successfully make all the shapes in a single annotation draggable, but when I add the SVG (the type of this shape is "path"), the SVG doesn't move along with other shapes in the annotation.

I need to have some customised shapes in the annotation. Can anyone point out what the issue is for this SVG? Is it possible to put the SVG within annotation and still be draggable? Or is it some mistake I made that causes the issue?

My example here. https://jsfiddle.net/roy_jaide/754xuhtk/ As you can see, the label, circle and the line are all draggable, but the SVG shape just doesn't move at all.

Thanks for reading my question, and much appreciated if any solution provided.

 Highcharts.Annotation.prototype.onDrag = function (e) {
        if (this.chart.isInsidePlot(e.chartX - this.chart.plotLeft, e.chartY - this.chart.plotTop)) {
            var translation = this.mouseMoveToTranslation(e),
                xAxis = this.chart.xAxis[0],
                yAxis = this.chart.yAxis[0],
                xStep = this.options.stepX,
                yStep = this.options.stepY,
                pxStep = xAxis.toPixels(xStep) - xAxis.toPixels(0),
                pyStep = yAxis.toPixels(yStep) - yAxis.toPixels(0);

            if (this.options.draggable === 'x') {   //for now, it's exclusive for age handle
                this.potentialTranslationX += translation.x;
                if (Math.abs(this.potentialTranslationX) >= Math.abs(pxStep)) {
                    translation.x = (this.potentialTranslationX > 0) ? pxStep : -pxStep;
                    translation.y = 0;
                    this.currentXValue += (this.potentialTranslationX > 0) ? xStep : -xStep;
                    this.potentialTranslationX -= (this.potentialTranslationX > 0) ? pxStep : -pxStep;    //minus the step and continue to cumulate
                    //this.potentialTranslation = 0;    //not correct, the mouse will go faster than the handle

                    if (this.points.length) {
                        this.translate(translation.x, 0);
                    } else {
                        this.shapes.forEach(function (shape) {
                            shape.translate(translation.x, 0);
                        });
                        this.labels.forEach(function (label) {
                            label.translate(translation.x, 0);
                            label.text = label.annotation.options.preText + label.annotation.currentXValue;
                        });
                    }
                }
            }


            this.redraw(false);
        }
    }

Update 1: After trying Sebastian's answer on my chart, it turns out to be difficult to calculate the correct coordinates. At last I use type "image" to put display the shape. The shape is a Font-Awesome icon so before using "image" I did try to add a label with "useHTML" : true, but it seems the icon is moved a little after the first redraw(false), not sure why.

The image of the shape. I achieved this by adding "image" shape.

Upvotes: 0

Views: 382

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

 d: ["M", 440, 72, "L", 410, 45, 470, 45, "Z"],

I wouldn't recommend this way to create a draggable custom shape. This option creates a shape as expected but also sets a fixed position. Probably it is possible to implement move functionality, but I think that it will require a lot of changes into draggable core code.

What I can suggest is to make it this way:

annotations: [{
 draggable: 'x',
 shapes: [{
   points: [{
     x: 440,
     y: 72
   }, {
     x: 410,
     y: 45
   }, {
     x: 470,
     y: 45
   }, {
     x: 440,
     y: 72
   }],
   fill: 'red',
   type: 'path',
   stroke: "blue",
   strokeWidth: 3,
   markerStart: 'circle',
 }]
}]

Where markerStart is a defined shape. See a Demo

Upvotes: 1

Related Questions