import "@arcgis/map-components/components/arcgis-link-chart-layout-switcher";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
| Property | Attribute | Type | 
|---|---|---|
appearance | appearance | "dropdown" | "menu-bar" | 
autoDestroyDisabled | auto-destroy-disabled | boolean | 
closeOnSelectDisabled | close-on-select-disabled | boolean | 
icon | icon | string | 
label | label | string | 
layoutreadonly  |  | "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" | 
messageOverrides |  | Record<string, unknown> | 
positiondeprecatedreflected  | position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" | 
preventExtentUpdate | prevent-extent-update | boolean | 
referenceElement | reference-element | HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string | 
statereadonlyreflected  | state | "disabled" | "loading" | "ready" | 
view |  | LinkChartView | 
appearance
appearance: "dropdown" | "menu-bar"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
autoDestroyDisabled: booleanIf 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
closeOnSelectDisabled: booleanWhen 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
icon: stringIcon displayed in the component's button, when appearance is dropdown.
- See also
 
- Attribute
 - icon
 - Default value
 - "nodes-link"
 
layout
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.
- Default value
 - "organic-standard"
 
messageOverrides
messageOverrides: Record<string, unknown>Replace localized message strings with your own strings.
Note: Individual message keys may change between releases.
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"slot instead.- Attribute
 - position
 
preventExtentUpdate
preventExtentUpdate: booleanPrevents extent from updating on changes to the layout.
- Attribute
 - prevent-extent-update
 - Default value
 - false
 
referenceElement
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | stringBy 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
state: "disabled" | "loading" | "ready"The current state of the component.
- Attribute
 - state
 - Default value
 - "loading"
 
view
view: LinkChartViewThe 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
viewproperty 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 theviewproperty.
Methods
| Method | Signature | 
|---|---|
componentOnReady | componentOnReady(): Promise<void> | 
destroy | destroy(): Promise<void> | 
switchLayout | 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> | 
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
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>
 
switchLayout
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
| Parameter | Type | Optional? | 
|---|---|---|
| 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
| Event | Type | 
|---|---|
arcgisPropertyChange | CustomEvent<{ name: "state"; }> | 
arcgisReady | CustomEvent<void> | 
arcgisSwitchLayout | CustomEvent<LinkChartLayoutSwitcherViewModelSwitchLayoutEvent> | 
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state"; }>Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void>Emitted when the component associated with a map or scene view is ready to be interacted with.
arcgisSwitchLayout
arcgisSwitchLayout: CustomEvent<LinkChartLayoutSwitcherViewModelSwitchLayoutEvent>Fires when component has completed the layout switch
Example
layoutswitcher.addEventListener("arcgisSwitchLayout", (event) => {
  console.log("Layout Switched");
});