---
title: "canvas"
description: "Fields and display options of a `canvas` panel."
---

> Documentation Index
> Fetch the complete documentation index at: https://slashobserve.com/llms.txt
> Use this file to discover all available pages before exploring further.

# canvas

## Example

```json
{
  "id": "p_canvas",
  "type": "canvas",
  "title": "Floor plan",
  "gridPos": {
    "x": 12,
    "y": 0,
    "w": 12,
    "h": 10
  },
  "datasource": "prom",
  "queries": [
    {
      "ref": "A",
      "query": "sum(up)"
    }
  ],
  "display": {
    "backgroundColor": "#101820",
    "backgroundImage": {
      "url": "https://example.com/images/floorplan.png"
    },
    "backgroundSize": "contain",
    "panZoom": true,
    "tooltip": "details",
    "elements": [
      {
        "id": "db",
        "kind": "icon",
        "left": 5,
        "top": 10,
        "width": 12,
        "height": 20,
        "image": {
          "url": "https://example.com/icons/database.svg"
        },
        "iconColor": "info"
      },
      {
        "id": "deploy",
        "kind": "button",
        "left": 40,
        "top": 10,
        "width": 25,
        "height": 15,
        "text": "Deploy",
        "buttonStyle": "primary",
        "oneClick": "action",
        "actions": [
          {
            "title": "Deploy",
            "method": "POST",
            "url": "https://deploy.example.com/api/deploy",
            "contentType": "application/json",
            "body": "{\"env\": \"${env}\"}",
            "headers": [
              {
                "name": "X-Env",
                "value": "${env}"
              }
            ],
            "query": [
              {
                "name": "dry_run",
                "value": "false"
              }
            ],
            "confirm": "Deploy to ${env}?"
          }
        ]
      },
      {
        "id": "zone",
        "kind": "rectangle",
        "left": 50,
        "top": 50,
        "width": 30,
        "height": 30,
        "placement": {
          "horizontal": "left",
          "vertical": "top",
          "left": 200,
          "top": 120,
          "width": 160,
          "height": 90
        },
        "borderWidth": 2,
        "radius": 8
      }
    ],
    "connections": [
      {
        "from": "db",
        "to": "deploy",
        "path": "curved",
        "lineStyle": "dashed",
        "arrow": "forward"
      }
    ]
  }
}
```

From [`spec/examples/decision9-features.json`](https://github.com/slashobserve/slashobserve/blob/main/spec/examples/decision9-features.json).

## Fields

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Stable across versions; comments anchor to it. |
| `title` (required) | `string` |   |
| `description` | `string` |   |
| `gridPos` (required) | `gridPos` | Position on the 24-column grid; x + w must not exceed 24. |
| `type` (required) | `"timeseries"`, `"stat"`, `"gauge"`, `"bargauge"`, `"table"`, `"piechart"`, `"heatmap"`, `"histogram"`, `"state-timeline"`, `"logs"`, `"barchart"`, `"status-history"`, `"trend"`, `"xychart"`, `"candlestick"`, `"nodeGraph"`, `"traces"`, `"flamegraph"`, `"geomap"`, `"canvas"`, `"alertlist"` |   |
| `datasource` | `datasourceRef` | A configured datasource uid, or ${name} naming a datasource variable declared in variables (before this variable, when used by one); queries then run on the datasource selected in that variable, and macros follow its datasourceType. |
| `queries` (required) | array of `panelQuery` or `expressionQuery` or `dashboardQuery` | At most 26 items. |
| `overrides` | array of [`override`](/docs/reference/observespec/overrides-and-mappings/#overrides) | At most 50 items. |
| `transform` | array of [`transform`](/docs/reference/observespec/transforms/) | At most 20 items. |
| `repeat` | `variableName` | Referenced in queries as $name, ${name} or ${name:format}. |
| `repeatDirection` | `"h"`, `"v"` |   |
| `maxPerRow` | `integer` | Between 1 and 24. |
| `timeFrom` | `string` |   |
| `timeShift` | `string` |   |
| `timezone` | `string` | browser, utc or an IANA zone such as Asia/Kolkata. The times this panel draws are shown in this zone instead of the dashboard's. |
| `hideTimeOverride` | `boolean` | Do not show the time override note (from timeFrom and timeShift) in the panel header. The override still applies to the queries. Absent means shown. |
| `interval` | `intervalRef` | A minimum step such as 30s, or ${name} naming an interval variable; queries then use the step selected in that variable. |
| `maxDataPoints` | `integer` | Between 10 and 11000. |
| `transparent` | `boolean` |   |
| `titleHidden` | `boolean` | Keep the title as the panel's name for menus and screen readers but do not show it. Absent means shown. |

Every data panel also takes the [field options](/docs/reference/observespec/field-options/).

## Display options

| Field | Values | Description |
| --- | --- | --- |
| `reduce` | `reducer` |   |
| `elements` | array of `canvasElement` | At most 50 items. |
| `connections` | array of `canvasConnection` | At most 100 items. |
| `backgroundColor` | `color` | A semantic color (ok, info, warning, critical, or text, the theme's text color) or a #rrggbb hex color. |
| `backgroundImage` | `imageRef` |   |
| `backgroundSize` | `"original"`, `"contain"`, `"cover"`, `"fill"`, `"tile"` |   |
| `borderColor` | `color` | A semantic color (ok, info, warning, critical, or text, the theme's text color) or a #rrggbb hex color. |
| `borderWidth` | `integer` | Between 0 and 20. |
| `borderRadius` | `integer` | Between 0 and 100. |
| `panZoom` | `true`, `false` |   |
| `infinitePan` | `true`, `false` |   |
| `tooltip` | `"details"`, `"none"` |   |

Generated from [`spec/schema/observespec.v0.json`](https://github.com/slashobserve/slashobserve/blob/bac0fe39/spec/schema/observespec.v0.json) at `bac0fe39`. [Report a problem](https://github.com/slashobserve/slashobserve/issues/new).