React and vega

[Malik Koné]

Hi,

I'm trying to embed a vega-lite chart  in an resizable react component. 

How can I get the width of the vega-lite chart to follow that of it's parent element ?

At present time the vega-lite chart size follows that document.window size but not the parent element size.

[Dominik Moritz]

You can use the new reactive container sizing in Vega-Lite 4. https://vega.github.io/vega-lite/docs/size.html#specifying-responsive-width-and-height

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/vega-js/79df8276-533f-4fa2-801f-4d983cdca1e8%40googlegroups.com.

[Malik Koné]

Thank you Dominik for the link, but I already know about the nice feature of `width` and `height` to resize the graphs. 

My question is likely not very specific to vega-lite and more related to how react works.

I'm trying to embed several cells from a this notebook https://observablehq.com/@maliky/3-filtres-pour-les-donnees-des-mooc in different React Components.

I manage to get this running even with dragable components containing (and displaying) the notebook's chart cells. 

The difficulty I have, is sizing the notebook charts cells based on their react parent's component width.  For now the charts are sized with the width (or fraction of the width) mapping the document.window.width.  So the charts resize based on the window size but not on their react parent components and I don't know how to pass the value of the react parent width to each notebook chart cells.

I'm looking back into using `animationRef = React.createRef()` exposed in Jeremy's https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app or trying to inject the parents width directly in the notebook's code downloaded from observable.







Le mardi 12 novembre 2019 18:01:23 UTC+1, Dominik Moritz a écrit :

You can use the new reactive container sizing in Vega-Lite 4. https://vega.github.io/vega-lite/docs/size.html#specifying-responsive-width-and-height

On Tue, Nov 12, 2019 at 4:15 AM Malik Koné <malik...@gmail.com> wrote:

Hi,

I'm trying to embed a vega-lite chart  in an resizable react component. 

How can I get the width of the vega-lite chart to follow that of it's parent element ?

At present time the vega-lite chart size follows that document.window size but not the parent element size.

--
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 veg...@googlegroups.com.

[Malik Koné]

To clarify, my question.

Is it possible to have a keyword for the width that will translate in the svg width="100%" property ?

In that way chart will scale to fill the container.

If I understand correctly what the width keyword does know is refresh the chart based the window's size.

[Malik Koné]

Stupid me, the answer to my question is exactly what you pointed too in your first reference.  Thank you.

[Dominik Moritz]

No worries. You can scale the canvas or the SVG with CSS if you want to fill the container. Note that this will scale up the font sizes as well. 

To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/vega-js/085e7636-c263-4697-9dbb-11cb2a9a77af%40googlegroups.com.