Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip values are wrong if css alters width of svg #310

Open
caHaber opened this issue Dec 11, 2019 · 11 comments
Open

Tooltip values are wrong if css alters width of svg #310

caHaber opened this issue Dec 11, 2019 · 11 comments

Comments

@caHaber
Copy link

caHaber commented Dec 11, 2019

Hey Ya'll.

I am using vega-embed to create charts dynamically of specified width and height. I am also applying a width via css on top of that so that the svg will resize to a proper window size. I'm afraid that when I do this the tooltip still functionally acts correctly but the values are fetched using the original size of the svg. (See image below.)

incorrect_tooltip_values

This seems like a bug but I would not be surprised if there is a simple work around I am missing.

Thank you for the great work you all are doing on vega and altair.
The entire ecosystem is great and I hope to contribute as I get more comfortable with things.

@domoritz
Copy link
Member

Thank you for filing the issue @caHaber. Can you look whether the issue is in this plugin or whether the locations that Vega gives us are incorrect when the image is scaled?

@caHaber
Copy link
Author

caHaber commented Jan 22, 2020

@domoritz yup, i'll take a closer look and post here.

@armsp
Copy link

armsp commented May 10, 2020

Any updates on this? I have the same issue here vega/vega-embed#432 on mobile devices when css takes over the responsiveness of the chart. Live demo of the issue here.

@domoritz
Copy link
Member

I recommend scaling your chart in Vega instead. See https://vega.github.io/editor/#/examples/vega-lite/bar_size_responsive for an example of how you can listen to changes to the container size (also look at the generated Vega).

@armsp
Copy link

armsp commented May 11, 2020

@domoritz Just one clarification - how is the above example responsive? When I open the link and resize my window, the chart gets cropped. Am I missing something here?

@domoritz
Copy link
Member

You can resize the chart from the bottom right corner of the chart.

@armsp
Copy link

armsp commented May 15, 2020

@domoritz pardon me, but I am having a hard time thinking....if I have to resize using the bottom right corner then how is it responsive? It should automatically happen when the window resizes, right? I am sorry, but I am just quite new to js and web dev things.

@domoritz
Copy link
Member

No worries. The editor adds a handle to resize the container. The visualization adjusts to the container. In your application, the container would be sized relative to the overall window size.

@MTABcom6
Copy link

@challet
Copy link

challet commented Jul 5, 2021

I recommend scaling your chart in Vega instead. See https://vega.github.io/editor/#/examples/vega-lite/bar_size_responsive for an example of how you can listen to changes to the container size (also look at the generated Vega).

@domoritz sorry for noob question, but where is the code that listen to size change ? All I see are a vega config but nothing related to embeding it in the container.

@domoritz
Copy link
Member

domoritz commented Jul 6, 2021

Look for window:resize.

Screen Shot 2021-07-06 at 08 12 40

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants