---
title: Graph Widget  V1 - deprecated
slug: technical-docs/graph-widget-v1-deprecated
docTags: 
createdAt: 2024-10-08T11:23:34.124Z
---

# Intro

The Graph Widget offers a dynamic way to visualise the progression of a specific biomarker or metric over time. It enables users to track changes in their health status and gain insights into long-term patterns. Easily integrate it into your platform to help users understand how their health evolves.

# Layout

**Medium**

::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/tn49uVodXgU4VgfXobT1o_box-m-graph.png" size="46" width="816" height="504" position="center" showCaption="false"}

[View the IntelliWidgets.js reference ->](docId\:dEkcuoAPHRmcZXe_caJ5v)

# Usage

## Creating the widget

The code snippet below creates a Graph widget and [mounts](docId\:sXVSW2jFSOhr7XbXEYZ_J) it to the DOM:

:::CodeblockTabs
Create and mount widget

```javascript
const intelli = IntelliProveWidgets("user_action_token");

const config = { /* config */ };
const variation = "default";
const themeOverrides = { /* theme overrides */ };
intelli.mountWidget(
    "#hr-graph-tile",
    "graph",
    config,
    variation,
    themeOverrides,
    1 /* version */
);
```
:::

## Config

The Graph widget requires additional configuration parameters that describe which parameter should be displayed. Specify the timerange and page to select a specific portion of the data.

:::CodeblockTabs
Config

```javascript
const config = {
   parameter: "heart_rate",
   title: "Heart rate graph",
   start: "2024-12-21",
   stop: "2024-12-31"
}

```
:::

| **Property**                        | **Description**                                                                                                    |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `parameter`<br />*string*           | Biomarker or metric of choice                                                                                      |
| `title`<br />*nullable string*      | Optionally override the graph title with a string value of choice                                                  |
| `start`<br />*nullable date string* | Start date for the range of historical data to be retrieved<br />Format: *YYYY-MM-DD*<br />Default: TODAY - 8 days |
| `stop`<br />*nullable date string*  | Start date for the range of historical data to be retrieved<br />Format: *YYYY-MM-DD*<br />Default: TODAY          |

List of available [biomarkers](docId\:Buhj-Nt45FUXCPgeS0qPH) and [metrics](docId\:yEqwSkx81EJu_Z8N3DjhY):

| **Parameter**              | **Layouts** |
| -------------------------- | ----------- |
| heart\_rate                | medium      |
| respiratory\_rate          | medium      |
| resonant\_breathing\_score | medium      |
| heart\_rate\_variability   | medium      |
| resting\_heart\_rate       | medium      |
| resting\_respiratory\_rate | medium      |
| mental\_stress             | medium      |
| mental\_health\_risk       | medium      |
| sleep\_quality             | medium      |
| energy\_balance            | medium      |

## Variation

Only one variation of the Graph Widget is available.

- "default"

## Theme Overrides

The Graph Widget allows [individual fine-tuning of the appearance](docId:2kL5Bnrb-6uIcQrFAqsiG).

The used accent colors are:

- Brand Primary
- Support 500