Tooltip values are wrong if css alters width of svg

[caHaber]

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.

[domoritz]

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]

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

[armsp]

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]

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]

@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]

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

[armsp]

@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]

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]

[challet]

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]

Look for window:resize.