Render a Vega-Lite spec and mount MAIDR on it, in a single call.
This wraps vegaEmbed() + bindVegaLite and handles the two things
that make the manual path error-prone:
Forces renderer: "svg". MAIDR navigates the rendered DOM via CSS
selectors that target SVG elements (g.mark-rect path, etc.) and
cannot operate on a <canvas>-rendered chart. If the caller passes
embedOptions: { renderer: 'canvas' } we log a warning and override.
await result.view.runAsync() — waits for the first render frame to
complete. vegaEmbed(...) resolves when the view is constructed,
not when it has painted; binding before the first paint races the
DOM and is the root cause of "No SVG found" errors on slow/aggregated
specs (histograms, complex transforms).
Requires the global vegaEmbed (from the vega-embed script) to be
loaded before this function is called.
Parameters
target: string|HTMLElement
A CSS selector or HTMLElement that will host the chart.
Render a Vega-Lite spec and mount MAIDR on it, in a single call.
This wraps
vegaEmbed()+ bindVegaLite and handles the two things that make the manual path error-prone:renderer: "svg". MAIDR navigates the rendered DOM via CSS selectors that target SVG elements (g.mark-rect path, etc.) and cannot operate on a<canvas>-rendered chart. If the caller passesembedOptions: { renderer: 'canvas' }we log a warning and override.await result.view.runAsync()— waits for the first render frame to complete.vegaEmbed(...)resolves when the view is constructed, not when it has painted; binding before the first paint races the DOM and is the root cause of "No SVG found" errors on slow/aggregated specs (histograms, complex transforms).Requires the global
vegaEmbed(from thevega-embedscript) to be loaded before this function is called.