Skip to content

Link Chart Layout Switcher

ESM:
Use dark colors for code blocksCopy
1
import "@arcgis/map-components/components/arcgis-link-chart-layout-switcher";
CDN:
No specific import is needed for this component.
Since:ArcGIS Maps SDK for JavaScript 4.32

A component for use in link charts that allows users to switch between different layouts. See documentation on layouts for more details.

Note: Sign in to access the data in this demo, U/P: viewer01/I68VGU^nMurF

Demo

Properties

PropertyAttributeType
appearanceappearance"dropdown" | "menu-bar"
autoDestroyDisabledauto-destroy-disabledboolean
closeOnSelectDisabledclose-on-select-disabledboolean
iconiconstring
labellabelstring
layout
readonly
"basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right"
messageOverridesRecord<string, unknown>
position
deprecatedreflected
position"bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
preventExtentUpdateprevent-extent-updateboolean
referenceElementreference-elementHTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string
state
readonlyreflected
state"disabled" | "loading" | "ready"
viewLinkChartView

appearance

Property
appearance: "dropdown" | "menu-bar"
Since:ArcGIS Maps SDK for JavaScript 4.33Link Chart Layout Switcher since 4.32, appearance added at 4.33.

The appearance of the layout switcher. dropdown displays a button that is clicked to reveal a dropdown menu, while menu-bar displays a menu bar.

Attribute
appearance
Default value
"dropdown"

autoDestroyDisabled

Property
autoDestroyDisabled: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.

Attribute
auto-destroy-disabled
Default value
false

closeOnSelectDisabled

Property
closeOnSelectDisabled: boolean
Since:ArcGIS Maps SDK for JavaScript 4.33Link Chart Layout Switcher since 4.32, closeOnSelectDisabled added at 4.33.

When true, the layout menu will not close when a layout is selected. Only applicable when appearance is dropdown.

Attribute
close-on-select-disabled
Default value
false

icon

Property
icon: string

Icon displayed in the component's button, when appearance is dropdown.

See also
Attribute
icon
Default value
"nodes-link"

label

Property
label: string

The component's default label.

Attribute
label

layout

readonlyProperty
layout: "basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right"

The current selected link chart layout.

Read more...

Default value
"organic-standard"

messageOverrides

Property
messageOverrides: Record<string, unknown>

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

position

deprecatedreflected
Property
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
Deprecatedsince 4.34, use slot instead.
Attribute
position

preventExtentUpdate

Property
preventExtentUpdate: boolean

Prevents extent from updating on changes to the layout.

Read more...

Attribute
prevent-extent-update
Default value
false

referenceElement

Property

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also:

Attribute
reference-element

state

readonlyreflected
Property
state: "disabled" | "loading" | "ready"

The current state of the component.

Attribute
state
Default value
"loading"

view

Property

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Link Chart Layout Switcher component will be associated with a map or scene component rather than using the view property.

Methods

MethodSignature
componentOnReadycomponentOnReady(): Promise<void>
destroydestroy(): Promise<void>
switchLayoutswitchLayout(newLayout: "basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right"): Promise<void>

componentOnReady

Method
componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example
Use dark colors for code blocksCopy
1
2
3
4
const arcgisLinkChartLayoutSwitcher = document.querySelector("arcgis-link-chart-layout-switcher");
document.body.append(arcgisLinkChartLayoutSwitcher);
await arcgisLinkChartLayoutSwitcher.componentOnReady();
console.log("arcgis-link-chart-layout-switcher is ready to go!");
Returns
Promise<void>

destroy

Method
destroy(): Promise<void>

Permanently destroy the component.

Returns
Promise<void>

switchLayout

Method
switchLayout(newLayout: "basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right"): Promise<void>

Switches the layout of the link chart to the value provided.

Parameters
ParameterTypeOptional?
newLayout"basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right"
Returns
Promise<void>

Events

EventType
arcgisPropertyChangeCustomEvent<{ name: "state"; }>
arcgisReadyCustomEvent<void>
arcgisSwitchLayoutCustomEvent<LinkChartLayoutSwitcherViewModelSwitchLayoutEvent>

arcgisPropertyChange

Event
arcgisPropertyChange: CustomEvent<{ name: "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

bubbles
composed
cancelable

arcgisReady

Event
arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is ready to be interacted with.

bubbles
composed
cancelable

arcgisSwitchLayout

Event
arcgisSwitchLayout: CustomEvent<LinkChartLayoutSwitcherViewModelSwitchLayoutEvent>

Fires when component has completed the layout switch

Example
Use dark colors for code blocksCopy
1
2
3
layoutswitcher.addEventListener("arcgisSwitchLayout", (event) => {
  console.log("Layout Switched");
});
bubbles
composed
cancelable

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.