Skip to content

Commit 119deca

Browse files
First draft
1 parent 06ea6c3 commit 119deca

File tree

2 files changed

+331
-0
lines changed

2 files changed

+331
-0
lines changed

explore-analyze/toc.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@ toc:
188188
- file: visualize/visualize-library.md
189189
- file: visualize/manage-panels.md
190190
- file: visualize/lens.md
191+
- file: visualize/bar-charts.md
191192
- file: visualize/esorql.md
192193
- file: visualize/custom-visualizations-with-vega.md
193194
- file: visualize/text-panels.md
Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
---
2+
navigation_title: Bar charts
3+
applies_to:
4+
stack: ga
5+
serverless: ga
6+
description: Instructions and best practices for building bar charts with Kibana Lens in Elastic.
7+
---
8+
9+
# Bar charts
10+
11+
Bar charts display data using rectangular bars with lengths proportional to the values they represent. They excel at comparing different categories or showing changes over time, helping you quickly spot trends, patterns, and outliers in your data at a glance.
12+
13+
The best way to create bar charts in Kibana is to use **Lens**. You can also use legacy visualization editors, but Lens provides the most current features and best performance.
14+
15+
## When to use bar charts
16+
17+
Bar charts work best for comparing discrete categories or showing data changes over time. Use them when you want to:
18+
19+
- Compare values across different categories (like sales by region or errors by service)
20+
- Show data distribution and identify the highest or lowest performing items
21+
- Track changes over time periods (daily, weekly, monthly trends)
22+
- Display rankings or top/bottom N results
23+
- Visualize survey responses or categorical data analysis
24+
25+
Consider using line charts when you need to show:
26+
- Continuous data trends with many time points
27+
- Multiple intersecting data series where relationships matter more than individual values
28+
29+
Consider using metric charts when you need to show:
30+
- Single key performance indicators without comparison context
31+
32+
## Build bar charts with Kibana
33+
34+
### Requirements
35+
36+
Bar charts work with various data types, including:
37+
- Numeric fields (integers, floats, currency values)
38+
- Date/time fields for time-based grouping
39+
- Categorical fields (strings, keywords) for grouping and breakdowns
40+
- Count of documents as a basic metric
41+
- Calculated values using formulas and aggregations
42+
43+
### Build a bar chart
44+
45+
1. Open **Lens** from the **Visualizations** menu or from a dashboard.
46+
2. Select your data view from the dropdown to specify which data to visualize.
47+
3. From the **Visualization type** dropdown, select **Bar vertical** or **Bar horizontal**.
48+
4. Configure the vertical axis (Y-axis) by dragging a numeric field to the **Vertical axis** area:
49+
- Lens automatically selects an appropriate aggregation (Count, Sum, Average, and so on)
50+
- To change the aggregation, select the field and select a different **Quick function**
51+
5. Configure the horizontal axis (X-axis) by dragging a field to the **Horizontal axis** area:
52+
- Use date fields for time series analysis
53+
- Use categorical fields to compare different groups
54+
- Lens automatically creates appropriate buckets and intervals
55+
6. (Optional) Add a **Break down by** field to create multiple data series:
56+
- Drag a categorical field to split your data into colored segments
57+
- Configure the series appearance and colors in the field options
58+
7. (Optional) Add multiple layers to compare different data sources or metrics.
59+
8. Customize the appearance using the **Appearance**, **Legend**, and **Axis** options in the toolbar.
60+
9. Save the chart to your dashboard or the Visualize Library.
61+
62+
63+
## Bar chart settings
64+
65+
Customize your visualization so it looks exactly like you want it.
66+
67+
### Vertical axis (Y-axis)
68+
69+
The vertical axis represents the measured values in your bar chart.
70+
71+
**Field selection**
72+
: Select the numeric field or metric to measure. This determines the height of your bars.
73+
74+
**Aggregation function**
75+
: Define how to calculate the values. Available options include:
76+
- **Count** (default): Count of documents
77+
- **Sum**: Total of all field values
78+
- **Average**: Mean of all field values
79+
- **Median**: Middle value when sorted
80+
- **Min/Max**: Smallest or largest value
81+
- **Percentiles**: Value at specified percentile (90th, 95th, 99th)
82+
- **Unique count**: Count of distinct values
83+
- **Formula**: Custom mathematical expressions using multiple fields
84+
85+
**Name**
86+
: Customize the display name for your metric. This appears in legends and tooltips.
87+
88+
**Value format**
89+
: Control how numbers display:
90+
- **Number**: Standard numeric format (1,234.56)
91+
- **Percentage**: Show as percentage (12.34%)
92+
- **Bytes**: Format as data sizes (1.2 GB)
93+
- **Currency**: Display with currency symbols ($1,234)
94+
- **Duration**: Show time periods (2h 15m)
95+
- **Custom**: Define your own format pattern
96+
97+
**Advanced options**
98+
: Additional settings for complex scenarios:
99+
- **Filter by**: Apply KQL filters to this specific field
100+
- **Time shift**: Compare data from different time periods
101+
- **Reduce by**: Apply mathematical operations across multiple values
102+
103+
### Horizontal axis (X-axis)
104+
105+
The horizontal axis represents the categories or time periods for your data.
106+
107+
**Field selection**
108+
: Select the field to group your data by:
109+
- **Date fields**: Automatically create time-based intervals
110+
- **Categorical fields**: Group by unique values (up to configurable limits)
111+
- **Numeric fields**: Create ranges or intervals
112+
113+
**Interval settings** (for date/numeric fields)
114+
: Control how data gets grouped:
115+
- **Auto**: Lens selects optimal intervals based on data range
116+
- **Custom**: Set specific intervals (hourly, daily, weekly, and so on)
117+
- **Calendar intervals**: Use calendar-aligned periods (months, quarters)
118+
119+
**Top values settings** (for categorical fields)
120+
: Configure category display:
121+
- **Number of values**: Limit how many categories to show (default: 5)
122+
- **Group remaining as "Other"**: Combine less frequent values
123+
- **Order by**: Sort by document count, alphabetical, or metric value
124+
125+
**Missing values**
126+
: Select how to handle documents without the field:
127+
- **Skip**: Don't show documents without the field
128+
- **Show**: Include as a separate category
129+
130+
## Break down by
131+
132+
Split your data into multiple series using a categorical field.
133+
134+
**Field selection**
135+
: Select a categorical field to split each bar into segments:
136+
- Status fields (success, error, warning)
137+
- Geographic regions or locations
138+
- Product categories or service types
139+
- User roles or customer segments
140+
141+
**Series configuration**
142+
: Control how multiple series display:
143+
- **Number of series**: Limit how many break down values to show
144+
- **Group remaining as "Other"**: Combine less frequent break down values
145+
- **Order by**: Sort series by document count or metric value
146+
147+
**Color mapping**
148+
: Assign specific colors to series values:
149+
- **Use legacy palettes**: Standard color schemes
150+
- **Assign colors to terms**: Map specific colors to specific values
151+
- **Color mode**: Categorical (distinct colors) or gradient (color variations)
152+
153+
### Appearance options
154+
155+
Customize the visual presentation of your bar chart.
156+
157+
**Bar orientation**
158+
: Select the chart orientation:
159+
- **Vertical**: Bars extend upward (good for comparing categories)
160+
- **Horizontal**: Bars extend to the right (better for long category names)
161+
162+
**Bar styling**
163+
: Control bar appearance:
164+
- **Bar width**: Adjust spacing between bars
165+
- **Border width**: Add borders around bars
166+
- **Border color**: Set border color
167+
168+
**Missing values** (for time series data)
169+
: Handle gaps in your data:
170+
- **Hide**: Don't show gaps in data
171+
- **Zero**: Show gaps as zero values
172+
- **Linear**: Connect gaps with straight lines
173+
174+
**Grid and reference lines**
175+
: Add visual guides to your chart:
176+
- **Grid lines**: Show horizontal and vertical grid lines
177+
- **Reference lines**: Add static or calculated reference lines
178+
- **Annotations**: Mark specific events or periods
179+
180+
### Legend settings
181+
182+
Control how the legend appears and what information it shows.
183+
184+
**Visibility and position**
185+
: Configure legend display:
186+
- **Show legend**: Turn the legend on or off
187+
- **Position**: Place legend inside, outside, top, bottom, start, or end
188+
- **Width**: Control legend width when positioned on sides
189+
190+
**Legend content**
191+
: Select what information to display:
192+
- **Values**: Show current values for each series
193+
- **Percentages**: Display each series as percentage of total
194+
- **Statistics**: Add statistical information (max, min, average)
195+
196+
**Label formatting**
197+
: Customize legend text:
198+
- **Truncate labels**: Shorten long category names
199+
- **Legend values**: Show additional statistics in the legend
200+
201+
### Axis customization
202+
203+
Fine-tune how your axes appear and behave.
204+
205+
#### Vertical axis (Y-axis) options
206+
207+
**Scale settings**
208+
: Control value range and scaling:
209+
- **Bounds**: Set minimum and maximum values manually
210+
- **Scale type**: Linear or logarithmic scaling
211+
- **Zero baseline**: Force axis to start at zero
212+
213+
**Axis labels**
214+
: Customize axis text and formatting:
215+
- **Title**: Add descriptive axis title
216+
- **Label rotation**: Rotate labels to prevent overlap
217+
- **Label format**: Apply number formatting to axis labels
218+
219+
**Grid lines**
220+
: Configure visual grid:
221+
- **Show grid lines**: Display horizontal reference lines
222+
- **Grid line style**: Solid, dashed, or dotted lines
223+
224+
### Bottom axis (X-axis) options
225+
226+
**Label management**
227+
: Handle category labels:
228+
- **Show labels**: Turn category labels on or off
229+
- **Label rotation**: Rotate text to fit more labels
230+
- **Label truncation**: Shorten long category names
231+
232+
**Time axis settings** (for time-based data)
233+
: Configure time display:
234+
- **Time zone**: Select time zone for date labels
235+
- **Date format**: Control how dates appear on axis
236+
- **Interval bounds**: Align intervals to calendar periods
237+
238+
## Advanced features
239+
240+
### Layers and multiple data sources
241+
242+
Add multiple data layers to compare different metrics or data sources.
243+
244+
**Adding layers**
245+
: Create complex visualizations:
246+
- **Add layer**: Combine multiple data views in one chart
247+
- **Layer types**: Mix bar charts with line charts or areas
248+
- **Layer order**: Control which data appears on top
249+
250+
**Multi-axis charts**
251+
: Use multiple Y-axes for different value ranges:
252+
- **Right axis**: Add metrics with different scales
253+
- **Dual axis**: Compare related but differently scaled metrics
254+
255+
### Filtering and queries
256+
257+
Apply filters to focus on specific data subsets.
258+
259+
**Global filters**
260+
: Apply dashboard-wide filtering:
261+
- **Time filter**: Select date ranges using the time picker
262+
- **Query bar**: Enter KQL (Kibana Query Language) queries
263+
- **Filter pills**: Add specific field value filters
264+
265+
**Chart-specific filters**
266+
: Filter individual chart elements:
267+
- **Legend filters**: Select specific series to show/hide
268+
- **Brush selection**: Select time ranges directly on the chart
269+
- **Drill-down filters**: Filter to specific categories by selecting bars
270+
271+
### Formulas and calculations
272+
273+
Create advanced metrics using mathematical expressions.
274+
275+
**Formula syntax**
276+
: Build complex calculations:
277+
- **Basic math**: Add, subtract, multiply, divide aggregations
278+
- **Functions**: Use count(), sum(), average(), percentile(), and more
279+
- **Filters**: Apply KQL filters within formulas: `count(kql='status:error')`
280+
- **Time shifts**: Compare periods: `sum(sales) / sum(sales, shift='1w')`
281+
282+
**Common formula patterns**
283+
: Useful calculation examples:
284+
- **Conversion rate**: `count(kql='action:purchase') / count() * 100`
285+
- **Error rate**: `count(kql='level:ERROR') / count() * 100`
286+
- **Growth rate**: `(sum(revenue) - sum(revenue, shift='1M')) / sum(revenue, shift='1M') * 100`
287+
288+
<!-- VISUAL 3: A dashboard showing multiple bar chart variations: a simple vertical bar chart comparing categories, a horizontal bar chart with multiple series (break down by), and a time-series bar chart showing trends over time. Each should demonstrate different styling options like colors, legends, and axis configurations. Include callouts showing the different use cases and configuration highlights. -->
289+
290+
## Examples of bar charts
291+
292+
### Sales by region comparison
293+
Compare performance across different geographic areas:
294+
- **Vertical axis**: Sum of `sales_amount` field
295+
- **Horizontal axis**: `region` field (top 10 values)
296+
- **Break down by**: `product_category` field
297+
- **Format**: Currency ($)
298+
- **Time range**: Last quarter
299+
300+
### Website traffic trends
301+
Monitor daily website visits over time:
302+
- **Vertical axis**: Count of documents
303+
- **Horizontal axis**: `@timestamp` field with daily intervals
304+
- **Break down by**: `traffic_source` field
305+
- **Missing values**: Show as zero
306+
- **Time range**: Last 30 days
307+
308+
### Error rate monitoring
309+
Track application error rates by service:
310+
- **Vertical axis**: Formula `count(kql='log.level:ERROR') / count() * 100`
311+
- **Horizontal axis**: `service.name` field
312+
- **Format**: Percentage (%)
313+
- **Reference line**: Static line at 5% error threshold
314+
- **Color**: Red bars above threshold, green below
315+
316+
### Performance comparison with targets
317+
Show actual versus target performance metrics:
318+
- **Vertical axis**: Average of `response_time_ms`
319+
- **Horizontal axis**: `service_name` field
320+
- **Layers**: Add reference line layer showing target response time
321+
- **Format**: Duration (milliseconds)
322+
- **Colors**: Value-based coloring (green < 100ms, yellow < 500ms, red >= 500ms)
323+
324+
### Hourly order distribution
325+
Analyze business patterns throughout the day:
326+
- **Vertical axis**: Count of `order_id` field
327+
- **Horizontal axis**: `order_time` field with hourly intervals
328+
- **Break down by**: `order_type` field (online, in-store, mobile)
329+
- **Time range**: Last 7 days
330+
- **Bar orientation**: Vertical with stacked series

0 commit comments

Comments
 (0)