# Area

An area chart shows trends over time with the area under the line filled in. Use it to emphasize magnitude and compare multiple series.

<figure><img src="https://2948796384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmzGprckLqwd5v6bs6m%2Fuploads%2FBmOHcRDoxcEvpu6DwlpW%2FScreenshot%20from%202026-01-09%2017-01-13.png?alt=media&#x26;token=bcad7d9f-083d-4667-a379-a7ab79933d42" alt=""><figcaption><p>Area chart</p></figcaption></figure>

<figure><img src="https://2948796384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmzGprckLqwd5v6bs6m%2Fuploads%2FVHdfITdAb6T6z9WIG0v7%2FScreenshot%20from%202026-01-09%2017-02-36.png?alt=media&#x26;token=48ddff8f-419d-45cf-bdab-c20df95c3afc" alt=""><figcaption><p>Grouped area chart</p></figcaption></figure>

### Configure an area chart

Use the **Plot** panel to choose axes, grouping, and display settings.

<figure><img src="https://2948796384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmzGprckLqwd5v6bs6m%2Fuploads%2FGOhSKsMt7S8c46H2d93E%2FScreenshot%20from%202026-01-09%2017-03-45.png?alt=media&#x26;token=35af41e3-bb74-4e36-bec4-36f7943f1086" alt="" width="416"><figcaption></figcaption></figure>

### Area chart options

Use these options to control how the area chart renders.

| Option         | What it controls                      | Typical values / notes                                                                                                  |
| -------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| X-axis         | Field used for the X axis.            | Use `timestamp` for time-based charts. Use a label field for categorical charts (for example `service`, `pod`, `host`). |
| Y-axis         | Numeric field to plot.                | Common choices: `value`, `cpu_usage`, `latency`, `error_rate`.                                                          |
| Group by       | Split into multiple series per group. | For example `pod` creates one area series per pod. Leave empty for a single series.                                     |
| Y-axis label   | Display label for the Y axis.         | Cosmetic only. Example: “CPU Usage (%)”.                                                                                |
| Y-axis scale   | How values are scaled on the Y axis.  | **Linear** for most data. **Logarithmic** for wide ranges.                                                              |
| Reference line | A horizontal threshold line.          | Example: `80` for an SLA/limit line.                                                                                    |
| Legend         | Show/hide legend.                     | Turn off for a single series or tight layouts.                                                                          |
| Calculations   | Summary overlays on the plotted data. | Min, Max, Avg, Count, Sum, P50, P90, P95, P99.                                                                          |
| Smooth graph   | Smooths the rendered curve/series.    | Useful for long time ranges. Avoid for step-like data.                                                                  |
| Custom color   | Set fixed colors for series.          | Helps keep colors consistent across dashboards.                                                                         |
| Apply          | Applies changes to the widget.        | Changes do not render until you click **Apply**.                                                                        |

### When to use an area chart

Use an area chart when you want to:

* Show trends over time while emphasizing magnitude
* Visualize accumulation or total volume (especially with stacked series)
* Compare series while keeping a strong sense of “how much”
* Spot spikes and sustained load more clearly than a thin line

Typical use cases:

* Traffic volume over time (bytes, requests)
* Resource usage over time (CPU, memory)
* Error volume over time
* Cost/usage over time

### When not to use an area chart

Avoid an area chart when:

* You need exact comparisons across many categories (use Bar)
* You have many overlapping series and it becomes cluttered (use Line)
* You need record-level details (use Table/List/Details)