# Class WidgetById Fusion Embed

The WidgetById component, which is a thin wrapper on the ChartWidget component, used to render a widget created in the Sisense instance.

Note: Widget extensions based on JS scripts and add-ons in Fusion are not supported.

# Example

Here's how you can use the WidgetById component in a Vue application:

<template>
   <WidgetById
     widgetOid="64473e07dac1920034bce77f"
     dashboardOid="6441e728dac1920034bce737"
   />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { WidgetById } from '@sisense/sdk-ui-vue';

</script>

# Properties

# Data

# filters

readonly filters?: Filter[]

Filters that will slice query results

Provided filters will be merged with the existing filters from the widget configuration.

# filtersMergeStrategy

readonly filtersMergeStrategy?: "codeFirst" | "codeOnly" | "widgetFirst"

Strategy for merging the existing widget filters (including highlights) with the filters provided via the filters and highlights props:

widgetFirst - prioritizes the widget filters over the provided filters in case of filter conflicts by certain attributes.
codeFirst - prioritizes the provided filters over the widget filters in case of filter conflicts by certain attributes.
codeOnly - applies only the provided filters and completely ignores the widget filters.

If not specified, the default strategy is codeFirst.

# highlights

readonly highlights?: Filter[]

Highlight filters that will highlight results that pass filter criteria

# includeDashboardFilters

readonly includeDashboardFilters?: boolean

Boolean flag whether to include dashboard filters in the widget's filters and highlights

If not specified, the default value is false.

# dashboardOid

readonly dashboardOid?: string

Identifier of the dashboard that contains the widget

# description

readonly description?: string

Description of the widget

If not specified, it takes the existing value from the widget configuration.

# highlightSelectionDisabled

readonly highlightSelectionDisabled?: boolean

Boolean flag whether selecting data points triggers highlight filter of the selected data

Recommended to turn on when the Chart Widget component is enhanced with data drilldown by the Drilldown Widget component

If not specified, the default value is false

# styleOptions

readonly styleOptions?: WidgetByIdStyleOptions

Style options for the widget including the widget container and the chart or table inside.

# title

readonly title?: string

Title of the widget

If not specified, it takes the existing value from the widget configuration.

# widgetOid

readonly widgetOid?: string

Identifier of the widget

# Callbacks

# onBeforeRender

readonly onBeforeRender?: BeforeRenderHandler

A callback that allows you to customize the underlying chart element before it is rendered. Use the highchartsOptions object that is passed to the callback to change options values (opens new window) and then return the modified options object. The returned options are then used when rendering the chart.

This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.

For an example of how the onBeforeRender callback can be used, see the Compose SDK Charts Guide.

# onDataPointClick

readonly onDataPointClick?: AreamapDataPointEventHandler | BoxplotDataPointEventHandler | DataPointEventHandler | ScatterDataPointEventHandler | ScattermapDataPointEventHandler

Click handler callback for a data point

# onDataPointContextMenu

readonly onDataPointContextMenu?: BoxplotDataPointEventHandler | DataPointEventHandler | ScatterDataPointEventHandler

Context menu handler callback for a data point

# onDataPointsSelected

readonly onDataPointsSelected?: DataPointsEventHandler | ScatterDataPointsEventHandler

Handler callback for selection of multiple data points