AnyChart move and resize images in/out the chart with the mouse

Question

I am looking for a way to place multiple images in/above the chart, which can then be moved and scaled by the user with the mouse. At the moment I am using:

var image = anychart.graphics.image(imageurl, x, y, width, height);
image.parent(chartcontainer);

to draw the images over the chart, after the chart is drawn. However, I don't know how to do the resizing and moving.

Or should I use something other than graphics.image for this purpose?

I've also tried annotation labels before.

var controller = chart.annotations();

var annotation = controller.label();
    annotation.valueAnchor(706);
    annotation.xAnchor(50);
    annotation.anchor('top-left');
    annotation.text("");
    annotation.width(200);
    annotation.height(200);

    annotation.background({
    "enabled": true,
    "fill": {
            src: imageurl,
            mode: "stretch"
            }   
    });

These behave exactly as desired, with mouse dragging and markers for scaling. But as the name suggests, they can only be used as annotations in the chart and can therefore only be placed at certain values of my chart series (valueAnchor, xAnchor). But I also want to be able to place the images outside the charts, for example in the header area, by simply specifying an X and a Y coordinate, like a graphics.image. Or is it possible and I'm missing something?

I'd be glad if someone could help me.

Answer 1

The graphics library doesn't provide an out-of-the-box solution for resizing images. You should implement mouse listeners that call library API to change image width/height or apply scaling. But it supports the dragging feature, check the sample. Probably, any third party library which specializes in working with images will suit you more.