How to autosize a Vega chart in the Workshop Vega chart?

Ask the Community
1

I would like the vega chart to fit the area where it is display.

I tried the below configuration without any luck:

"autosize": {"type": "fit"} 
"width": "container"
"height": "container"

How can I make the Vega chart to be fitting the size of the widget in Workshop ?

2 Likes
2

Are you using the Vega schema, or the Vega-Lite schema? For Vega-Lite you can set height and width to “container” and that should be sufficient. Right now we only have data input support for the Vega-Lite schema, but Vega schema support will be coming soon.

Regardless the widget can still render Vega schema, so to get responsive sizes I believe you will need to use signals. See this stack overflow question for an example spec. I believe the key is this part of the spec:

"signals": [ {
    "name": "width",
    "init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
    "on": [
      {
        "update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
        "events": "window:resize"
      }
    ]
  }],

Let me know if that is helpful. Once we have Vega schema support I will ensure this is possible, either through configuration or more clear spec suggestions in the documentation.

1 Like
3

Thanks for posting @VincentF. Can confirm this works as intended and the chart resizes when putting this as part of the VegaSpec.

I am working with a Vega Spec and the only part of it that needed some tweaking was referencing the input variable properly to do transforms in the schema for the desired plot. Is this a Vega Lite vs. Vega data input support like you’re mentioning @tdyck? Here are some comments on the current approach and on one issue I’m still experiencing.

For the time being, I solved this using a TS function to transform the input ObjectSet into JSON. This allowed to:
1 - Define a VegaSpec “header” in Workshop with these auto-resizing signals
2 - Get the parsed input data in Vega-friendly format using the function
3 - Define all transform / plot stages in a third string variable

Finally, with a simple string concatenation in workshop, you get the full VegaSpec and the widget works as intended using “Variable” input.

One issue I’m having with this approach is that in the ~1 sec it takes the function to run and display the chart, you get a “Error: unable to load Vega specification” display on workshop, which I tried to prevent by creating a string variable transformation that looked at wether the output from the TS function was null; if it was → a blank VegaSpec displays, if it’s not → the chart to display. But for some reason, I didn’t get it to work properly using this approach and still have to deal with the pop-up error message when loading the workshop (even if it’s < 1 sec, it’s not great user experience).

Any thoughts on how to solve / prevent that pop-up error message?

4

@sboari Yes, it sounds like supporting the Vega input directly is exactly what you worked around. This feature merged late last week and should be a part of the release on Monday November 18th.

Your workaround sounds reasonable, and as for your issue I became aware of this function reloading error state last week! I fixed the issue and it should be released tomorrow, Wednesday November 13.

2 Likes
5

That sounds great, @tdyck !

Luckily the workaround in place was an easy one so it should be easy to rework it using the upcoming native vega support :slight_smile:.

Are there any planned improvements to the included Vega editor?

The Vega online editor is truly great for prototyping specs, as it lets you look into signals, data, etc. and is a great way to “debug” transforms or plotting steps. It would be great if (some) of these functionalities could be made available inside Foundry.

Thanks again!

And @VincentF, feel free to close the issue as “solved” when you get the chance.