Docs : Improve Bar Chart "Color by Field" option documentation

[filipstamenkovic-sifive]

What happened:

I tried using the Bar Chart "Color by Field" option to select a column by which bars should be colored. I selected a column that contains a few different values over the rows in the dataset. However, all bars were colored in one color. Here is an example visualized:

Here is the SQL query, and the "Query Inspector" "Data" tab:

select production_year, CONCAT(production_year, ' ', car_model) as year_and_model, cars_produced from grafana_example

I picked the "production_year" field for the "Color by field" option.

What you expected to happen:

I expected the Bar Chart to show three different colors for each of the years in the dataset (2018, 2019, 2020).

How to reproduce it (as minimally and precisely as possible):

Assuming there is a SQL Data Source set up with the Grafana instance:

1. Create a table by running the following SQL command:
   create table grafana_example (production_year VARCHAR(256), car_model VARCHAR(256), cars_produced INT);

2. Insert example values into the table:

insert into grafana_example (production_year, car_model, cars_produced)
values
     ('2018', 'Audi A3', 10000),
     ('2019', 'Audi A3', 11000),
     ('2020', 'Audi A3', 12000),
     ('2018', 'VW Golf', 7000),
     ('2019', 'VW Golf', 9000),
     ('2020', 'VW Golf', 9500)

3. Create a panel, and select a Bar Chart as the Visualization

4. Enter the following SQL query:

select
  production_year,
  CONCAT(production_year, ' ', car_model) as year_and_model,
  cars_produced
from grafana_example

5. Select year_and_model as the X-axis value.
6. Select production_year as the "Color by Field" value.

Anything else we need to know?:

Environment:

• Grafana version: 8.4.3. (b7d2911)
• Data source type & version: MariaDB (MySQL), 10.3.28-MariaDB MariaDB Server
• OS Grafana is installed on: Ubuntu/Redhat. Happy to go find this information if necessary.
• User OS & Browser: MacOS BigSur 11.6
• Grafana plugins:
• Others:

[zuchka]

Thanks for creating this issue, @filipstamenkovic-sifive

I was able to reproduce your issue using your steps and Postgres:

[leeoniya]

you also need to set up value mappings in a field override for production_year and specify the colors you want for 2018,2019,2020,etc

[zuchka]

thanks @leeoniya! I got this working @filipstamenkovic-sifive. Hopefully you can now too:

I don't think the Color by field is documented yet. @achatterjee-grafana any thoughts?

[rmillerkirk]

zuchka can you help me with the proper syntax for a value mapping? I am trying to create a bar chart with different colors for each bar as in the above example. My data source is a simple CSV file. I do not undrstand the syntax you used "^(2020).* for example
rmillerkirk

[zuchka]

Here are the docs for Grafana's Value Mapping feature

see this for examples:

https://community.grafana.com/t/how-to-rename-values-in-grafana-using-regex-based-value-mapping/53616/4

and this is great:

https://regex101.com

[kbitra]

Question - This seems to be a very static solution.. unless I'm reading it wrong.. .. you need to know the values to do value mapping.. if the number of bars are dynamic how to achieve this ?

[leeoniya]

if the number of bars are dynamic how to achieve this ?

each bar would have a discrete value with it in a dedicated field (Color by field -> Status) that will be mapped to a specific color. you can try it with the dashboard below that uses this example dataset:

Job,        Duration,  Status
Stockholm,  10,        pass
New York,   19,        fail
London,      8,        pass
Negative,   15,        fail
Long value,  7,        pending

and there is a color mapping override set on the Status field:

pass    -> green
fail    -> red
pending -> orange

the amount of colors and value mappings must be finite, but the number of bars can be variable.

color-by-field.json

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "target": {
          "limit": 100,
          "matchAny": false,
          "tags": [],
          "type": "dashboard"
        },
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 328,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "testdata",
        "uid": "PD8C576611E62080A"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "axisCenteredZero": false,
            "axisColorMode": "text",
            "axisLabel": "",
            "axisPlacement": "auto",
            "fillOpacity": 80,
            "gradientMode": "none",
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "viz": false
            },
            "lineWidth": 1,
            "scaleDistribution": {
              "type": "linear"
            }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": [
          {
            "matcher": {
              "id": "byName",
              "options": "Status"
            },
            "properties": [
              {
                "id": "mappings",
                "value": [
                  {
                    "options": {
                      "fail": {
                        "color": "red",
                        "index": 1
                      },
                      "pass": {
                        "color": "green",
                        "index": 0
                      },
                      "pending": {
                        "color": "orange",
                        "index": 2
                      }
                    },
                    "type": "value"
                  }
                ]
              }
            ]
          }
        ]
      },
      "gridPos": {
        "h": 18,
        "w": 24,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "options": {
        "barRadius": 0,
        "barWidth": 0.97,
        "colorByField": "Status",
        "groupWidth": 0.7,
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom",
          "showLegend": true
        },
        "orientation": "auto",
        "showValue": "auto",
        "stacking": "none",
        "tooltip": {
          "mode": "single",
          "sort": "none"
        },
        "xTickLabelRotation": 0,
        "xTickLabelSpacing": 0
      },
      "targets": [
        {
          "csvContent": "Job,        Duration,  Status\nStockholm,  10,        pass\nNew York,   19,        fail\nLondon,      8,        pass\nNegative,   15,        fail\nLong value,  7,        pending",
          "datasource": {
            "type": "testdata",
            "uid": "PD8C576611E62080A"
          },
          "refId": "A",
          "scenarioId": "csv_content"
        }
      ],
      "title": "Panel Title",
      "type": "barchart"
    }
  ],
  "schemaVersion": 37,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "color-by-field",
  "uid": "lSNRe9i4k",
  "version": 1,
  "weekStart": ""
}

[kbitra]

At first.. thanks for responding.. really appreciate it.. but this does not solve the issue.. my input

MachineName, Minutes
MachineA , 300
MachineB , 200
Machine C, 100
and machines can come and go..

I cannot use value mapping.. not I can use the solution above.. any ideas ?

[leeoniya]

i don't understand what you're trying to do. color by MachineName without having a full list of machines to map colors to? do you want the colors to be different per machine but random (without explicit color mappings)?

here's color mapping by Job from my previous example:

color-by-field.json

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "target": {
          "limit": 100,
          "matchAny": false,
          "tags": [],
          "type": "dashboard"
        },
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 328,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "testdata",
        "uid": "PD8C576611E62080A"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "axisCenteredZero": false,
            "axisColorMode": "text",
            "axisLabel": "",
            "axisPlacement": "auto",
            "fillOpacity": 80,
            "gradientMode": "none",
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "viz": false
            },
            "lineWidth": 1,
            "scaleDistribution": {
              "type": "linear"
            }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": [
          {
            "matcher": {
              "id": "byName",
              "options": "Job"
            },
            "properties": [
              {
                "id": "mappings",
                "value": [
                  {
                    "options": {
                      "London": {
                        "color": "orange",
                        "index": 2
                      },
                      "New York": {
                        "color": "red",
                        "index": 1
                      },
                      "Stockholm": {
                        "color": "purple",
                        "index": 0
                      }
                    },
                    "type": "value"
                  }
                ]
              }
            ]
          }
        ]
      },
      "gridPos": {
        "h": 18,
        "w": 24,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "options": {
        "barRadius": 0,
        "barWidth": 0.97,
        "colorByField": "Job",
        "groupWidth": 0.7,
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom",
          "showLegend": true
        },
        "orientation": "auto",
        "showValue": "auto",
        "stacking": "none",
        "tooltip": {
          "mode": "single",
          "sort": "none"
        },
        "xTickLabelRotation": 0,
        "xTickLabelSpacing": 0
      },
      "targets": [
        {
          "csvContent": "Job,        Duration,  Status\nStockholm,  10,        pass\nNew York,   19,        fail\nLondon,      8,        pass\nNegative,   15,        fail\nLong value,  7,        pending",
          "datasource": {
            "type": "testdata",
            "uid": "PD8C576611E62080A"
          },
          "refId": "A",
          "scenarioId": "csv_content"
        }
      ],
      "title": "Panel Title",
      "type": "barchart"
    }
  ],
  "schemaVersion": 37,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "color-by-field",
  "uid": "lSNRe9i4k",
  "version": 1,
  "weekStart": ""
}

[awdavidson]

@leeoniya quite late to this, but having functionality to dynamically assign random colours based on distinct values in a column would be extremely useful

[delfuego]

EXTREME agree with this; the old graph visualization (now named "Graph (old)") would do this by default. I miss it. 😭

[HannesArni]

+1