Home forums Chart Support image overlay with React

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

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

    #28555

    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 6 months, 2 weeks ago by jwvectorvest.
    #28565

    @jwvectorvest,

    Glad that you figured it out :)


    Vishwas R
    Team CanvasJS

    #29250

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

    #29268

    @amitshimon,

    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.