---
title: Trends Module
slug: technical-docs/trends-module
docTags: 
createdAt: 2026-03-04T14:31:06.600Z
---

# Intro

The **Trends Module,** part of the [Main Widget](docId\:e52TSv_T_kBhLw0UVBTg4), offers a dynamic way to visualise the progression of a specific biomarker, metric or health profile over time. It enables users to track changes in their health status and gain insights into long-term patterns. Each point represents the value for a given day, with multiple measurements on the same day aggregated into a single daily average. Easily integrate it into your platform to help users understand how their health evolves.

:::Iframe{iframeHeight="0" code="<iframe &#xA;    srcdoc='&#xA;        <html lang=&#x22;en&#x22; class=&#x22;size-full&#x22;>&#xA;            <head>&#xA;                <meta charset=&#x22;UTF-8&#x22; />&#xA;                <meta name=&#x22;viewport&#x22; content=&#x22;width=device-width, initial-scale=1.0&#x22; />&#xA;                <script src=&#x22;https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4&#x22;></script>&#xA;                <script type=&#x22;module&#x22; src=&#x22;https://cdn.intelliprove.com/packages/intelli-widgets/v3/latest.js&#x22;></script>&#xA;                <style>&#xA;                    @import &#x22;tailwindcss&#x22;;&#xA;                    :root { --tw-border-style: solid; }&#xA;                    @layer base { ip-session, ip-session * { all: revert-layer; } }&#xA;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-trends-module></ip-trends-module>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 580px;&#x22;&#xA;></iframe>"}

:::



# Set-up

The Trends widget is available under the HTML tag `ip-trends-widget`. Ensure to nest it somewhere within your `ip-session` , as described in the [Set-up](docId\:ftRgwNTKfclUm0_V_Effj) documentation.

### Properties

| ****        | **Requirement**                         | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                      | **Default value**  |
| ----------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ |
| **type**    | <font color="#6b7280">*optional*</font> | `"energy-balance" \| "general-fitness" \| "hypertension" \| "mental-health-risk" \| "mental-stress" \| "sleep-quality" \| "heart-rate" \| "heart-rate-variability" \| "respiratory-rate" \| "resonant-breathing-score" \| "systolic-blood-pressure" \| "diastolic-blood-pressure" \| "fitness" \| "recovery" \| "resilience"`<br />Set the (default) view of the chart. This can be the type of metric, biomarker or health profile. | `"energy-balance"` |
| **variant** | <font color="#6b7280">*optional*</font> | `"static" \| "selectable"`<br />Whether the chart can be switched with dropdown select, or showcase a static view.                                                                                                                                                                                                                                                                                                                   | `"selectable"`     |

### Usage

```html
<ip-session 
	action-token="eyJhbG..."
	language="en-GB" 
>
  <!-- IntelliProve components go here -->
  <ip-trends-widget variant="selectable" type="energy-balance"></ip-trends-widget>
</ip-session>
```

