> For the complete documentation index, see [llms.txt](https://docs.apica.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apica.io/data-management/overview-1/visualizations/area.md).

# Area

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

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&amp;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&amp;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&amp;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)