[Lens] Page for bar charts #4057
Conversation
Vale Linting ResultsSummary: 1 suggestion found 💡 Suggestions (1)
|
🔍 Preview links for changed docs |
florent-leborgne
requested review from
gvnmagni,
markov00 and
teresaalvarezsoler
| - **Line**: Sets stroke width (1 px) plus pattern (solid or dashed). | ||
| - **Color**: Sets the line color. | ||
| - **Hide annotation**: Hides or displays the annotation. By default, this setting is turned off and the annotation is displayed. | ||
| - **Tooltip**: Adds additional fields to the annotation label. |
There was a problem hiding this comment.
The tooltip option is only available for custom queries. Maybe we should state that?
| 2. Set the **Horizontal axis** (for vertical bar charts) or the **Vertical axis** (for horizontal bar charts) to define categories for your data. This is typically a dimension like a category field, date histogram, or terms aggregation. This setting creates the individual bars. | ||
| 3. Set the **Vertical axis** (for vertical bar charts) or the **Horizontal axis** (for horizontal bar charts) to define the numerical values or quantities being measured. This metric determines the height or length of your bars. |
There was a problem hiding this comment.
This might be a bit tricky for a new user. The default bar chart is always vertical. So in the vertical axis you can provide only metric operations.
So if the user doesn't first switch to a horizontal bar chart from the style options, he won't be able to set a category in the vertical axis.
Lets say that the user is in the default vertical bar chart, maybe by reading this he will think that the way to create a horizontal bar chart is to choose a bucket operation in the Vertical axis, but he won't be able to unless he specifically picks the horizontal chart via style.
Just something to discuss...
There was a problem hiding this comment.
Agree we can keep it simple and focus on defaults here.
You're talking about orientation a bit later so I think that is fine
| When creating or editing a visualization, you can customize several appearance options. Use the toolbar above the chart to access these settings. | ||
|
|
||
| **Appearance** | ||
| : Select the bar chart orientation. It can be **Horizontal** or **Vertical**. Click the {icon}`brush` icon to access these settings. |
There was a problem hiding this comment.
Maybe we could move this 'Click the {icon}brush icon to access these settings.' at the top level, above the Apperance section, since all of the below are accessed via the style option.
There was a problem hiding this comment.
Yes, splitting this section into a Style and Legend subsection would be nice, so that we can call out how to access each, since they're "only" icons with a tooltip label in the UI
We can also create snippets out of the options identical to line, bar, and area to keep a single source of truth
There was a problem hiding this comment.
| : Select the bar chart orientation. It can be **Horizontal** or **Vertical**. Click the {icon}`brush` icon to access these settings. | |
| : Select the bar chart orientation. It can be **Horizontal** or **Vertical**. Select {icon}`brush` **Style** to access these settings. |
A suggestion for how to combine icon+tooltip label, not an actual suggestion for this line
| **Bottom axis** | ||
| : Bottom-axis controls for Lens bar charts let you tune how the horizontal scale looks and behaves. Key options are: | ||
| - **Title**: Set the label that appears under the axis (for example), “Date”); you can hide the label entirely if the layout is tight. | ||
| - **Gridlines**: Toggles vertical guide lines across the chart, which help compare bar positions against the axis scale. | ||
| - **Tick labels**: Show or hide the textual values beneath the ticks. When visible, the orientation picker lets you rotate them (horizontal, angled, vertical) to avoid overlap on dense timelines. | ||
| - **Orientation**: Set the placement of the bottom axis title. It can be **Horizonta**, **Vertical**, or **Angled**. | ||
| - **Axis scale**: Select linear (default), log, or square-root scaling. Even though this is the bottom axis, it matters for horizontal bar charts or numeric bucketed X-axes. | ||
| - **Bounds & rounding**: Manually clamp the axis to a min/max or let Lens round to nice intervals; for numeric histograms this also controls whether “nice” bucket labels are used. |
There was a problem hiding this comment.
These options appear as Bottom axis for horizontal bar charts, but in Vertical bar charts they appear as Left axis.
- Also in vertical bar charts where the metric axis side is set to right, this would be visible under Right Axis.
- Also in horizontal bar charts where the metric axis side is set to top, this would be visible under Top Axis.
Since the default bar chart is the vertical one, maybe we could name this section Left axis and mention or not the rest alternatives below?
There was a problem hiding this comment.
I'd use the default and add a quick note that Bottom/Left can interchange depending on which orientation is selected for the bar chart
| - **Axis scale**: Select linear (default), log, or square-root scaling. Even though this is the bottom axis, it matters for horizontal bar charts or numeric bucketed X-axes. | ||
| - **Bounds & rounding**: Manually clamp the axis to a min/max or let Lens round to nice intervals; for numeric histograms this also controls whether “nice” bucket labels are used. | ||
|
|
||
| **Left axis** |
There was a problem hiding this comment.
Similar to the above, these below options would be visible as Bottom axis in Vertical bar charts.
Since the default bar chart is the vertical one, maybe we could name this section as Bottom axis and mention that in case of a horizontal bar chart, these would be visible as Left axis?
| **Legend** | ||
| : Configure elements of your bar chart's legend. Configurable options include: | ||
| - **Visiblity**: Specify whether to automatically show the legend or hide it. | ||
| - **Position**: Choose to show the legend inside or outside the chart, then pick the side (left, right, top, or bottom) and fine-tune alignment (vertical/horizontal) for grid-style layouts. | ||
| - **Width**: Set the width of the legend. | ||
| - **Statistics**: Choose one or more statistic to show (for example, average, min, max, last value), Lens appends those numbers to every series label so you don’t have to hover over the chart to see headline figures. | ||
| - **Label truncation**: Choose whether to truncate long series labels, and set a limit for how many lines render when it's inside the chart. |
There was a problem hiding this comment.
Should we also separate Legend style from the above somehow? Since these are available through a different icon.
florent-leborgne
left a comment
florent-leborgne
left a comment
There was a problem hiding this comment.
Thanks for building this page, it's pretty nice. I left a few comments to align our various pages and go to a useful granularity with settings and with the scenarios we show
| - Add multiple metrics to compare different measures side by side. | ||
| - Configure the axis [settings](#settings) to customize scale, labels, and gridlines. | ||
|
|
||
| Refer [](#settings) for all data configuration options for your bar chart. |
There was a problem hiding this comment.
| Refer [](#settings) for all data configuration options for your bar chart. | |
| Refer to [](#settings) for all data configuration options for your bar chart. |
| 2. Set the **Horizontal axis** (for vertical bar charts) or the **Vertical axis** (for horizontal bar charts) to define categories for your data. This is typically a dimension like a category field, date histogram, or terms aggregation. This setting creates the individual bars. | ||
| 3. Set the **Vertical axis** (for vertical bar charts) or the **Horizontal axis** (for horizontal bar charts) to define the numerical values or quantities being measured. This metric determines the height or length of your bars. |
There was a problem hiding this comment.
Agree we can keep it simple and focus on defaults here.
You're talking about orientation a bit later so I think that is fine
| ::::{tip} | ||
| Stacked bar charts work best when: | ||
| - You want to show part-to-whole relationships | ||
| - The total value is meaningful | ||
| - You have 2-7 segments per bar (more becomes hard to read) | ||
| - The segments don't vary wildly in size | ||
| :::: |
There was a problem hiding this comment.
This tip is quite large, could we turn it into regular text maybe?
|
|
||
| 1. Create a **Bar** visualization with your metric on the vertical axis. | ||
| 2. Add a dimension to the horizontal axis (this creates your bars). | ||
| 3. Add a second dimension to **Break down by**. This splits each bar into stacked segments. |
There was a problem hiding this comment.
This isn't super clear, it may sound like there's already a first dimension already set on "Break down by"
|
|
||
| ### Break down by settings [breakdown-options] | ||
|
|
||
| **Data** |
There was a problem hiding this comment.
Likewise for this one we should list the additional options available with each of these options
| When creating or editing a visualization, you can customize several appearance options. Use the toolbar above the chart to access these settings. | ||
|
|
||
| **Appearance** | ||
| : Select the bar chart orientation. It can be **Horizontal** or **Vertical**. Click the {icon}`brush` icon to access these settings. |
There was a problem hiding this comment.
Yes, splitting this section into a Style and Legend subsection would be nice, so that we can call out how to access each, since they're "only" icons with a tooltip label in the UI
We can also create snippets out of the options identical to line, bar, and area to keep a single source of truth
| When creating or editing a visualization, you can customize several appearance options. Use the toolbar above the chart to access these settings. | ||
|
|
||
| **Appearance** | ||
| : Select the bar chart orientation. It can be **Horizontal** or **Vertical**. Click the {icon}`brush` icon to access these settings. |
There was a problem hiding this comment.
| : Select the bar chart orientation. It can be **Horizontal** or **Vertical**. Click the {icon}`brush` icon to access these settings. | |
| : Select the bar chart orientation. It can be **Horizontal** or **Vertical**. Select {icon}`brush` **Style** to access these settings. |
A suggestion for how to combine icon+tooltip label, not an actual suggestion for this line
| **Bottom axis** | ||
| : Bottom-axis controls for Lens bar charts let you tune how the horizontal scale looks and behaves. Key options are: | ||
| - **Title**: Set the label that appears under the axis (for example), “Date”); you can hide the label entirely if the layout is tight. | ||
| - **Gridlines**: Toggles vertical guide lines across the chart, which help compare bar positions against the axis scale. | ||
| - **Tick labels**: Show or hide the textual values beneath the ticks. When visible, the orientation picker lets you rotate them (horizontal, angled, vertical) to avoid overlap on dense timelines. | ||
| - **Orientation**: Set the placement of the bottom axis title. It can be **Horizonta**, **Vertical**, or **Angled**. | ||
| - **Axis scale**: Select linear (default), log, or square-root scaling. Even though this is the bottom axis, it matters for horizontal bar charts or numeric bucketed X-axes. | ||
| - **Bounds & rounding**: Manually clamp the axis to a min/max or let Lens round to nice intervals; for numeric histograms this also controls whether “nice” bucket labels are used. |
There was a problem hiding this comment.
I'd use the default and add a quick note that Bottom/Left can interchange depending on which orientation is selected for the bar chart
Co-authored-by: florent-leborgne <florent.leborgne@elastic.co>
Co-authored-by: florent-leborgne <florent.leborgne@elastic.co>
Summary
Fixes #2541 by adding a page for bar charts.
Generative AI disclosure
Tool(s) and model(s) used: