image overlay with React

[jwvectorvest]

Is there a way (similar to the javascript example) to overlay images with react?

[jwvectorvest]

I have found the solution! Using a candlestick chart can get x and y coordinates and apply to the image style in the componentDidMount method.

var imageXCoord = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[6].x) – 15; // compensate for image width
var imageYCoord = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[6].y[1]);

var imageCircle = document.getElementById(“imagecircle”);
imageCircle.style.position = “absolute”;
imageCircle.style.width = “30px”;
imageCircle.style.left = imageXCoord + “px”;
imageCircle.style.top = imageYCoord + “px”;
imageCircle.style.zIndex = 1;
imageCircle.style.opacity = .5;

• This reply was modified 4 years, 9 months ago by jwvectorvest.

[Vishwas R]

@jwvectorvest,

Glad that you figured it out :)

—
Vishwas R
Team CanvasJS

[amitShimon]

HI can you tell me what you did i have the same problems

[Vishwas R]

@amitshimon,

Please take a look at this StackBlitz for an example on positioning image over chart in React.

—
Vishwas R
Team CanvasJS