chart

The chart Card template returns charts or graphs on a HTML5 canvas.

Examples of this template using different chart styles are available in the Postman sample collection:

Run in Postman

To utilize this Card template, connectors must return data in the following format:

{
    "_card" {
        type: “…”,
        title: “…”
    },
    "chart": {
        ...
    }
}

The data specification for this template is as follows:

type
Must be _chart_ - this defines that the Universal Card Template chart should be used `string`
title
Title of the Card `string`
chart
Chart definition object `object`

The chart definition object must contain the data to be displayed in the chart, the Chart.JS configuration options, and other optional configurations. An overview of the required data structure is provided here; for more detail, see the Chart Elements reference.

The data specification for the chart definition object is as follows:

configuration
Chart.js configuration object. Refer to the Chart.js Configuration reference for more information `object`
template
Recommended: a predefined template for the chart. Refer to the Chart Templates reference for available options `string`
palette
Optional: a predefined color palette for the chart. Refer to the color palettes reference for available options `string`
dimensions
Optional: defined width and height of the chart `object`

Notifications

Cards based off of the chart Universal Card Template can be displayed in the Notifications dropdown. Refer to Notifications for the required data specification.

Chart types

The following chart display types are available for use with the chart Card Template. Example scripts are available for each chart style.

Rendered order volume chart

Rendered pie chart Card

Rendered line chart Card