Docs: refactors configure standard options (#52278)

* refactors configure standard options

* makes prettier
This commit is contained in:
Christopher Moyer 2022-07-15 17:02:16 -05:00 committed by GitHub
parent 1834973cc6
commit 433bb735de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 113 additions and 135 deletions

View File

@ -35,11 +35,7 @@ This section describes the areas of the Grafana panel editor.
- **Transform tab -** Apply data transformations. For more information, refer to [Transform data]({{< relref "../panels/transform-data/" >}}).
- **Alert tab -** Write alert rules. For more information, refer to [Overview of Grafana 8 alerting]({{< relref "../alerting/" >}}).
1. Panel display options: The display options section contains tabs where you configure almost every aspect of your data visualization, including:
- [Apply color to series and fields]({{< relref "../panels/working-with-panels/apply-color-to-series/" >}})
- [Format a standard field]({{< relref "../panels/working-with-panels/format-standard-fields/" >}})
- [Add a title and description to a panel]({{< relref "../panels/working-with-panels/add-title-and-description/" >}})
1. Panel display options: The display options section contains tabs where you configure almost every aspect of your data visualization.
> Not all options are available for each visualization.
@ -101,7 +97,7 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
- [Visualization-specific options]({{< relref "../visualizations/" >}})
- [Override field values]({{< relref "../panels/override-field-values/about-field-overrides/" >}})
- [Configure thresholds]({{< relref "../panels/configure-thresholds/" >}})
- [Apply color to series and fields]({{< relref "../panels/working-with-panels/apply-color-to-series/" >}})
- [Configure standard options]({{< relref "../panels/configure-standard-options/" >}})
1. Add a note to describe the visualization (or describe your changes) and then click **Save** in the upper-right corner of the page.

View File

@ -182,7 +182,7 @@ A time series query result is returned in a [wide data frame format]({{< relref
> For backward compatibility, there's an exception to the above rule for queries that return three columns including a string column named metric. Instead of transforming the metric column into field labels, it becomes the field name, and then the series name is formatted as the value of the metric column. See the example with the metric column below.
To optionally customize the default series name formatting, refer to [Standard field definitions]({{< relref "../panels/standard-field-definitions/#display-name" >}}).
To optionally customize the default series name formatting, refer to [Standard options definitions]({{< relref "../panels/configure-standard-options/#display-name" >}}).
**Example with `metric` column:**
@ -226,7 +226,7 @@ GROUP BY
ORDER BY 1
```
Given the data frame result in the following example and using the graph panel, you will get two series named _value 10.0.1.1_ and _value 10.0.1.2_. To render the series with a name of _10.0.1.1_ and _10.0.1.2_ , use a [Standard field definition]({{< relref "../panels/standard-field-definitions/#display-name" >}}) display name value of `${__field.labels.hostname}`.
Given the data frame result in the following example and using the graph panel, you will get two series named _value 10.0.1.1_ and _value 10.0.1.2_. To render the series with a name of _10.0.1.1_ and _10.0.1.2_ , use a [Standard options definitions]({{< relref "../panels/configure-standard-options/#display-name" >}}) display name value of `${__field.labels.hostname}`.
Data frame result:

View File

@ -191,7 +191,7 @@ A time series query result is returned in a [wide data frame format]({{< relref
> For backward compatibility, there's an exception to the above rule for queries that return three columns including a string column named metric. Instead of transforming the metric column into field labels, it becomes the field name, and then the series name is formatted as the value of the metric column. See the example with the metric column below.
To optionally customize the default series name formatting, refer to [Standard field definitions]({{< relref "../panels/standard-field-definitions/#display-name" >}}).
To optionally customize the default series name formatting, refer to [Standard options definitions]({{< relref "../panels/configure-standard-options/#display-name" >}}).
**Example with `metric` column:**
@ -233,7 +233,7 @@ GROUP BY time, hostname
ORDER BY time
```
Given the data frame result in the following example and using the graph panel, you will get two series named _value 10.0.1.1_ and _value 10.0.1.2_. To render the series with a name of _10.0.1.1_ and _10.0.1.2_ , use a [Standard field definition]({{< relref "../panels/standard-field-definitions/#display-name" >}}) display value of `${__field.labels.hostname}`.
Given the data frame result in the following example and using the graph panel, you will get two series named _value 10.0.1.1_ and _value 10.0.1.2_. To render the series with a name of _10.0.1.1_ and _10.0.1.2_ , use a [[Standard options definitions]({{< relref "../panels/configure-standard-options/#display-name" >}}) display value of `${__field.labels.hostname}`.
Data frame result:

View File

@ -196,7 +196,7 @@ A time series query result is returned in a [wide data frame format]({{< relref
> For backward compatibility, there's an exception to the above rule for queries that return three columns including a string column named metric. Instead of transforming the metric column into field labels, it becomes the field name, and then the series name is formatted as the value of the metric column. See the example with the metric column below.
To optionally customize the default series name formatting, refer to [Standard field definitions]({{< relref "../panels/standard-field-definitions/#display-name" >}}).
To optionally customize the default series name formatting, refer to [Standard options definitions]({{< relref "../panels/configure-standard-options/#display-name" >}}).
**Example with `metric` column:**
@ -238,7 +238,7 @@ GROUP BY time, hostname
ORDER BY time
```
Given the data frame result in the following example and using the graph panel, you will get two series named _value 10.0.1.1_ and _value 10.0.1.2_. To render the series with a name of _10.0.1.1_ and _10.0.1.2_ , use a [Standard field definition]({{< relref "../panels/standard-field-definitions/#display-name" >}}) display value of `${__field.labels.hostname}`.
Given the data frame result in the following example and using the graph panel, you will get two series named _value 10.0.1.1_ and _value 10.0.1.2_. To render the series with a name of _10.0.1.1_ and _10.0.1.2_ , use a [Standard options definitions]({{< relref "../panels/configure-standard-options/#display-name" >}}) display value of `${__field.labels.hostname}`.
Data frame result:

View File

@ -1,15 +1,39 @@
---
aliases:
- /docs/grafana/latest/panels/working-with-panels/format-standard-fields/
- /docs/grafana/latest/panels/reference-standard-field-definitions/
- /docs/grafana/latest/panels/standard-field-definitions/
- /docs/sources/panels/reference-standard-field-definitions/
title: Standard field definitions
weight: 1200
title: Configure standard options
menuTitle: Configure standard options
weight: 40
keywords:
- xxx
- xxx
---
# Reference: Standard field definitions
# Configure standard options
This section explains all available standard options. They are listed in alphabetical order.
The data model used in Grafana, namely the [data frame]({{< relref "../../developers/plugins/data-frames/" >}}), is a columnar-oriented table structure that unifies both time series and table query results. Each column within this structure is called a _field_. A field can represent a single time series or table column.
Field options allow you to change how the data is displayed in your visualizations. Options and overrides that you apply do not change the data, they change how Grafana displays the data. When you change an option, it is applied to all fields, meaning all series or columns. For example, if you change the unit to percentage, then all fields with numeric values are displayed in percentages.
For a complete list of field formatting options, refer to [Standard options definitions]({{< relref "#standard-options-definitions" >}}).
> You can apply standard options to most built-in Grafana panels. Some older panels and community panels that have not updated to the new panel and data model will be missing either all or some of these field options.
1. Open a dashboard, click the panel title, and click **Edit**.
1. In the panel display options pane, locate the **Standard options** section.
1. Select the standard options you want to apply.
For more information about standard options, refer to [Standard options definitions]({{< relref "#standard-options-definitions" >}}).
1. To preview your change, click outside of the field option box you are editing or press **Enter**.
## Standard options definitions
This section explains all available standard options.
You can apply standard options to most built-in Grafana panels. Some older panels and community panels that have not updated to the new panel and data model will be missing either all or some of these field options.
@ -17,53 +41,11 @@ Most field options will not affect the visualization until you click outside of
> **Note:** We are constantly working to add and expand options for all visualization, so all options might not be available for all visualizations.
## Decimals
Number of decimals to render value with. Leave empty for Grafana to use the number of decimals provided by the data source.
To change this setting, type a number in the field and then click outside the field or press Enter.
## Data links
Lets you control the URL to which a value or visualization link.
For more information and instructions, refer to [Data links]({{< relref "./configure-data-links/#data-links" >}}).
## Display name
Lets you set the display title of all fields. You can use [variables]({{< relref "../variables/" >}}) in the field title.
When multiple stats, fields, or series are shown, this field controls the title in each stat. You can use expressions like `${__field.name}` to use only the series name or the field name in title.
Given a field with a name of Temp, and labels of {"Loc"="PBI", "Sensor"="3"}
| Expression syntax | Example | Renders to | Explanation |
| ---------------------------- | ----------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `${__field.displayName}` | Same as syntax | `Temp {Loc="PBI", Sensor="3"}` | Displays the field name, and labels in `{}` if they are present. If there is only one label key in the response, then for the label portion, Grafana displays the value of the label without the enclosing braces. |
| `${__field.name}` | Same as syntax | `Temp` | Displays the name of the field (without labels). |
| `${__field.labels}` | Same as syntax | `Loc="PBI", Sensor="3"` | Displays the labels without the name. |
| `${__field.labels.X}` | `${__field.labels.Loc}` | `PBI` | Displays the value of the specified label key. |
| `${__field.labels.__values}` | Same as Syntax | `PBI, 3` | Displays the values of the labels separated by a comma (without label keys). |
If the value is an empty string after rendering the expression for a particular field, then the default display method is used.
## Max
Lets you set the maximum value used in percentage threshold calculations. Leave blank for auto calculation based on all series and fields
## Min
Lets you set the minimum value used in percentage threshold calculations. Leave blank for auto calculation based on all series and fields
## No value
Enter what Grafana should display if the field value is empty or null. The default value is a hyphen (-).
## Unit
### Unit
Lets you choose what unit a field should use. Click in the **Unit** field, then drill down until you find the unit you want. The unit you select is applied to all fields except time.
### Custom units
#### Custom units
You can use the unit dropdown to also specify custom units, custom prefix or suffix and date time formats.
@ -81,6 +63,67 @@ You can also paste a native emoji in the unit picker and pick it as a custom uni
{{< figure src="/static/img/docs/v66/custom_unit_burger2.png" max-width="600px" caption="Custom unit emoji" >}}
### String units
#### String units
Grafana can sometime be too aggressive in parsing strings and displaying them as numbers. To make Grafana show the original string create a field override and add a unit property with the `string` unit.
### Min
Lets you set the minimum value used in percentage threshold calculations. Leave blank for auto calculation based on all series and fields.
### Max
Lets you set the maximum value used in percentage threshold calculations. Leave blank for auto calculation based on all series and fields.
### Decimals
Number of decimals to render value with. Leave empty for Grafana to use the number of decimals provided by the data source.
To change this setting, type a number in the field and then click outside the field or press Enter.
### Display name
Lets you set the display title of all fields. You can use [variables]({{< relref "../../variables/" >}}) in the field title.
When multiple stats, fields, or series are shown, this field controls the title in each stat. You can use expressions like `${__field.name}` to use only the series name or the field name in title.
Given a field with a name of Temp, and labels of {"Loc"="PBI", "Sensor"="3"}
| Expression syntax | Example | Renders to | Explanation |
| ---------------------------- | ----------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `${__field.displayName}` | Same as syntax | `Temp {Loc="PBI", Sensor="3"}` | Displays the field name, and labels in `{}` if they are present. If there is only one label key in the response, then for the label portion, Grafana displays the value of the label without the enclosing braces. |
| `${__field.name}` | Same as syntax | `Temp` | Displays the name of the field (without labels). |
| `${__field.labels}` | Same as syntax | `Loc="PBI", Sensor="3"` | Displays the labels without the name. |
| `${__field.labels.X}` | `${__field.labels.Loc}` | `PBI` | Displays the value of the specified label key. |
| `${__field.labels.__values}` | Same as Syntax | `PBI, 3` | Displays the values of the labels separated by a comma (without label keys). |
If the value is an empty string after rendering the expression for a particular field, then the default display method is used.
### Color scheme
The color options and their effect on the visualization depends on the visualization you are working with. Some visualizations have different color options.
You can specify a single color, or select a continuous (gradient) color schemes, based on a value.
Continuous color interpolates a color using the percentage of a value relative to min and max.
Select one of the following palettes:
<div class="clearfix"></div>
| Color mode | Description |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Single color** | Specify a single color, useful in an override rule |
| **From thresholds** | Informs Grafana to take the color from the matching threshold |
| **Classic palette** | Grafana will assign color by looking up a color in a palette by series index. Useful for Graphs and pie charts and other categorical data visualizations |
| **Green-Yellow-Red (by value)** | Continuous color scheme |
| **Blue-Yellow-Red (by value)** | Continuous color scheme |
| **Blues (by value)** | Continuous color scheme (panel background to blue) |
| **Reds (by value)** | Continuous color scheme (panel background color to blue) |
| **Greens (by value)** | Continuous color scheme (panel background color to blue) |
| **Purple (by value)** | Continuous color scheme (panel background color to blue) |
{{< figure src="/static/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" >}}
### No value
Enter what Grafana should display if the field value is empty or null. The default value is a hyphen (-).

View File

@ -1,34 +0,0 @@
---
aliases:
- /docs/grafana/latest/panels/working-with-panels/apply-color-to-series/
- /docs/sources/panels/working-with-panels/apply-color-to-series/
title: Apply color to series and fields
weight: 50
---
# Apply color to series and fields
In addition to specifying color based on thresholds, you can configure the color of series and field data. The color options and their effect on the visualization depends on the visualization you are working with. Some visualizations have different color options.
You can specify a single color, or select a continuous (gradient) color schemes, based on a value.
Continuous color interpolates a color using the percentage of a value relative to min and max.
1. In panel display options, scroll to the **Standard options** or **override** section.
1. Click the **Standard options Color scheme** drop-down, and select one of the following palettes:
<div class="clearfix"></div>
| Color mode | Description |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
| **Single color** | Specify a single color, useful in an override rule |
| **From thresholds** | Informs Grafana to take the color from the matching threshold |
| **Classic palette** | Grafana will assign color by looking up a color in a palette by series index. Useful for Graphs and pie charts and other categorical data visualizations |
| **Green-Yellow-Red (by value)** | Continuous color scheme |
| **Blue-Yellow-Red (by value)** | Continuous color scheme |
| **Blues (by value)** | Continuous color scheme (panel background to blue) |
| **Reds (by value)** | Continuous color scheme (panel background color to blue) |
| **Greens (by value)** | Continuous color scheme (panel background color to blue) |
| **Purple (by value)** | Continuous color scheme (panel background color to blue) | . |
{{< figure src="/static/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" class="pull-right" >}}

View File

@ -1,27 +0,0 @@
---
aliases:
- /docs/grafana/latest/panels/working-with-panels/format-standard-fields/
- /docs/sources/panels/working-with-panels/format-standard-fields/
title: Format a standard field
weight: 40
---
# Format a standard field
The data model used in Grafana, namely the [data frame]({{< relref "../../developers/plugins/data-frames/" >}}), is a columnar-oriented table structure that unifies both time series and table query results. Each column within this structure is called a _field_. A field can represent a single time series or table column.
Field options allow you to change how the data is displayed in your visualizations. Options and overrides that you apply do not change the data, they change how Grafana displays the data. When you change an option, it is applied to all fields, meaning all series or columns. For example, if you change the unit to percentage, then all fields with numeric values are displayed in percentages.
For a complete list of field formatting options, refer to [Standard field definitions]({{< relref "../standard-field-definitions/" >}}).
> You can apply standard options to most built-in Grafana panels. Some older panels and community panels that have not updated to the new panel and data model will be missing either all or some of these field options.
1. Open a dashboard, click the panel title, and click **Edit**.
1. In the panel display options pane, locate the **Standard options** section.
1. Select the standard options you want to apply.
For more information about standard options, refer to [Standard field definitions]({{< relref "../standard-field-definitions/" >}}).
1. To preview your change, click outside of the field option box you are editing or press **Enter**.

View File

@ -374,7 +374,7 @@ ORDER BY time
There are two possible workarounds to resolve this problem:
1. In Grafana v8.0.3, use an alias of the string column selected as `metric`. for example, `hostname as metric`.
2. Use the [Standard field definitions' display name]({{< relref "../panels/standard-field-definitions/#display-name" >}}) to format the alias. For the preceding example query, you would use `${__field.labels.hostname}` option.
2. Use the [Standard field definitions' display name]({{< relref "../panels/configure-standard-options/#display-name" >}}) to format the alias. For the preceding example query, you would use `${__field.labels.hostname}` option.
For more information, refer to the our relational databases documentation of [Postgres]({{< relref "../datasources/postgres/#time-series-queries" >}}), [MySQL]({{< relref "../datasources/mysql/#time-series-queries" >}}), [Microsoft SQL Server]({{< relref "../datasources/mssql/#time-series-queries" >}}).

View File

@ -157,4 +157,4 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
**Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point.
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field definitions]({{< relref "../panels/standard-field-definitions/#max" >}}).
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard options definitions]({{< relref "../panels/configure-standard-options/#max" >}}).

View File

@ -50,7 +50,7 @@ Controls the fill opacity bars.
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../panels/working-with-panels/apply-color-to-series/" >}}) field option.
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../panels/configure-standard-options/#color-scheme" >}}) field option.
Gradient display is influenced by the **Fill opacity** setting.

View File

@ -60,6 +60,6 @@ The panel can be used with time series data as well. In this case, the threshold
## Legend options
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Apply color to a series and fields]({{< relref "../panels/working-with-panels/apply-color-to-series/" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme]({{< relref "../panels/configure-standard-options/#color-scheme" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
{{< docs/shared "visualizations/legend-mode.md" >}}

View File

@ -57,6 +57,6 @@ use gradient color schemes to color values.
## Legend options
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Apply color to a series and fields]({{< relref "../panels/working-with-panels/apply-color-to-series/" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme]({{< relref "../panels/configure-standard-options/#color-scheme" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
{{< docs/shared "visualizations/legend-mode.md" >}}

View File

@ -70,7 +70,7 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
**Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point.
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field definitions]({{< relref "../../panels/standard-field-definitions/#max" >}}).
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Configure standard options]({{< relref "../../panels/configure-standard-options/#max" >}}).
![Label example](/static/img/docs/time-series-panel/axis-soft-min-max-7-4.png)

View File

@ -16,7 +16,7 @@ weight: 400
# Graph and color schemes
To set the graph and color schemes, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series/" >}}).
To set the graph and color schemes, refer to [Color scheme]({{< relref "../../panels/configure-standard-options/#color-scheme" >}}).
## Classic palette

View File

@ -83,7 +83,7 @@ Fill opacity set to 95:
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series/" >}}).
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme]({{< relref "../../panels/configure-standard-options/#color-scheme" >}}).
Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.
@ -107,7 +107,7 @@ Gradient color is generated based on the hue of the line color.
#### Scheme
In this mode the whole bar will use a color gradient defined by your Color scheme. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series/" >}}). There is more information on this option in [Graph and color scheme]({{< relref "graph-color-scheme/" >}}).
In this mode the whole bar will use a color gradient defined by your color scheme. For more information, refer to [Color scheme]({{< relref "../../panels/configure-standard-options/#color-scheme" >}}). There is more information on this option in [Graph and color scheme]({{< relref "graph-color-scheme/" >}}).
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_bars.png" max-width="1200px" caption="Gradient color scheme mode" >}}

View File

@ -89,7 +89,7 @@ Fill opacity set to 95:
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series/" >}}) .
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme]({{< relref "../../panels/configure-standard-options/#color-scheme" >}}).
Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.
@ -113,13 +113,13 @@ Gradient color is generated based on the hue of the line color.
#### Scheme
In this mode the whole line will use a color gradient defined by your Color scheme. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series/" >}}). There is more information on this option in [Graph and color scheme]({{< relref "graph-color-scheme/" >}}).
In this mode the whole line will use a color gradient defined by your Color scheme. For more information, refer to [Color scheme]({{< relref "../../panels/configure-standard-options/#color-scheme" >}}). There is more information on this option in [Graph and color scheme]({{< relref "graph-color-scheme/" >}}).
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_line.png" max-width="1200px" caption="Gradient mode scheme" >}}
### Line style
Set the style of the line. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series/" >}})
Set the style of the line. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme]({{< relref "../../panels/configure-standard-options/#color-scheme" >}}).
Line style appearance is influenced by the **Line width** and **Fill opacity** settings. In the screenshots below, **Line width** is set to 3 and **Fill opacity** is set to 20.