search

AnyChart / AnyChart-React

Intuitive and easy to use React plugin that allows you to create and work with AnyChart JavaScript Charts
https://www.anychart.com
Apache License 2.0
39 stars 30 forks source link

AnyChart Graph inside tables/divs, zoom behaves like mouse coords is wrong #33

Open cbrunettigg opened 1 year ago

cbrunettigg commented 1 year ago

I'm using v8 Graph, and putting it into a container like so:

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <h3>Graphs in Boxes!</h3>
        </div>
    </div>
    <div class="row">
        <div class="col mybox">
            <h4>box 1</h4>
        </div>
        <div class="col mybox">
            <div id="container"></div>
        </div>
    </div>
    <div class="row">
        <div class="col mybox">
            <h4>box 3</h4>
        </div>
        <div class="col mybox">
            <h4>box 4</h4>
        </div>
    </div>
</div>

Render is fine, drag/pan and click events fire correctly (even contextmenu), but zooming in and out zooms AND shifts, as if I'm at a mouse coordinate outside of the bounds of the given DIV. Occurs with or without an explicit Stage defined.

Additionally (and, it seems to explain this), mouse event report a (clientX,ClientY) that is relative to the (0,0) of the window, not the containing DIV.

Is this a bug, or is there some way to bind the scope of the graph's coordinate system to be relative to its container? If we zoom like moused over a node, we all expect to see that node stay under the mouse.