# 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
- getChannels
- getCustomizableAxes
- getData
- getFilter
- getHighlight
- getImage
- getMaxDataAge
- getPreFilter
- getRefreshInterval
- getRenderingSpecOverride
- getTheme
- isAutoRefresh
- refresh
- removeEventListener
- render
- setAutoRefresh
- setFilter
- setHighlight
- setMaxDataAge
- setPreFilter
- setRefreshInterval
- setRenderingSpecOverride
- 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>

### getChannels

- getChannels(): Promise<Record<string, { channelType: string; field: string }>>

- Get the channel data from the current chart

  #### Returns Promise<Record<string, { channelType: string; field: string }>>

  a promise that resolves to the channel data on the current chart

### getCustomizableAxes

- getCustomizableAxes(): Promise<Record<string, { fields: string[] }> | Record<string, never>>

- Get the customizable axes data from the current chart

  #### Returns Promise<Record<string, { fields: string[] }> | Record<string, never>>

  a promise that resolves to the axis data on the current chart

### 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

### getPreFilter

- getPreFilter(): Promise<PlainObject>

- Inherited from Chart.getPreFilter

  Returns the current pre-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

### 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

### getRenderingSpecOverride

- getRenderingSpecOverride(): RenderingSpec | undefined

- Gets the customizations applied to a chart after initial render

  #### Returns RenderingSpec | undefined

  the customized rendering spec or undefined.

### 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>

### setPreFilter

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

- Inherited from Chart.setPreFilter

  Sets a filter which will be applied as the first stage on the Data Source. The chart entity can be an embedded chart, embedded dashboard chart or embedded dashboard. If a Charts View is defined in the UI, then this filter will be applied after the defined pipeline.

  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.

  If filtering is required on a dynamic field defined via a Lookup, Calculated or Query Bar, then `setFilter` is the appropriate method.

  #### Parameters

  - ##### value: PlainObject

    The filter object to be applied after the defined Charts View in the UI

  #### Returns Promise<void>

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

### 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>

### setRenderingSpecOverride

- setRenderingSpecOverride(value: RenderingSpec): Promise<void>

- Sets a set of customizations on the rendered chart

  #### Parameters

  - ##### value: RenderingSpec

    customization settings and values

  #### Returns Promise<void>

  a promise that resolves once the rendering spec is saved and the component rerendered

### 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