vega-tooltip
vega-tooltip copied to clipboard
vega
Tooltip values are wrong if css alters width of svg
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.)
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.
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?
Any updates on this? I have the same issue here https://github.com/vega/vega-embed/issues/432 on mobile devices when css takes over the responsiveness of the chart. Live demo of the issue here.
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 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 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.
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.
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.
