11.0.0-preview - Graph (old) to Bar chart - differences

What happened?

Bars with colour are without colour in Bar chart.

Using this: pve_disk_size_bytes{instance="$instance", id=~"storage/.+"} * on (id, instance) group_left(node, storage) pve_storage_info{storage=~"$storage", node="$host"}

I think, I can't split this into multiple querys. Therefore I can't use this tip: https://community.grafana.com/t/how-to-get-different-colour-for-each-legend-in-a-bar-chart/82751/6

What did you expect to happen?

Same behaviour as before.

Did this work before?

It occurs the first time because Graph (old) changes to Bar chart because there is no AngularJS inside Grafana 11.

How do we reproduce it?

Use Grafana 10.3.4
Migrate to Grafana 11.0.0-preview

Is the bug inside a dashboard panel?

Key	Value
Panel	graph @ 10.3.4
Grafana	10.3.4 (5bde27379c62c22183dd5e9deb7e66d90fada639) // Open Source

Panel debug snapshot dashboard

```json { "panels": [ { "datasource": { "type": "grafana", "uid": "grafana" }, "aliasColors": {}, "bars": true, "dashLength": 10, "fieldConfig": { "defaults": { "unitScale": true, "links": [] }, "overrides": [] }, "fill": 1, "gridPos": { "h": 13, "w": 15, "x": 0, "y": 0 }, "id": 2, "legend": { "alignAsTable": true, "avg": false, "current": false, "max": false, "min": false, "rightSide": true, "show": false, "total": false, "values": false }, "linewidth": 1, "links": [], "nullPointMode": "null", "options": { "alertThreshold": true }, "pluginVersion": "10.3.4", "pointradius": 2, "renderer": "flot", "seriesOverrides": [], "spaceLength": 10, "targets": [ { "refId": "A", "datasource": { "type": "grafana", "uid": "grafana" }, "queryType": "snapshot", "snapshot": [ { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "executedQueryString": "Expr: pve_disk_size_bytes{instance=\"px209:9221\", id=~\"storage/.+\"} * on (id, instance) group_left(node, storage) pve_storage_info{storage=~\".*\", node=\"rn2wfcsv020\"}\nStep: 15s", "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/local-zfs", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "local-zfs" }, "config": { "displayNameFromDS": "rn2wfcsv020 - local-zfs" } } ] }, "data": { "values": [ [ 1713187617097 ], [ 6177439358976 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/local", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "local" }, "config": { "displayNameFromDS": "rn2wfcsv020 - local" } } ] }, "data": { "values": [ [ 1713187617097 ], [ 2998037381120 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/shared-nfs", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "shared-nfs" }, "config": { "displayNameFromDS": "rn2wfcsv020 - shared-nfs" } } ] }, "data": { "values": [ [ 1713187617097 ], [ 3245492666368 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/px232-interim1-backup", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "px232-interim1-backup" }, "config": { "displayNameFromDS": "rn2wfcsv020 - px232-interim1-backup" } } ] }, "data": { "values": [ [ 1713187617097 ], [ 3708510076928 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/px236-interim2-backup", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "px236-interim2-backup" }, "config": { "displayNameFromDS": "rn2wfcsv020 - px236-interim2-backup" } } ] }, "data": { "values": [ [ 1713187617097 ], [ 5112160690176 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/rn2wfcsv018-backup", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "rn2wfcsv018-backup" }, "config": { "displayNameFromDS": "rn2wfcsv020 - rn2wfcsv018-backup" } } ] }, "data": { "values": [ [ 1713187617097 ], [ 11790151950336 ] ] } } ] } ], "thresholds": [], "timeRegions": [], "title": "Reproduced with embedded data", "tooltip": { "shared": false, "sort": 0, "value_type": "individual" }, "type": "graph", "xaxis": { "mode": "series", "show": true, "values": [ "current" ], "name": null, "buckets": null }, "yaxes": [ { "$$hashKey": "object:1431", "decimals": 1, "format": "bytes", "label": "", "logBase": 1, "show": true }, { "$$hashKey": "object:1432", "format": "short", "logBase": 1, "show": true } ], "yaxis": { "align": false }, "dashes": false, "description": "", "fillGradient": 0, "hiddenSeries": false, "lines": false, "percentage": false, "points": false, "stack": false, "steppedLine": false, "timeFrom": null, "timeShift": null }, { "gridPos": { "h": 7, "w": 9, "x": 15, "y": 0 }, "id": 5, "options": { "content": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Panel	graph @ 10.3.4
Queries	A[prometheus]
Data	6 frames, 12 fields, 6 rows
Grafana	10.3.4 (5bde27379c62c22183dd5e9deb7e66d90fada639) // Open Source

", "mode": "html" }, "title": "Debug info", "type": "text" }, { "id": 6, "title": "Original Panel JSON", "type": "text", "gridPos": { "h": 13, "w": 9, "x": 15, "y": 7 }, "options": { "content": "{\n \"datasource\": {\n \"type\": \"prometheus\",\n \"uid\": \"000000005\"\n },\n \"aliasColors\": {},\n \"bars\": true,\n \"dashLength\": 10,\n \"fieldConfig\": {\n \"defaults\": {\n \"unitScale\": true,\n \"links\": []\n },\n \"overrides\": []\n },\n \"fill\": 1,\n \"gridPos\": {\n \"h\": 14,\n \"w\": 24,\n \"x\": 0,\n \"y\": 56\n },\n \"id\": 19,\n \"legend\": {\n \"alignAsTable\": true,\n \"avg\": false,\n \"current\": false,\n \"max\": false,\n \"min\": false,\n \"rightSide\": true,\n \"show\": false,\n \"total\": false,\n \"values\": false\n },\n \"linewidth\": 1,\n \"links\": [],\n \"nullPointMode\": \"null\",\n \"options\": {\n \"alertThreshold\": true\n },\n \"pluginVersion\": \"10.3.4\",\n \"pointradius\": 2,\n \"renderer\": \"flot\",\n \"seriesOverrides\": [],\n \"spaceLength\": 10,\n \"targets\": [\n {\n \"datasource\": {\n \"type\": \"prometheus\",\n \"uid\": \"000000005\"\n },\n \"exemplar\": true,\n \"expr\": \"pve_disk_size_bytes{instance=\\\"$instance\\\", id=~\\\"storage/.+\\\"} * on (id, instance) group_left(node, storage) pve_storage_info{storage=~\\\"$storage\\\", node=\\\"$host\\\"}\",\n \"format\": \"time_series\",\n \"instant\": true,\n \"interval\": \"\",\n \"intervalFactor\": 1,\n \"legendFormat\": \"{{node}} - {{storage}}\",\n \"refId\": \"A\"\n }\n ],\n \"thresholds\": [],\n \"timeRegions\": [],\n \"title\": \"Storage Space Allocation $storage\",\n \"tooltip\": {\n \"shared\": false,\n \"sort\": 0,\n \"value_type\": \"individual\"\n },\n \"type\": \"graph\",\n \"xaxis\": {\n \"mode\": \"series\",\n \"show\": true,\n \"values\": [\n \"current\"\n ],\n \"name\": null,\n \"buckets\": null\n },\n \"yaxes\": [\n {\n \"$$hashKey\": \"object:1431\",\n \"decimals\": 1,\n \"format\": \"bytes\",\n \"label\": \"\",\n \"logBase\": 1,\n \"show\": true\n },\n {\n \"$$hashKey\": \"object:1432\",\n \"format\": \"short\",\n \"logBase\": 1,\n \"show\": true\n }\n ],\n \"yaxis\": {\n \"align\": false\n },\n \"dashes\": false,\n \"description\": \"\",\n \"fillGradient\": 0,\n \"hiddenSeries\": false,\n \"lines\": false,\n \"percentage\": false,\n \"points\": false,\n \"stack\": false,\n \"steppedLine\": false,\n \"timeFrom\": null,\n \"timeShift\": null\n}", "mode": "code", "code": { "language": "json", "showLineNumbers": true, "showMiniMap": true } } }, { "id": 3, "title": "Data from panel above", "type": "table", "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "gridPos": { "h": 7, "w": 15, "x": 0, "y": 13 }, "options": { "showTypeIcons": true }, "targets": [ { "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "panelId": 2, "withTransforms": true, "refId": "A" } ] } ], "schemaVersion": 37, "title": "Debug: Storage Space Allocation $storage // 2024-04-15 15:27:20", "tags": [ "debug", "debug-graph" ], "time": { "from": "2024-04-15T07:27:20.113Z", "to": "2024-04-15T13:27:20.113Z" } } ```

Key	Value
Panel	barchart @ 8.2.3
Grafana	Grafana v11.0.0-preview (ead392f6cb) // Open Source

Panel debug snapshot dashboard

```json { "panels": [ { "datasource": { "type": "grafana", "uid": "grafana" }, "fieldConfig": { "defaults": { "custom": { "lineWidth": 1, "fillOpacity": 80, "gradientMode": "none", "axisPlacement": "auto", "axisLabel": "", "axisColorMode": "text", "axisBorderShow": false, "scaleDistribution": { "type": "linear" }, "axisCenteredZero": false, "hideFrom": { "tooltip": false, "viz": false, "legend": false }, "thresholdsStyle": { "mode": "off" } }, "color": { "mode": "palette-classic" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "value": null, "color": "green" }, { "value": 80, "color": "red" } ] }, "links": [] }, "overrides": [] }, "gridPos": { "h": 13, "w": 15, "x": 0, "y": 0 }, "id": 2, "pluginVersion": "8.2.3", "targets": [ { "refId": "A", "datasource": { "type": "grafana", "uid": "grafana" }, "queryType": "snapshot", "snapshot": [ { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "executedQueryString": "Expr: pve_disk_size_bytes{instance=\"px209:9221\", id=~\"storage/.+\"} * on (id, instance) group_left(node, storage) pve_storage_info{storage=~\".*\", node=\"rn2wfcsv020\"}\nStep: 15s", "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/local-zfs", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "local-zfs" }, "config": { "displayNameFromDS": "rn2wfcsv020 - local-zfs" } } ] }, "data": { "values": [ [ 1713187011223 ], [ 6177438453760 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/shared-nfs", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "shared-nfs" }, "config": { "displayNameFromDS": "rn2wfcsv020 - shared-nfs" } } ] }, "data": { "values": [ [ 1713187011223 ], [ 3245492666368 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/local", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "local" }, "config": { "displayNameFromDS": "rn2wfcsv020 - local" } } ] }, "data": { "values": [ [ 1713187011223 ], [ 2997884944384 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/px232-interim1-backup", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "px232-interim1-backup" }, "config": { "displayNameFromDS": "rn2wfcsv020 - px232-interim1-backup" } } ] }, "data": { "values": [ [ 1713187011223 ], [ 3708510076928 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/px236-interim2-backup", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "px236-interim2-backup" }, "config": { "displayNameFromDS": "rn2wfcsv020 - px236-interim2-backup" } } ] }, "data": { "values": [ [ 1713187011223 ], [ 5112160690176 ] ] } }, { "schema": { "refId": "A", "meta": { "type": "numeric-multi", "typeVersion": [ 0, 1 ], "custom": { "resultType": "vector" }, "preferredVisualisationType": "graph" }, "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time" }, "config": { "interval": 15000 } }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64" }, "labels": { "id": "storage/rn2wfcsv020/rn2wfcsv018-backup", "instance": "px209:9221", "job": "pve_exporter", "node": "rn2wfcsv020", "storage": "rn2wfcsv018-backup" }, "config": { "displayNameFromDS": "rn2wfcsv020 - rn2wfcsv018-backup" } } ] }, "data": { "values": [ [ 1713187011223 ], [ 11790151950336 ] ] } } ] } ], "title": "Reproduced with embedded data", "type": "barchart", "transformations": [ { "id": "reduce", "options": { "reducers": [ "current" ] } } ], "options": { "orientation": "auto", "xTickLabelRotation": 0, "xTickLabelSpacing": 0, "showValue": "auto", "stacking": "none", "groupWidth": 0.7, "barWidth": 0.97, "barRadius": 0, "fullHighlight": false, "tooltip": { "mode": "single", "sort": "none", "maxHeight": 600 }, "legend": { "showLegend": true, "displayMode": "list", "placement": "bottom", "calcs": [] } }, "description": "" }, { "gridPos": { "h": 7, "w": 9, "x": 15, "y": 0 }, "id": 5, "options": { "content": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Panel	barchart @ 8.2.3
Queries	A[prometheus]
Transform	reduce
Data	6 frames, 12 fields, 6 rows
Grafana	Grafana v11.0.0-preview (ead392f6cb) // Open Source

", "mode": "html" }, "title": "Debug info", "type": "text" }, { "id": 6, "title": "Original Panel JSON", "type": "text", "gridPos": { "h": 13, "w": 9, "x": 15, "y": 7 }, "options": { "content": "{\n \"datasource\": {\n \"uid\": \"000000005\",\n \"type\": \"prometheus\"\n },\n \"fieldConfig\": {\n \"defaults\": {\n \"custom\": {\n \"lineWidth\": 1,\n \"fillOpacity\": 80,\n \"gradientMode\": \"none\",\n \"axisPlacement\": \"auto\",\n \"axisLabel\": \"\",\n \"axisColorMode\": \"text\",\n \"axisBorderShow\": false,\n \"scaleDistribution\": {\n \"type\": \"linear\"\n },\n \"axisCenteredZero\": false,\n \"hideFrom\": {\n \"tooltip\": false,\n \"viz\": false,\n \"legend\": false\n },\n \"thresholdsStyle\": {\n \"mode\": \"off\"\n }\n },\n \"color\": {\n \"mode\": \"palette-classic\"\n },\n \"mappings\": [],\n \"thresholds\": {\n \"mode\": \"absolute\",\n \"steps\": [\n {\n \"value\": null,\n \"color\": \"green\"\n },\n {\n \"value\": 80,\n \"color\": \"red\"\n }\n ]\n },\n \"links\": []\n },\n \"overrides\": []\n },\n \"gridPos\": {\n \"h\": 14,\n \"w\": 24,\n \"x\": 0,\n \"y\": 56\n },\n \"id\": 19,\n \"pluginVersion\": \"8.2.3\",\n \"targets\": [\n {\n \"datasource\": {\n \"type\": \"prometheus\",\n \"uid\": \"000000005\"\n },\n \"exemplar\": true,\n \"expr\": \"pve_disk_size_bytes{instance=\\\"$instance\\\", id=~\\\"storage/.+\\\"} * on (id, instance) group_left(node, storage) pve_storage_info{storage=~\\\"$storage\\\", node=\\\"$host\\\"}\",\n \"format\": \"time_series\",\n \"instant\": true,\n \"interval\": \"\",\n \"intervalFactor\": 1,\n \"legendFormat\": \"{{node}} - {{storage}}\",\n \"refId\": \"A\",\n \"editorMode\": \"code\"\n }\n ],\n \"title\": \"Storage Space Allocation $storage\",\n \"type\": \"barchart\",\n \"transformations\": [\n {\n \"id\": \"reduce\",\n \"options\": {\n \"reducers\": [\n \"current\"\n ]\n }\n }\n ],\n \"options\": {\n \"orientation\": \"auto\",\n \"xTickLabelRotation\": 0,\n \"xTickLabelSpacing\": 0,\n \"showValue\": \"auto\",\n \"stacking\": \"none\",\n \"groupWidth\": 0.7,\n \"barWidth\": 0.97,\n \"barRadius\": 0,\n \"fullHighlight\": false,\n \"tooltip\": {\n \"mode\": \"single\",\n \"sort\": \"none\",\n \"maxHeight\": 600\n },\n \"legend\": {\n \"showLegend\": true,\n \"displayMode\": \"list\",\n \"placement\": \"bottom\",\n \"calcs\": []\n }\n },\n \"description\": \"\"\n}", "mode": "code", "code": { "language": "json", "showLineNumbers": true, "showMiniMap": true } } }, { "id": 3, "title": "Data from panel above (after transformations)", "type": "table", "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "gridPos": { "h": 7, "w": 15, "x": 0, "y": 13 }, "options": { "showTypeIcons": true }, "targets": [ { "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "panelId": 2, "withTransforms": true, "refId": "A" } ] }, { "id": 100, "title": "Data (before transformations)", "type": "table", "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "gridPos": { "h": 7, "w": 24, "x": 0, "y": 13 }, "options": { "showTypeIcons": true }, "targets": [ { "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "panelId": 2, "withTransforms": false, "refId": "A" } ] } ], "schemaVersion": 37, "title": "Debug: Storage Space Allocation $storage // 2024-04-15 15:25:00", "tags": [ "debug", "debug-barchart" ], "time": { "from": "2024-04-15T07:25:00.217Z", "to": "2024-04-15T13:25:00.217Z" } } ```

Environment (with versions)?

Grafana: 11.0.0-preview OS: Docker Browser: Chrome

Grafana platform?

Docker

Datasource(s)?

No response

grafana / grafana