diff --git a/docs/sources/panels-visualizations/configure-overrides/index.md b/docs/sources/panels-visualizations/configure-overrides/index.md index 6f875238ee5..64472b81107 100644 --- a/docs/sources/panels-visualizations/configure-overrides/index.md +++ b/docs/sources/panels-visualizations/configure-overrides/index.md @@ -21,13 +21,61 @@ weight: 110 # Configure field overrides -Overrides allow you to customize visualization settings for specific fields or series. This is accomplished by adding an override rule that targets a particular set of fields and that can each define multiple options. +Overrides allow you to customize visualization settings for specific fields or series. When you add an override rule, it targets a particular set of fields and lets you define multiple options for how that field is displayed. -For example, you set the unit for all fields that include the text 'bytes' by adding an override using the `Fields with name matching regex` matcher and then add the Unit option to the override rule. +For example, you can override the default unit measurement for all fields that include the text "bytes" by adding an override using the **Fields with name matching regex** matcher and then the **Standard options > Unit** setting to the override rule: -## Example 1: Format temperature +![Field with unit override](/media/docs/grafana/panels-visualizations/screenshot-unit-override-v10.3.png) -Let’s assume that our result set is a data frame that consists of two fields: time and temperature. +After you've set them, your overrides appear in both the **All** and **Overrides** tabs of the panel editor pane: + +![All and Overrides tabs of panel editor pane](/media/docs/grafana/panels-visualizations/screenshot-all-overrides-tabs-v11.png) + +## Supported visualizations + +You can configure field overrides for the following visualizations: + +| | | | +| -------------------------- | ---------------------- | -------------------------------- | +| [Bar chart][bar chart] | [Geomap][geomap] | [State timeline][state timeline] | +| [Bar gauge][bar gauge] | [Heatmap][heatmap] | [Status history][status history] | +| [Candlestick][candlestick] | [Histogram][histogram] | [Table][table] | +| [Canvas][canvas] | [Pie chart][pie chart] | [Time series][time series] | +| [Gauge][gauge] | [Stat][stat] | [Trend][trend] | + + + +## Override rules + +You can choose from five types of override rules, which are described in the following sections. + +### Fields with name + +Select a field from the list of all available fields. Properties you add to this type of rule are only applied to this single field. + +### Fields with name matching regex + +Specify fields to override with a regular expression. Properties you add to this type of rule are applied to all fields where the field name matches the regular expression. This override doesn't rename the field; to do this, use the [Rename by regex transformation][]. + +### Fields with type + +Select fields by type, such as string, numeric, or time. Properties you add to this type of rule are applied to all fields that match the selected type. + +### Fields returned by query + +Select all fields returned by a specific query, such as A, B, or C. Properties you add to this type of rule are applied to all fields returned by the selected query. + +### Fields with values + +Select all fields returned by your defined reducer condition, such as **Min**, **Max**, **Count**, **Total**. Properties you add to this type of rule are applied to all fields returned by the selected condition. + +## Examples + +The following examples demonstrate how you can use override rules to alter the display of fields in visualizations. + +### Example 1: Format temperature + +The following result set is a data frame that consists of two fields: time and temperature. | time | temperature | | :-----------------: | :---------: | @@ -35,7 +83,14 @@ Let’s assume that our result set is a data frame that consists of two fields: | 2020-01-02 03:05:00 | 47.0 | | 2020-01-02 03:06:00 | 48.0 | -Each field (column) of this structure can have field options applied that alter the way its values are displayed. This means that you can, for example, set the Unit to Temperature > Celsius, resulting in the following table: +You can apply field options to each field (column) of this structure to alter the way its values are displayed. For example, you can set the following override rule: + +- Rule: **Fields with type** +- Field: temperature +- Override property: **Standard options > Unit** + - Selection: **Temperature > Celsius** + +This results in the following table: | time | temperature | | :-----------------: | :---------: | @@ -43,7 +98,7 @@ Each field (column) of this structure can have field options applied that alter | 2020-01-02 03:05:00 | 47.0 °C | | 2020-01-02 03:06:00 | 48.0 °C | -In addition, the decimal place is not required, so we can remove it. You can change the Decimals from `auto` to zero (`0`), resulting in the following table: +In addition, the decimal place isn't required, so you can remove it by adding another override property that changes the **Standard options > Decimals** setting from **auto** to `0`. That results in the following table: | time | temperature | | :-----------------: | :---------: | @@ -51,9 +106,9 @@ In addition, the decimal place is not required, so we can remove it. You can cha | 2020-01-02 03:05:00 | 47 °C | | 2020-01-02 03:06:00 | 48 °C | -## Example 2: Format temperature and humidity +### Example 2: Format temperature and humidity -Let’s assume that our result set is a data frame that consists of four fields: time, high temp, low temp, and humidity. +The following result set is a data frame that consists of four fields: time, high temp, low temp, and humidity. | time | high temp | low temp | humidity | | ------------------- | --------- | -------- | -------- | @@ -61,7 +116,16 @@ Let’s assume that our result set is a data frame that consists of four fields: | 2020-01-02 03:05:00 | 47.0 | 34.0 | 68 | | 2020-01-02 03:06:00 | 48.0 | 31.0 | 68 | -Let's add the Celsius unit and get rid of the decimal place. This results in the following table: +Use the following override rule and properties to add the **Celsius** unit option and remove the decimal place: + +- Rule: **Fields with type** +- Field: temperature +- Override property: **Standard options > Unit** + - Selection: **Temperature > Celsius** +- Override property: **Standard options > Decimals** + -Change setting from **auto** to `0` + +This results in the following table: | time | high temp | low temp | humidity | | ------------------- | --------- | -------- | -------- | @@ -69,7 +133,7 @@ Let's add the Celsius unit and get rid of the decimal place. This results in the | 2020-01-02 03:05:00 | 47 °C | 34 °C | 68 °C | | 2020-01-02 03:06:00 | 48 °C | 31 °C | 68 °C | -The temperature fields look good, but the humidity must now be changed. We can fix this by applying a field option override to the humidity field and change the unit to Misc > percent (0-100). +The temperature fields are displaying correctly, but the humidity has incorrect units. You can fix this by applying a **Misc > Percent (0-100)** override to the humidity field. This results in the following table: | time | high temp | low temp | humidity | | ------------------- | --------- | -------- | -------- | @@ -79,47 +143,86 @@ The temperature fields look good, but the humidity must now be changed. We can f ## Add a field override -A field override rule can customize the visualization settings for a specific field or series. +To add a field override, follow these steps: -1. Edit the panel to which you want to add an override. -1. In the panel options side pane, click **Add field override** at the bottom of the pane. - -1. Select which fields an override rule will be applied to: - - **Fields with name:** Select a field from the list of all available fields. Properties you add to a rule with this selector are only applied to this single field. - - **Fields with name matching regex:** Specify fields to override with a regular expression. Properties you add to a rule with this selector are applied to all fields where the field name match the regex. This override doesn't rename the field; to do this, use the [Rename by regex transformation]({{< relref "../query-transform-data/transform-data/#rename-by-regex" >}}). - - **Fields with type:** Select fields by type, such as string, numeric, and so on. Properties you add to a rule with this selector are applied to all fields that match the selected type. - - **Fields returned by query:** Select all fields returned by a specific query, such as A, B, or C. Properties you add to a rule with this selector are applied to all fields returned by the selected query. +1. Navigate to the panel to which you want to add the data link. +1. Hover over any part of the panel to display the menu icon in the upper-right corner. +1. Click the menu icon and select **Edit** to open the panel editor. +1. At the bottom of the panel editor pane, click **Add field override**. +1. Select the fields to which the override will be applied: + - **Fields with name** + - **Fields with name matching regex** + - **Fields with type** + - **Fields returned by query** + - **Fields with values** 1. Click **Add override property**. 1. Select the field option that you want to apply. -1. Enter options by adding values in the fields. To return options to default values, delete the white text in the fields. -1. Continue to add overrides to this field by clicking **Add override property**, or you can click **Add override** and select a different field to add overrides to. -1. When finished, click **Save** to save all panel edits to the dashboard. - -## Delete a field override - -Delete a field override when you no longer need it. When you delete an override, the appearance of value defaults to its original format. This change impacts dashboards and dashboard users that rely on an affected panel. - -1. Edit the panel that contains the override you want to delete. -1. In panel options side pane, scroll down until you see the overrides. -1. Click the override you want to delete and then click the associated trash icon. - -## View field overrides - -You can view field overrides in the panel display options. - -1. Edit the panel that contains the overrides you want to view. -1. In panel options side pane, scroll down until you see the overrides. - -> The override settings that appear on the **All** tab are the same as the settings that appear on the **Overrides** tab. +1. Continue to add overrides to this field by clicking **Add override property**. +1. Add as many overrides as you need. +1. When you're finished, click **Save** to save all panel edits to the dashboard. ## Edit a field override -Edit a field override when you want to make changes to an override setting. The change you make takes effect immediately. +To edit a field override, follow these steps: -1. Edit the panel that contains the overrides you want to edit. -1. In panel options side pane, scroll down until you see the overrides. -1. Locate the override that you want to change. -1. Perform any of the following: +1. Navigate to the panel to which you want to add the data link. +1. Hover over any part of the panel to display the menu icon in the upper-right corner. +1. Click the menu icon and select **Edit** to open the panel editor. +1. In the panel editor pane, click the **Overrides** tab. +1. Locate the override you want to change. +1. Perform any of the following tasks: - Edit settings on existing overrides or field selection parameters. - Delete existing override properties by clicking the **X** next to the property. - - Add an override properties by clicking **Add override property**. + - Delete an override entirely by clicking the trash icon at the top-right corner. + +The changes you make take effect immediately. + +{{% docs/reference %}} +[bar chart]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/bar-chart" +[bar chart]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/bar-chart" + +[bar gauge]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/bar-gauge" +[bar gauge]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/bar-gauge" + +[candlestick]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/candlestick" +[candlestick]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/candlestick" + +[canvas]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/canvas" +[canvas]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/canvas" + +[gauge]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/gauge" +[gauge]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/gauge" + +[geomap]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/geomap" +[geomap]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/geomap" + +[heatmap]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/heatmap" +[heatmap]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/heatmap" + +[histogram]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/histogram" +[histogram]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/histogram" + +[pie chart]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/pie-chart" +[pie chart]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/pie-chart" + +[stat]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/stat" +[stat]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/stat" + +[state timeline]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/state-timeline" +[state timeline]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/state-timeline" + +[status history]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/status-history" +[status history]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/status-history" + +[table]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/table" +[table]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/table" + +[time series]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/time-series" +[time series]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series" + +[trend]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/trend" +[trend]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/trend" + +[Rename by regex transformation]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/transform-data#rename-by-regex" +[Rename by regex transformation]: "/docs/grafana-cloud -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/transform-data#rename-by-regex" +{{% /docs/reference %}}