JS method to preview the size of a Vega(-Lite) chart

[Ian Lyttle]

Hi all,

I have had a look around the Altair and Vega* documentation and I have not been able to find anything, so please forgive me if I am missing something obvious.

In the vega-embed JS library (or elsewhere), are there methods I can use to get the rendered width and height? Basically, I am looking to answer the question, "how big is this entire thing being rendered"? 

Here's the operative bit of my embedding code:

vegaEmbed(el, chart_spec, opt = embed_options).then(function(result) {

  // access view as result.view

  vegaTooltip.vegaLite(result.view, chart_spec, tooltip_options);

  console.log(result.view.width());

  console.log(result.view.height());

}).catch(console.error);

Using the result.view .width() and .height() return the values from my chart specification. In this case, these refer to the data rectangle (plotting) dimensions, not the ultimate rendered dimensions.

For what it's worth, I am using vega-embed 3.2.0. (I just tried to update to 3.7.0, but I am getting some tooltip errors - I have something else to sort out there).

Can anyone provide any pointers?

Thanks!

[Dominik Moritz]

Hi Ian,

I think the cleanest way is to add a resize listener: https://vega.github.io/vega/docs/api/view/#view_addResizeListener. You could also get the size of the HTML element (SVG or Canvas) if you have access to that. 

What's the issue with tooltips? I just pushed a new version and wonder whether I broke something. You can file an issue at https://github.com/vega/vega-embed/issues/new. 

Best,

Dominik

--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ian Lyttle]

Hi Dominik,

Thanks for the tips - as it turned out, I was able to solve my sizing problem by removing the size specification for the element enclosing the Vega-Lite chart. 

I see that there are some breaking changes afoot with the tooltips - I think the thing that I was seeing was reported in #196. 

FWIW, I will be interested to see how to replicate the functionality of the `fields` option from the "old" vega-tooltip. I had a quick look at the "new" documentation, and it is not immediately evident to me. Then again, a lot of things are not immediately evident to me :)

Thanks,

Ian 

[Dominik Moritz]

To help clarify why the new tooltip implementation is a big win for the ecosystem (and you), I wrote https://github.com/vega/vega-tooltip/wiki/Changes-in-Vega-Tooltip-0.9. Please add your comments and let me know if something is not clear. 

[Ian Lyttle]

Hi Dominik,

Thanks for putting this document together - I am starting to see that it will be a big win, I just need to plan my victory strategy :)

I will take you up on your offer to add comments, and I will have to ask the Altair folks, separately, when they see building support for this (maybe they have already).

Beforehand, I could write some R functions to build a tooltip spec. Now that this is in the Vega-Lite spec, I will have to go through the Altair door.

Thanks again,

Ian