Deprecated feature

The current iteration of the Chart API will continue to be available for paying customers but will not be actively developed. Thank you for your understanding.

(Script tags will be stripped)


Once you have added a chart to your page, customizing charts from the Chart API can be easily done via query parameters added to the `iframe` URL. The guide below will outline all available options, chart types, and styling tips.

See the [Chart API Overview](🔗) for more information on authenticating and adding a chart to your page.

## Query Parameters

There are numerous query parameters that you can use to customize the aesthetic and data for each graph. Chart API parameters universal to all chart types are listed in this section and all other non-universal parameters are listed along with each chart's description in subsequent sections of this page.

Standard Query Parameters

All standard query parameters used for the Data API are also valid when rendering charts. Please refer to the standard query parameters (including date ranges) as detailed on the [Patterns and Conventions](🔗) page of the documentation.

`chart_token`Chart Token**[Required]** Chart Token for the relevant Human API user. (See [Chart API Overview](🔗) for information on obtaining a chart token)
`y`Data ParameterThe value that you would like plotted on the graph as it relates to the Human API JSON data object. See the [API Reference](🔗) for each data type. (e.g. "steps", "calories", "duration", etc...) _Note: must be a numerical value_
`days`Number of days ( max 50 )Returns a graph with data for the specified number of days ending with the current day. _This calculates `start_time` and `end_time` [date range parameters](🔗), which can alternatively be supplied explicitly for an end date that is not the current day_
`color`Hex or [CSS Color](🔗) (omit `#` for hex)Add a custom color theme to your graph. (e.g. "lightgreen" and "90EE90" are equivalent) _Defaults to "steelblue" if not specified._
`unit`Unit for plotted Y Value**Time** = [`milliseconds`, `seconds`, `minutes`, `hours`] **Distance** = [`millimeters`, `centimeters`,`meters`,`kilometers`, `inches`, `feet`, `miles`] **Mass** = [`kilograms`, `lbs`] _Retains default object value if not specified_

Max Records Displayed

By default, all charts will display a maximum of 50 records. To display up to 500, ensure you set a higher `limit` parameter.

## External Styling

When placing a chart on your page, there are only three external formatting items that need to be defined: `border`, `width` & `height`.

We recommend setting `border: none` so that the chart appears like a native part of your application. Additionally, all charts are dynamically sized based on the defined `height` and `width` of the iframe, so it is important to set these properties as well.

A basic implementation of the CSS styling properties might look like this:

## Chart Types

Below are all possible chart types with examples. For your reference, here are the data types available for the Chart API:

  • **[Periodic Resources](🔗)** = activities, sleeps

  • **[Discrete Resources](🔗)** = blood_glucose, blood_pressure, bmi, body_fat, heart_rate, height, weight

  • **No Chart** = genetics, food, locations

# Bar Chart

(Script tags will be stripped)

(Script tags will be stripped)

**Periodic & Discrete Resources**

Append `type=bar` query parameter to any endpoint.

**Additional Parameters**

`type`Chart TypeSet to `bar` to render bar graph. Defaults to line graph.

# Line Graph

(Script tags will be stripped)

(Script tags will be stripped)

**Periodic Resources** Use any Periodic Resource endpoint.

**Discrete Resources** Use any Discrete Resource endpoint with `/readings`.

**Additional Parameters**

`smoothing`Smoothing MethodApply a line smoothing method to your graph. Possible values : [`linear`, `monotone`, `cardinal`, `basis`] (no smoothing <-> high smoothing) _Note: basis does not show data point and detail text on hover _

# Latest Value

(Script tags will be stripped)

(Script tags will be stripped)

**Discrete Resources **

Use any query for a discrete resource without `/readings`

# Goal Gauge

(Script tags will be stripped)

(Script tags will be stripped)

Use any query for a discrete or periodic resource and set `type=gauge` and the `goal` parameter.

For today's totals, simply use `days=1`

`goal`IntegerThe goal value represented as the 100% mark of the gauge.

## Chart API Explorer

(Script tags will be stripped)