---
title: "xychart"
description: "Fields and display options of a `xychart` 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.

# xychart

## Example

```json
{
  "id": "p_xy",
  "type": "xychart",
  "title": "Body length against severity",
  "gridPos": {
    "x": 12,
    "y": 8,
    "w": 12,
    "h": 8
  },
  "datasource": "ch",
  "queries": [
    {
      "query": "SELECT SeverityNumber AS severity, length(Body) AS body_length FROM otel_logs WHERE $__timeFilter(Timestamp) LIMIT 500",
      "format": "table"
    }
  ],
  "display": {
    "xField": "severity",
    "show": "points",
    "pointSize": 6
  }
}
```

From [`spec/examples/panel-types.json`](https://github.com/slashobserve/slashobserve/blob/main/spec/examples/panel-types.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 |
| --- | --- | --- |
| `xField` | `fieldName` | A field name or series name in the panel's frames. |
| `show` | `"points"`, `"lines"`, `"points+lines"` |   |
| `pointSize` | `integer` | Between 1 and 40. |
| `pointSizeMin` | `integer` | Between 1 and 100. |
| `pointSizeMax` | `integer` | Between 1 and 100. |
| `series` | array of `object` | At most 20 items. |
| `legend` | `"bottom"`, `"right"`, `"hidden"` |   |
| `tooltip` | `"single"`, `"all"`, `"hidden"` |   |
| `legendMode` | `"list"`, `"table"` |   |
| `legendValues` | array of `anyReducer` | At most 8 items. |
| `legendSortBy` | `"name"` or `reducer` |   |
| `legendSortDesc` | `true`, `false` |   |
| `legendWidth` | `integer` | Between 40 and 2000. |
| `tooltipSort` | `"none"`, `"asc"`, `"desc"` |   |
| `tooltipHideZeros` | `true`, `false` |   |
| `tooltipMaxWidth` | `integer` | Between 100 and 2000. |
| `tooltipMaxHeight` | `integer` | Between 100 and 2000. |

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).