-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Docs : Improve Bar Chart "Color by Field" option documentation #46866
Comments
Thanks for creating this issue, @filipstamenkovic-sifive I was able to reproduce your issue using your steps and Postgres: |
you also need to set up value mappings in a field override for |
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? |
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 |
Here are the docs for Grafana's Value Mapping feature see this for examples: and this is great: |
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 ? |
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:
and there is a color mapping override set on the Status field:
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": ""
} |
At first.. thanks for responding.. really appreciate it.. but this does not solve the issue.. my input MachineName, Minutes I cannot use value mapping.. not I can use the solution above.. any ideas ? |
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": ""
} |
@leeoniya quite late to this, but having functionality to dynamically assign random colours based on distinct values in a column would be extremely useful |
EXTREME agree with this; the old graph visualization (now named "Graph (old)") would do this by default. I miss it. 😭 |
+1 |
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:
Create a table by running the following SQL command:
create table grafana_example (production_year VARCHAR(256), car_model VARCHAR(256), cars_produced INT);
Insert example values into the table:
Create a panel, and select a Bar Chart as the Visualization
Enter the following SQL query:
year_and_model
as the X-axis value.production_year
as the "Color by Field" value.Anything else we need to know?:
Environment:
The text was updated successfully, but these errors were encountered: