You must be logged in to post your query.
Home › Forums › Chart Support › image overlay with React
Is there a way (similar to the javascript example) to overlay images with react?
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;
@jwvectorvest,
Glad that you figured it out :)
— Vishwas R Team CanvasJS
HI can you tell me what you did i have the same problems
@amitshimon,
Please take a look at this StackBlitz for an example on positioning image over chart in React.
You must be logged in to reply to this topic. Login/Register