Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added explore-analyze/images/area-chart.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions explore-analyze/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,8 @@ toc:
- file: visualize/visualize-library.md
- file: visualize/manage-panels.md
- file: visualize/lens.md
children:
- file: visualize/area-chart.md
- file: visualize/esorql.md
- file: visualize/custom-visualizations-with-vega.md
- file: visualize/text-panels.md
Expand Down
96 changes: 96 additions & 0 deletions explore-analyze/visualize/area-chart.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
---
navigation_title: Area charts
applies_to:
stack: ga
serverless: ga
description: Instructions and best practices for building area charts with Kibana Lens in Elastic.
---

# Build area charts with {{kib}}

An area chart is a type of visualization that displays trends over time with an emphasis on volume or magnitude. Area charts fill the space between the line and the x-axis, creating a colored "area" that visually emphasizes the volume of data.

The best way to create area charts in {{kib}} is with **Lens**.

![Area chart](../images/area-chart.png "=30%")

## When to use area charts

Area charts are particularly effective for showing trends over time when you want to emphasize volume. Use an area chart when you want to:

- Compare multiple related data series
- Visualize parts of a whole changing over time (when stacked)
- Highlight cumulative totals

## Build an area chart

To build an area chart:

:::::{stepper}

::::{step} Access Lens
**Lens** is {{kib}}'s main visualization editor. You can access it:
- By adding a new visualization to a dashboard. To do that, go to the **Dashboards** page and open or create the dashboard where you'd like to add a metric chart.
- By creating a visualization from the **Visualize library** page.
::::

::::{step} Set the visualization to Area
New visualizations default to creating **Bar** charts.

From the dropdown on the right side, select **Area**.
::::

::::{step} Define the data to show
1. Select the {{data-source}} that contains your data.
2. Select the area chart type: Standard, Stacked, or Percentage.
3. Optionally add a breakdown for multiple areas.

Refer to [](#settings) to find all data configuration options for your area chart.
::::

::::{step} Save the chart
Save your visualization by selecting **Save and return** if you're adding it from a dashboard, or **Save to library** to use it later.
::::

:::::

### Best practices

Tweak the appearance of the chart to your needs. Consider the following best practices:

**Use appropriate time intervals**
: Adjust the time bucket size (hourly, daily, weekly) based on your data density.

**Limit the number of breakdowns**
: Too many areas can make the chart hard to read.

**Consider using filters**
: Pre-filter your data to focus on specific segments.

**Add annotations**
: Mark important events on your timeline for context.

### Advanced configurations

TBD

## Area chart settings [settings]

Customize your area chart to display exactly the information you need, formatted the way you want.

## Area chart example

The following example show various configuration options that you can use for building impactful area charts.

### E-commerce Revenue Over Time by Category

This example shows you how to create an area chart displaying how much revenue each product category generates daily, with areas stacked to show both individual category performance and total revenue.

- X-axis: `order_date` with "Daily" interval
- Y-axis: `taxful_total_price` with "Sum" aggregation
- Breakdown: `category.keyword`
- Chart type: Stacked area
- Title: "Daily Revenue by Product Category"

[ADD SCREENSHOT]

31 changes: 0 additions & 31 deletions troubleshoot/ingest/opentelemetry/toc.yml

This file was deleted.

30 changes: 29 additions & 1 deletion troubleshoot/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,35 @@ toc:
- file: ingest.md
children:
# - file: ingest/enterprise-search/crawls.md
- toc: ingest/opentelemetry
- file: ingest/opentelemetry/index.md
children:
- file: ingest/opentelemetry/edot-collector/index.md
children:
- file: ingest/opentelemetry/edot-collector/collector-oomkilled.md
- file: ingest/opentelemetry/edot-collector/insufficient-resources-kubestack.md
- file: ingest/opentelemetry/edot-collector/metadata.md
- file: ingest/opentelemetry/edot-collector/enable-debug-logging.md
- file: ingest/opentelemetry/edot-collector/collector-not-starting.md
- file: ingest/opentelemetry/edot-collector/misconfigured-sampling-collector.md
- file: ingest/opentelemetry/edot-collector/trace-export-errors.md
- file: ingest/opentelemetry/edot-sdks/index.md
children:
- file: ingest/opentelemetry/edot-sdks/android/index.md
- file: ingest/opentelemetry/edot-sdks/dotnet/index.md
- file: ingest/opentelemetry/edot-sdks/ios/index.md
- file: ingest/opentelemetry/edot-sdks/java/index.md
children:
- file: ingest/opentelemetry/edot-sdks/java/proxy-issues.md
- file: ingest/opentelemetry/edot-sdks/nodejs/index.md
- file: ingest/opentelemetry/edot-sdks/php/index.md
- file: ingest/opentelemetry/edot-sdks/python/index.md
- file: ingest/opentelemetry/edot-sdks/enable-debug-logging.md
- file: ingest/opentelemetry/edot-sdks/missing-app-telemetry.md
- file: ingest/opentelemetry/edot-sdks/proxy.md
- file: ingest/opentelemetry/edot-sdks/misconfigured-sampling-sdk.md
- file: ingest/opentelemetry/no-data-in-kibana.md
- file: ingest/opentelemetry/connectivity.md
- file: ingest/opentelemetry/contact-support.md
- file: ingest/logstash.md
children:
- file: ingest/logstash/plugins.md
Expand Down