Linking widgets

Throughout this guide, we'll explain the process of linking multiple widgets together.

This guide primarily emphasizes the fundamental concept of linking, supplemented with examples in native JavaScript. If you're utilizing a framework, you may find the framework-specific guide beneficial, as it also addresses these development aspects (React, Vue, Angular).

Main idea

To create a widget, you need to call a constructor and provide some dependencies and DOM element to get a widget instance:

const watchListWidget = newWatchListWidget({
  element: domElement1,
  providers: dependencies,
})

Let's now add a TimeAndSales widget and link it to WatchList by selectedSymbol

const watchListWidget = newWatchListWidget({
  element: domElement1,
  providers: dependencies,
})

const timeAndSalesWidget = newTimeAndSalesWidget({
  element: domElement2,
  providers: dependencies,
})

watchListWidget.addStateListener('selectedSymbol', (symbol) => {
  timeAndSalesWidget.updateState({ symbol })
})

Now when we select symbol in WatchList widget we will instantly select same symbol in TimeAndSales.