Vue Embedded AnalyticsStudio Properties Reference

Defines the data sources used by Studio. If updated after initially being set, only changes to synchronous data will be processed. Any other changes will be ignored (e.g. adding/removing data sources, updating fields, etc.)

A map of key->value pairs for localising text within Studio.

A callback for localising text within Studio.

Set to true to operate Studio in RTL (Right to Left) mode.

Disables touch support (but does not remove the browser's efforts to simulate mouse events on touch).

Which mode Studio is in.

Default layout styling.

Configure which panels are displayed and on which side.

Overrides for the layout and widget configs.

Provide a custom studioId for this instance of Studio. Value will be set on the root DOM node using the attribute studio-id as well as being accessible via the api.getStudioId() method.

Provides a context object that is provided to different callbacks Studio uses. Used for passing additional information to the callbacks used by your application.

Change this value to set the tabIndex order of Studio within your application.

DOM element to use as the popup parent for Studio popups (context menus, etc.).

Allows overriding what document is used. Use this when you want Studio to use a different document than the one available on the global scope. This can happen if docking out components (something which Electron supports).

Initial state for Studio. Only read once on initialization. Can be used in conjunction with api.getState() to save and restore Studio state.

Theme to apply to Studio.

If your theme uses a font that is available on Google Fonts, pass true to load it from Google's CDN.

The CSS layer that this theme should be rendered onto. When specified, Studio CSS will be wrapped in a @layer ${themeCssLayer} { ... } block. NOTE: when specifying themeCssLayer we recommend setting themeStyleContainer to document.body to ensure that Studio CSS comes after your application CSS, allowing your application to set the order of layers.

The nonce attribute to set on style elements added to the document by themes. If "foo" is passed to this property, Studio can use the Content Security Policy style-src 'nonce-foo', instead of the less secure style-src 'unsafe-inline'. Note: CSP nonces are global to a page, where a page has multiple Studio components, every one must have the same styleNonce set.

An element to insert style elements into when injecting styles into the Studio. Styles are inserted at the start of the element. If undefined, styles will be added to the document head for Studio components rendered in the main document fragment, or to Studio wrapper element for other Studio components (e.g. those rendered in a shadow DOM or detached from the document).

All the above properties can also be specified on a single studioProperties object. If a property is set via studioProperties, as well as directly on the component, then the component value will take precedence. studioProperties is only read during initialisation, if you change it afterwards it will not impact Studio.