# Chart

Allows you to interact and embed charts into your application.

    const sdk = new EmbedSDK({ ... });
    const chart = sdk.createChart({ ... });

    // renders a chart
    chart.render(document.getElementById('embed-chart'));

    // dynamically set a filter
    chart.setFilter({ age: { $gt: 50 } });

### Hierarchy

- (Anonymous class)<(Anonymous class) & (Anonymous class) & (Anonymous class) & ChartEventSender, this> & (Anonymous class)<(Anonymous class) & (Anonymous class) & ChartEventSender, this> & (Anonymous class)<(Anonymous class) & ChartEventSender, this> & (Anonymous class)<ChartEventSender, this> & ChartEventSender<this>
  - Chart

## Index

### Methods

- _handleEvent
- _send
- addEventListener
- getData
- getFilter
- getHighlight
- getImage
- getMaxDataAge
- getRefreshInterval
- getTheme
- isAutoRefresh
- refresh
- removeEventListener
- render
- setAutoRefresh
- setFilter
- setHighlight
- setMaxDataAge
- setRefreshInterval
- setTheme
- _send

## Methods

### _handleEvent

- _handleEvent(event: EmbedChartEvent, payload: EventHandlerPayload, handlerIds: string[]): void

- Inherited from Chart._handleEvent

  Handle the event sent from embedded app.

  #### Parameters

  - ##### event: EmbedChartEvent

  - ##### payload: EventHandlerPayload

  - ##### handlerIds: string[]

  #### Returns void

### _send

- _send(eventName: string, ...payload: unknown[]): Promise<[]>

- Inherited from Chart._send

  Send message to embedded app.

  #### Parameters

  - ##### eventName: string

  - ##### Rest ...payload: unknown[]

  #### Returns Promise<[]>

### addEventListener

- addEventListener(event: EmbedChartEvent, eventHandler: EventHandler, options?: EventHandlerOptions): Promise<unknown>

- Inherited from Chart.addEventListener

  Sets an event listener

  #### Parameters

  - ##### event: EmbedChartEvent

    the event you are subscribing to

  - ##### eventHandler: EventHandler

    the callback to be executed when the event is triggered

  - ##### Optional options: EventHandlerOptions

    optional options object, can be used to customise when handler is called

  #### Returns Promise<unknown>

### getData

- getData(): Promise<object>

- Inherited from Chart.getData

  #### Returns Promise<object>

  the data of the embedded chart or dashboard chart

### getFilter

- getFilter(): Promise<PlainObject>

- Inherited from Chart.getFilter

  Returns the current filter applied to the embedded chart The filter value is taken from the state of the chart entity in the Charts app component.

  #### Returns Promise<PlainObject>

  a promise that resolves once the filter is taken from the Charts state

### getHighlight

- getHighlight(): Promise<PlainObject>

- Inherited from Chart.getHighlight

  Returns the current highlight applied to the embedded chart or dashboard chart The highlight value is taken from the state of the chart entity in the Charts app component.

  #### Returns Promise<PlainObject>

  a promise that resolves once the highlight is taken from the Charts state

### getImage

- getImage(options: GetImageOptions): Promise<string | Blob>

- Inherited from Chart.getImage

  Get the image data of embeded entity in base64 or binary encoding

  #### Parameters

  - ##### options: GetImageOptions

    options for image generation

  #### Returns Promise<string | Blob>

  image encoded with base64 or binary

### getMaxDataAge

- getMaxDataAge(): Promise<number>

- Inherited from Chart.getMaxDataAge

  #### Returns Promise<number>

  the number of seconds before a chart or dashboard's data expires

### getRefreshInterval

- getRefreshInterval(): Promise<number>

- deprecated

    This method is deprecated. Please use the 'autoRefresh' option with the 'maxDataAge' option to configure how often the chart refreshes.

  #### Returns Promise<number>

  the number of seconds a chart will wait before refreshing

### getTheme

- getTheme(): Promise<string>

- Inherited from Chart.getTheme

  #### Returns Promise<string>

  the current theme applied to the chart or dashboard

### isAutoRefresh

- isAutoRefresh(): Promise<boolean>

- Inherited from Chart.isAutoRefresh

  #### Returns Promise<boolean>

  whether auto refreshing is enabled

### refresh

- refresh(): Promise<void>

- Inherited from Chart.refresh

  Triggers a refresh of the chart or dashboard (if it has been embedded).

  #### Returns Promise<void>

  a promise that resolves once the chart or dashboard updated its data

### removeEventListener

- removeEventListener(event: EmbedChartEvent, eventHandler: EventHandler, options?: EventHandlerOptions): Promise<unknown>

- Inherited from Chart.removeEventListener

  Removes an event listener

  #### Parameters

  - ##### event: EmbedChartEvent

    the event you are unsubscribing from

  - ##### eventHandler: EventHandler

    the event listener function you are unsubscribing from

  - ##### Optional options: EventHandlerOptions

    optional options object used when addEventListener

  #### Returns Promise<unknown>

### render

- render(container: HTMLElement): Promise<void>

- Overrides BaseEmbedItem.render

  Sends the `ready` event to Charts to render the embedded chart in the component

  #### Parameters

  - ##### container: HTMLElement

    where the chart will render

  #### Returns Promise<void>

### setAutoRefresh

- setAutoRefresh(value: boolean): Promise<void>

- Inherited from Chart.setAutoRefresh

  Enable/Disable auto refreshing.

  #### Parameters

  - ##### value: boolean

  #### Returns Promise<void>

### setFilter

- setFilter(value: PlainObject): Promise<void>

- Inherited from Chart.setFilter

  Sets a filter to the state of the chart/dashboard entity in the Charts app component. The chart entity can be an embedded chart, embedded dashboard chart or embedded dashboard. The filter gets applied to the embedded chart/dashboard.

  This expects an object that contains a valid query operators. Any fields referenced in this filter are expected to be allowed for filtering in the "Embed Chart" dialog or "Embed Dashboard" dialog for each chart/dashboard you wish to filter on.

  #### Parameters

  - ##### value: PlainObject

    The filter object to be applied to the chart/dashboard

  #### Returns Promise<void>

  a promise that resolves once the filter is saved and the component rerendered

### setHighlight

- setHighlight(value: PlainObject): Promise<void>

- Inherited from Chart.setHighlight

  Sets a highlight to the state of the chart entity in the Charts app component. The chart entity can be an embedded chart or an embedded dashboard chart. The highlight gets applied to the embedded chart or dashboard chart.

  This is the exact same object that can be used in 'setFilter'. However, it [doesn't support some query expressions] (https://www.mongodb.com/docs/charts/filter-embedded-charts/#filter-syntax) And there are some specifics about what is highlightable (https://www.mongodb.com/docs/charts/highlight-chart-elements/)

  #### Parameters

  - ##### value: PlainObject

    The highlight object to be applied to the chart

  #### Returns Promise<void>

  a promise that resolves once the highlight is saved and the component rerendered

### setMaxDataAge

- setMaxDataAge(value: number): Promise<void>

- Inherited from Chart.setMaxDataAge

  Set the number of seconds a chart or dashboard's data expires.

  #### Parameters

  - ##### value: number

  #### Returns Promise<void>

### setRefreshInterval

- setRefreshInterval(value: number): Promise<void>

- Set the number of seconds a chart will wait before refreshing.

  The minimum refresh interval is 10 seconds. To disable, set the refresh interval to 0.

  deprecated

    This method is deprecated. Please use the 'autoRefresh' option with the 'maxDataAge' option to configure how often the chart refreshes.

  #### Parameters

  - ##### value: number

  #### Returns Promise<void>

### setTheme

- setTheme(value: Theme): Promise<void>

- Inherited from Chart.setTheme

  Sets the color scheme to apply to the chart or dashboard.

  If the theme is set to 'dark' and you have specified a custom background color, you should ensure that your background color has appropriate contrast.

  #### Parameters

  - ##### value: Theme

  #### Returns Promise<void>

### Static _send

- _send(msgName: string, ...payload: unknown[]): Promise<[]>

- Inherited from Chart._send

  Overrides Chart._send

  Send message to embedded app.

  #### Parameters

  - ##### msgName: string

  - ##### Rest ...payload: unknown[]

  #### Returns Promise<[]>

Generated using TypeDoc