# Graph

The *Graph* widget in Thales OSS is designed to visualize various aspects of Options and strategy performance, providing clear and actionable insights. Users can customize graphs by selecting different data sets and adjusting display options to suit their specific analysis needs. The interactive features of the *Graph* widget enhance the ability to evaluate and refine trading strategies effectively.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FULDcb8NIcHGuSpnFpTto%2FGraph.png?alt=media&#x26;token=abdf343d-c3f8-4b09-80f8-e7f959cacf72" alt=""><figcaption><p>An Active Graph Widget</p></figcaption></figure>

With its advanced technology, the *Graph* widget enables the visualization of complex data structures and the illustration of Options strategy results in real-time. A wide range of customizable options allows users to tailor the display to their specific needs.

[*Launch the App*](https://oss.thales-mfi.com/)

The *Graph* widget is designed as an output widget intended to visually process and display data. It does NOT function as a standalone unit but relies on being supplied with data from other widgets. For the *Graph* widget to operate effectively, its input interface (inlet) must be connected to the output interfaces (outlet) of other widgets.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2Fc2fEmllmE7iTWzmizzMV%2FGraph%20Inlet.png?alt=media&#x26;token=4c864fcf-3b8c-4bbb-bab4-d6b1f0d4a4fc" alt="" width="375"><figcaption><p>Input interface (Inlet) of the <em>Graph</em> Widget</p></figcaption></figure>

The *Graph* Widget can process a variety of input data and is capable of simultaneously displaying the values of all these inputs as curves.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FfqgvozFFJMzmGE0IHufX%2FMultiple%20Inputs.png?alt=media&#x26;token=e37ddcca-81d7-4dec-a290-da482826f8d0" alt="" width="146"><figcaption><p>Multiple Inputs into <em>Graph</em> Widget</p></figcaption></figure>

Once the data from a source widget (such as *Strategy Builder* or *Black-Scholes*, etc.), be connected (exported) into a *Graph* Widget via its *inlet*(s), the *Graph* gets activated, enabling visual exploration of the data and utilization of its full functionality.

On the horizontal axis, a section or range of the underlying asset price is displayed, while the vertical axis shows the corresponding value where the graph curves are measured. A positive value on this axis represents profit, and a negative value represents loss of a position or strategy. A dashed vertical line marks the current underlying price.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FardYSeDRjvqwWShzupa5%2FGraph%20General.png?alt=media&#x26;token=b67aeecc-55a2-4c0f-be2a-5b314d3f8af6" alt="" width="563"><figcaption><p>A Graph showing PnL Underlying Price and Current Price (for different Options)</p></figcaption></figure>

[*Launch the App*](https://oss.thales-mfi.com/)

By clicking and dragging the mouse on the axes, you can stretch or compress them to change and adjust the scaling of the display.

By clicking anywhere on the *Graph*'s surface and dragging the mouse, you can pan the display. You can zoom in or out of the display using the mouse wheel.

By clicking on the reset symbol <img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2F4EAX5kGzOVhtMVRj4E4j%2Fimage.png?alt=media&#x26;token=2777b8b9-759d-4d1d-b2ee-c60aff189e91" alt="" data-size="line"> in the top right corner of the widget, you can reset the display to its default view.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FLimJWrOw05ITWeuKpCQq%2FGraph%20Reset.png?alt=media&#x26;token=56cc6f7f-5e0d-4129-8701-1fca4c6974e1" alt="" width="482"><figcaption><p>Graph Reset</p></figcaption></figure>

{% hint style="info" %}
Resetting the display to the default view using the reset symbol may not always work optimally. In some cases, manual adjustments to the view may be necessary for better alignment.
{% endhint %}

When moving the mouse cursor over the graph area, a *tooltip* appears displaying the values of the curves relative to the underlying price.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FHL4rBrGZ3lZhQecMl166%2FGraph%20Curve%20Value.png?alt=media&#x26;token=eee27f9d-1883-4fd1-a050-3f94a3bd1f47" alt="" width="563"><figcaption><p>Graph Curve Value</p></figcaption></figure>

If you prefer not to display the tooltip, you can deactivate it using the symbol <img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2F4rqsuNSbIf9qaf3mNMrQ%2Fimage.png?alt=media&#x26;token=9d6fe7e0-9fe1-468d-bbbb-f30d3423d306" alt="" data-size="line"> located in the upper right corner of the widget.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FzZgPp4aLpIbuJahFWxdM%2FGraph%20Hide%20Tooltip.png?alt=media&#x26;token=ebc241ea-8b36-466a-8947-85cb65d89a73" alt="" width="512"><figcaption><p>Deactivation of tooltip</p></figcaption></figure>

#### *Marker*

On the *Graph*, you can place up to three *Marker*s, each with different colors. When a M*arker* is positioned, all curve values corresponding to the underlying asset price at the marker location are displayed in an accompanying widget next to the *Graph*. To place a marker, use the marker symbol <img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FCmJd1E0Z6ToVaUg9F4Fr%2Fimage.png?alt=media&#x26;token=dfd27549-8d0a-4677-86de-a0a354e922e3" alt="" data-size="line"> in the upper right corner of the widget area. The *Marker* widget displays not only the values of the currently visible curves but also the values of all other data points on the *Graph*, whether they are currently visible or not.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FGdkkMfgwswgK7G4aeRzL%2FGraph%20Marker.png?alt=media&#x26;token=3168ff00-6516-4c35-90aa-4f887fce8957" alt=""><figcaption><p><em>Marker</em></p></figcaption></figure>

[*Launch the App*](https://oss.thales-mfi.com/)

The price value on the Marker can be edited manually by clicking on the pen icon <img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2F7MVL3ablZXlA8UiUm5O9%2Fimage.png?alt=media&#x26;token=95b97b9f-13a7-482e-a233-47fd89121133" alt="" data-size="line"> on the top bar. This feature allows for precise adjustment of the marker’s position by directly entering a specific price, helping users analyze data more accurately.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2Ft0KSrv0g9rbpjfTIYNAc%2FGraph%20Marker%20Edit.png?alt=media&#x26;token=dea0a681-4c08-4582-af98-0f6e76573837" alt=""><figcaption></figcaption></figure>

To remove a *Marker*, the accompanying widget associated with it can simply be closed.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2Fhbb1OqwhcmW9C9KYvuNi%2FGraph%20closing%20a%20Marker.png?alt=media&#x26;token=55f5b5d1-73d3-432d-9bbe-f6b48219666a" alt=""><figcaption><p>Closing the <em>Marker</em> Widget removes the Marker from the <em>Graph</em></p></figcaption></figure>

[*Launch the App*](https://oss.thales-mfi.com/)

#### *Curves*

When data from an Options position or strategy is imported to the *Graph* Widget, by default it displays two curves. These curves represent the profit and loss diagram of the respective position or strategy.

The red curve illustrates the intrinsic value of the call option at the expiration date, also known as the payoff at expiration.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FLfgSaN45S7edOQWg871i%2FGraph%20Red%20Curve.png?alt=media&#x26;token=0df77dfb-9689-4239-8900-c7a5c1c47dc0" alt="" width="563"><figcaption><p>Red Curve displays PnL of Option / Position at Expiry (depending where the Underlying price be).</p></figcaption></figure>

&#x20;The yellow curve represents the potential profit-and-loss situation of the option before its expiration, incorporating the time value of the option. It shows how the option's value changes with the price of the underlying security before expiration.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FIIiHsBzBi8tROMVvnbnX%2FGraph%20Yellow%20Curve.png?alt=media&#x26;token=81ad6dd1-7563-4744-a09f-d4792b110741" alt="" width="563"><figcaption><p>The Yellow Curve displays the Current PnL of the Position / Option.</p></figcaption></figure>

[*Launch the App*](https://oss.thales-mfi.com/)

In the *Graph* Widget, in addition to the standard profit and loss curves, there are other important data points that can be represented as curves; notably the option Greeks such as Delta, Gamma, Theta, and others. However, these are not visible by default.

To display these additional curves, hover your mouse over the icons located in the top left corner of the widget. This action will reveal the hidden icons corresponding to the curves that can be displayed. Clicking on these icons toggles the visibility of the respective curves on or off. This allows you to customize the display of the curves as needed and gives you control over which data points are visible on the *Graph*.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FI4A54GJu2aIXjaJ7LzC8%2FGraph%20Show%20or%20Hide%20Curves.png?alt=media&#x26;token=31b4acc7-d446-4442-a813-efc3afacb314" alt=""><figcaption><p>Show / Hide Curves</p></figcaption></figure>

When multiple data series are connected to the *Graph* Widget, each data series is equipped with its own column of icons. These icons enable the toggling of visibility for the corresponding data points within each series.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FtVHCgA5GdGmsrS89j7VY%2FGraph%20Data%20Series.png?alt=media&#x26;token=62452932-db7e-457d-ab7e-31ed7a884b25" alt=""><figcaption><p>Show / Hide multiple Data Series</p></figcaption></figure>

By default The vertical axis of the *Graph* Widget displays profit and loss values for the primary curves, distinguishable by colors represented beneath the vertical axis on the lower left side of the widget (see the image).

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2F7CvOQouIIcLZ0Cvgav3F%2FGraph%20Colour%20Guide.png?alt=media&#x26;token=192d3c0b-8b5d-4bc6-9bce-5512f16a4978" alt=""><figcaption></figcaption></figure>

[*Launch the App*](https://oss.thales-mfi.com/)

When additional data points such as option Greeks are plotted on the graph, they cannot all be displayed on the same scale due to different units and value ranges. To ensure clarity, the widget scales the curves with varying value ranges on the vertical axis accordingly.

Moving the mouse over a curve on the graph causes a gray shadow to appear around the selected curve, indicating it can be selected. Clicking on the curve further emphasizes it, automatically adjusting the vertical axis to the scale of this curve while reducing prominence of other curves. If the selected curve requires a different vertical axis scale, it is displayed accordingly. The color symbol below the vertical axis changes to indicate which scaling applies to each curve.

In this highlighted state, dragging the vertical axis adjusts the scale of the selected curve independently for clearer display alongside other curves.

Clicking anywhere on the graph removes the individual view and returns all curves to a unified display.

Since some curves share the same scaling and separate display isn't practical, they are always shown in groups. For instance, curves representing the intrinsic value (red), current value (yellow), and time value (blue) of an option are always displayed together.

<figure><img src="https://2274672748-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLxoTgQmpmRHyiptQrHhG%2Fuploads%2FcITcJor3NqdBW7pIxnZN%2FGraph%20Grouped%20Display.png?alt=media&#x26;token=86d80cc8-d57c-48f4-87fd-daa4cfc79917" alt="" width="530"><figcaption><p>Grouped Dispaly</p></figcaption></figure>

[*Launch the App*](https://oss.thales-mfi.com/)
