[release-12.0.3] Docs: Fix graph styles and axis options content (#107402)
Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Co-authored-by: Irene Rodríguez <irene.rodriguez@grafana.com> Fix graph styles and axis options content (#107008)
This commit is contained in:
grafana-delivery-bot[bot]
@@ -1,34 +1,34 @@
|
||||
---
|
||||
title: Graph styles options
|
||||
comments: |
|
||||
This file is used in the following visualizations: candlestick, time series.
|
||||
This file is used in the following visualizations: time series.
|
||||
---
|
||||
|
||||
<!-- prettier-start-ignore -->
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [Style](#style) | Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**. |
|
||||
| [Line interpolation](#line-interpolation) | Choose how the graph interpolates the series line. |
|
||||
| Line width | Set the thickness of the series lines or the outline for bars using the **Line width** slider. |
|
||||
| [Fill opacity](#fill-opacity) | Set the series area fill color using the **Fill opacity** slider. |
|
||||
| [Gradient mode](#gradient-mode) | Choose a gradient mode to control the gradient fill, which is based on the series color. |
|
||||
| [Line style](#line-style) | Choose a solid, dashed, or dotted line style. |
|
||||
| [Connect null values](#connect-null-values) | Choose how null values, which are gaps in the data, appear on the graph. |
|
||||
| [Disconnect values](#disconnect-values) | Choose whether to set a threshold above which values in the data should be disconnected. |
|
||||
| [Show points](#show-points) | Set whether to show data points to lines or bars. |
|
||||
| Point size | Set the size of the points, from 1 to 40 pixels in diameter. |
|
||||
| [Stack series](#stack-series) | Set whether Grafana displays series on top of each other. |
|
||||
| [Bar alignment](#bar-alignment) | Set the position of the bar relative to a data point. |
|
||||
| Option | Description |
|
||||
| ------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [Style](#style) | Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**. |
|
||||
| [Line interpolation](#line-interpolation) | Choose how the graph interpolates the series line. |
|
||||
| Line width | Set the thickness of the series lines or the outline for bars using the **Line width** slider. |
|
||||
| Fill opacity | Set the series area fill color using the **Fill opacity** slider. |
|
||||
| [Gradient mode](#gradient-mode) | Choose a gradient mode to control the gradient fill, which is based on the series color. |
|
||||
| [Line style](#line-style) | Choose a solid, dashed, or dotted line style. |
|
||||
| [Connect null values](#connect-null-values) | Choose how null values, which are gaps in the data, appear on the graph. |
|
||||
| [Disconnect values](#disconnect-values) | Choose whether to set a threshold above which values in the data should be disconnected. |
|
||||
| [Show points](#show-points) | Set whether to show data points to lines or bars. |
|
||||
| Point size | Set the size of the points, from 1 to 40 pixels in diameter. |
|
||||
| [Stack series](#stack-series) | Set whether Grafana displays series on top of each other. |
|
||||
| [Bar alignment](#bar-alignment) | Set the position of the bar relative to a data point. |
|
||||
| Bar width factor | Set the width of the bar relative to minimum space between data points. A factor of 0.5 means that the bars take up half of the available space between data points. A factor of 1.0 means that the bars take up all available space. |
|
||||
|
||||
<!-- prettier-end-ignore -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Style
|
||||
|
||||
Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**. You can use overrides to combine multiple styles in the same graph. Choose from the following:
|
||||
|
||||
|
||||
|
||||
|
||||
#### Line interpolation
|
||||
|
||||
@@ -39,44 +39,32 @@ Choose how the graph interpolates the series line:
|
||||
- **Step before** - The line is displayed as steps between points. Points are rendered at the end of the step.
|
||||
- **Step after** - The line is displayed as steps between points. Points are rendered at the beginning of the step.
|
||||
|
||||
#### Line width
|
||||
|
||||
Set the thickness of the series lines or the outline for bars using the **Line width** slider.
|
||||
|
||||
#### Fill opacity
|
||||
|
||||
Set the series area fill color using the **Fill opacity** slider.
|
||||
|
||||
|
||||
|
||||
|
||||
#### Gradient mode
|
||||
|
||||
Choose a gradient mode to control the gradient fill, which is based on the series color. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme](ref:color-scheme).
|
||||
Choose a gradient mode to control the gradient fill, which is based on the series color. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#color-scheme).
|
||||
|
||||
- **None** - No gradient fill. This is the default setting.
|
||||
- **Opacity** - An opacity gradient where the opacity of the fill increases as y-axis values increase.
|
||||
- **Hue** - A subtle gradient that's based on the hue of the series color.
|
||||
- **Scheme** - A color gradient defined by your [Color scheme](ref:color-scheme). This setting is used for the fill area and line. For more information about scheme, refer to [Scheme gradient mode](#scheme-gradient-mode).
|
||||
- **Scheme** - A color gradient defined by your [Color scheme](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#color-scheme). This setting is used for the fill area and line. For more information about scheme, refer to [Scheme gradient mode](#scheme-gradient-mode).
|
||||
|
||||
Gradient appearance is influenced by the **Fill opacity** setting. The following image shows the **Fill opacity** set to 50.
|
||||
|
||||
|
||||
|
||||
|
||||
##### Scheme gradient mode
|
||||
|
||||
The **Gradient mode** option located under the **Graph styles** section has a mode called **Scheme**. When you enable **Scheme**, the line or bar receives a gradient color defined from the selected **Color scheme**.
|
||||
In **Scheme** gradient mode, the line or bar receives a gradient color defined from the selected **Color scheme** option in the visualization's **Standard** options.
|
||||
|
||||
###### From thresholds
|
||||
The following image shows a line chart with the **Green-Yellow-Red (by value)** color scheme option selected:
|
||||
|
||||
If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme**, then the line or bar color changes as it crosses the defined thresholds.
|
||||
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_line.png" max-width="600px" alt="Color scheme: Green-Yellow-Red" >}}
|
||||
|
||||
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_thresholds_line.png" max-width="1200px" alt="Colors scheme: From thresholds" >}}
|
||||
If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme**, then the line or bar color changes as it crosses the defined thresholds:
|
||||
|
||||
###### Gradient color schemes
|
||||
|
||||
The following image shows a line chart with the **Green-Yellow-Red (by value)** color scheme option selected.
|
||||
|
||||
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_line.png" max-width="1200px" alt="Color scheme: Green-Yellow-Red" >}}
|
||||
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_thresholds_line.png" max-width="600px" alt="Colors scheme: From thresholds" >}}
|
||||
|
||||
#### Line style
|
||||
|
||||
@@ -86,13 +74,13 @@ Choose a solid, dashed, or dotted line style:
|
||||
- **Dash** - Display a dashed line. When you choose this option, a list appears for you to select the length and gap (length, gap) for the line dashes. Dash spacing is 10, 10 by default.
|
||||
- **Dots** - Display dotted lines. When you choose this option, a list appears for you to select the gap (length = 0, gap) for the dot spacing. Dot spacing is 0, 10 by default.
|
||||
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-time-line-style-v12.0.png" max-width="550px" alt="Line style examples" >}}
|
||||
|
||||
{{< docs/shared lookup="visualizations/connect-null-values.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
{{< docs/shared lookup="visualizations/disconnect-values.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
To change the color, use the standard [color scheme](ref:color-scheme) field option.
|
||||
To change the color, use the standard [color scheme](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#color-scheme) field option.
|
||||
|
||||
#### Show points
|
||||
|
||||
@@ -112,7 +100,7 @@ Set whether Grafana stacks or displays series on top of each other. Be cautious
|
||||
|
||||
##### Stack series in groups
|
||||
|
||||
The stacking group option is only available as an override. For more information about creating an override, refer to [Configure field overrides](ref:configure-field-overrides).
|
||||
The stacking group option is only available as an override. For more information about creating an override, refer to [Configure field overrides](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/).
|
||||
|
||||
1. Edit the panel and click **Overrides**.
|
||||
1. Create a field override for the **Stack series** option.
|
||||
|
||||
Reference in New Issue
Block a user