# Graph Widget  V1 - deprecated

## 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**

![](https://docs.intelliprove.com/_astro/tn49uVodXgU4VgfXobT1o_box-m-graph.D3MAwgK2_1Yeuhh.webp)

[View the IntelliWidgets.js reference ->](https://docs.intelliprove.com/technical-docs/dEkc-intelliwidgetsjs-sdk)

## Usage

### **Creating the widget**

The code snippet below creates a Graph widget and [mounts](https://docs.intelliprove.com/technical-docs/v2-widgets-deprecated#mounting) it to the DOM:

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.

Config

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

| **Property** | **Description** |
| --- | --- |
| `parameter`  
_string_ | Biomarker or metric of choice |
| `title`  
_nullable string_ | Optionally override the graph title with a string value of choice |
| `start`  
_nullable date string_ | Start date for the range of historical data to be retrieved  
Format: _YYYY-MM-DD_  
Default: TODAY - 8 days |
| `stop`  
_nullable date string_ | Start date for the range of historical data to be retrieved  
Format: _YYYY-MM-DD_  
Default: TODAY |

List of available [biomarkers](https://docs.intelliprove.com/insights/biomarkers) and [metrics](https://docs.intelliprove.com/insights/metrics):

| **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](https://docs.intelliprove.com/technical-docs/widget-appearance).

The used accent colors are:

-   Brand Primary
-   Support 500