Home Forums Chart Support image overlay with React

image overlay with React

Viewing 5 posts - 1 through 5 (of 5 total)
  • #28537

    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;

    • This reply was modified 1 year, 3 months ago by jwvectorvest.


    Glad that you figured it out :)

    Vishwas R
    Team CanvasJS


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



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

    Vishwas R
    Team CanvasJS

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.