diff --git a/devenv/dev-dashboards/panel-barchart/barchart-tooltips-legends.json b/devenv/dev-dashboards/panel-barchart/barchart-tooltips-legends.json
new file mode 100644
index 00000000000..70deb1af0df
--- /dev/null
+++ b/devenv/dev-dashboards/panel-barchart/barchart-tooltips-legends.json
@@ -0,0 +1,911 @@
+{
+ "annotations": {
+ "list": [
+ {
+ "builtIn": 1,
+ "datasource": {
+ "type": "grafana",
+ "uid": "-- Grafana --"
+ },
+ "enable": true,
+ "hide": true,
+ "iconColor": "rgba(0, 211, 255, 1)",
+ "name": "Annotations & Alerts",
+ "type": "dashboard"
+ }
+ ]
+ },
+ "editable": true,
+ "fiscalYearStartMonth": 0,
+ "graphTooltip": 0,
+ "links": [],
+ "liveNow": false,
+ "panels": [
+ {
+ "collapsed": false,
+ "gridPos": {
+ "h": 1,
+ "w": 24,
+ "x": 0,
+ "y": 0
+ },
+ "id": 4,
+ "panels": [],
+ "title": "Field Override - Data Links",
+ "type": "row"
+ },
+ {
+ "datasource": {},
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "palette-classic"
+ },
+ "custom": {
+ "axisBorderShow": false,
+ "axisCenteredZero": false,
+ "axisColorMode": "text",
+ "axisLabel": "",
+ "axisPlacement": "auto",
+ "fillOpacity": 80,
+ "gradientMode": "none",
+ "hideFrom": {
+ "legend": false,
+ "tooltip": false,
+ "viz": false
+ },
+ "lineWidth": 1,
+ "scaleDistribution": {
+ "type": "linear"
+ },
+ "thresholdsStyle": {
+ "mode": "off"
+ }
+ },
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": [
+ {
+ "matcher": {
+ "id": "byName",
+ "options": "column1"
+ },
+ "properties": [
+ {
+ "id": "links",
+ "value": [
+ {
+ "title": "google",
+ "url": "google.com"
+ },
+ {
+ "targetBlank": true,
+ "title": "youtube",
+ "url": "youtube.com"
+ }
+ ]
+ },
+ {
+ "id": "custom.fillOpacity",
+ "value": 14
+ }
+ ]
+ },
+ {
+ "matcher": {
+ "id": "byName",
+ "options": "column2"
+ },
+ "properties": [
+ {
+ "id": "links",
+ "value": [
+ {
+ "title": "datalink column 2",
+ "url": "grafana.com"
+ }
+ ]
+ },
+ {
+ "id": "color",
+ "value": {
+ "fixedColor": "purple",
+ "mode": "shades"
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 9,
+ "x": 0,
+ "y": 1
+ },
+ "id": 1,
+ "options": {
+ "barRadius": 0,
+ "barWidth": 0.97,
+ "fullHighlight": false,
+ "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
+ },
+ "pluginVersion": "9.5.0-cloud.4.a016665c",
+ "targets": [
+ {
+ "csvContent": "id,column1,column2\r\nA,1,2",
+ "datasource": {
+ "type": "testdata",
+ "uid": "o63ntNT4z"
+ },
+ "refId": "A",
+ "scenarioId": "csv_content"
+ },
+ {
+ "csvContent": "id,column1,column2\r\nB,2,1",
+ "datasource": {
+ "type": "testdata",
+ "uid": "o63ntNT4z"
+ },
+ "hide": false,
+ "refId": "B",
+ "scenarioId": "csv_content"
+ }
+ ],
+ "title": "Tooltip mode: Single",
+ "transformations": [
+ {
+ "id": "merge",
+ "options": {}
+ }
+ ],
+ "type": "barchart"
+ },
+ {
+ "datasource": {},
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "palette-classic"
+ },
+ "custom": {
+ "axisBorderShow": false,
+ "axisCenteredZero": false,
+ "axisColorMode": "text",
+ "axisLabel": "",
+ "axisPlacement": "auto",
+ "fillOpacity": 80,
+ "gradientMode": "none",
+ "hideFrom": {
+ "legend": false,
+ "tooltip": false,
+ "viz": false
+ },
+ "lineWidth": 1,
+ "scaleDistribution": {
+ "type": "linear"
+ },
+ "thresholdsStyle": {
+ "mode": "off"
+ }
+ },
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": [
+ {
+ "matcher": {
+ "id": "byName",
+ "options": "column1"
+ },
+ "properties": [
+ {
+ "id": "links",
+ "value": [
+ {
+ "title": "google",
+ "url": "google.com"
+ },
+ {
+ "targetBlank": true,
+ "title": "youtube",
+ "url": "youtube.com"
+ }
+ ]
+ },
+ {
+ "id": "custom.fillOpacity",
+ "value": 14
+ }
+ ]
+ },
+ {
+ "matcher": {
+ "id": "byName",
+ "options": "column2"
+ },
+ "properties": [
+ {
+ "id": "links",
+ "value": [
+ {
+ "title": "datalink column 2",
+ "url": "grafana.com"
+ }
+ ]
+ },
+ {
+ "id": "color",
+ "value": {
+ "fixedColor": "purple",
+ "mode": "shades"
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 9,
+ "x": 9,
+ "y": 1
+ },
+ "id": 6,
+ "options": {
+ "barRadius": 0,
+ "barWidth": 0.97,
+ "fullHighlight": false,
+ "groupWidth": 0.7,
+ "legend": {
+ "calcs": [],
+ "displayMode": "list",
+ "placement": "bottom",
+ "showLegend": true
+ },
+ "orientation": "auto",
+ "showValue": "auto",
+ "stacking": "none",
+ "tooltip": {
+ "mode": "multi",
+ "sort": "none"
+ },
+ "xTickLabelRotation": 0,
+ "xTickLabelSpacing": 0
+ },
+ "pluginVersion": "9.5.0-cloud.4.a016665c",
+ "targets": [
+ {
+ "csvContent": "id,column1,column2\r\nA,1,2",
+ "datasource": {
+ "type": "testdata",
+ "uid": "o63ntNT4z"
+ },
+ "refId": "A",
+ "scenarioId": "csv_content"
+ },
+ {
+ "csvContent": "id,column1,column2\r\nB,2,1",
+ "datasource": {
+ "type": "testdata",
+ "uid": "o63ntNT4z"
+ },
+ "hide": false,
+ "refId": "B",
+ "scenarioId": "csv_content"
+ }
+ ],
+ "title": "Tooltip mode: All",
+ "transformations": [
+ {
+ "id": "merge",
+ "options": {}
+ }
+ ],
+ "type": "barchart"
+ },
+ {
+ "collapsed": false,
+ "gridPos": {
+ "h": 1,
+ "w": 24,
+ "x": 0,
+ "y": 7
+ },
+ "id": 3,
+ "panels": [],
+ "title": "Field Override - Hide Tooltip",
+ "type": "row"
+ },
+ {
+ "datasource": {
+ "type": "testdata",
+ "uid": "PD8C576611E62080A"
+ },
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "palette-classic"
+ },
+ "custom": {
+ "axisBorderShow": false,
+ "axisCenteredZero": false,
+ "axisColorMode": "text",
+ "axisLabel": "",
+ "axisPlacement": "auto",
+ "fillOpacity": 80,
+ "gradientMode": "none",
+ "hideFrom": {
+ "legend": false,
+ "tooltip": false,
+ "viz": false
+ },
+ "lineWidth": 1,
+ "scaleDistribution": {
+ "type": "linear"
+ },
+ "thresholdsStyle": {
+ "mode": "off"
+ }
+ },
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": [
+ {
+ "matcher": {
+ "id": "byName",
+ "options": "field 3"
+ },
+ "properties": [
+ {
+ "id": "custom.hideFrom",
+ "value": {
+ "legend": false,
+ "tooltip": true,
+ "viz": false
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 9,
+ "x": 0,
+ "y": 8
+ },
+ "id": 5,
+ "options": {
+ "barRadius": 0,
+ "barWidth": 0.97,
+ "fullHighlight": false,
+ "groupWidth": 0.7,
+ "legend": {
+ "calcs": [],
+ "displayMode": "list",
+ "placement": "bottom",
+ "showLegend": true
+ },
+ "orientation": "auto",
+ "showValue": "auto",
+ "stacking": "none",
+ "tooltip": {
+ "mode": "multi",
+ "sort": "none"
+ },
+ "xTickLabelRotation": 0,
+ "xTickLabelSpacing": 0
+ },
+ "targets": [
+ {
+ "csvContent": "id, field 1, field 2, field 3\na, 20, 30, 40\nb, 40, 50, 60",
+ "datasource": {
+ "type": "testdata",
+ "uid": "PD8C576611E62080A"
+ },
+ "refId": "A",
+ "scenarioId": "csv_content"
+ }
+ ],
+ "title": "Hide 'field 3'",
+ "type": "barchart"
+ },
+ {
+ "datasource": {
+ "type": "testdata",
+ "uid": "PD8C576611E62080A"
+ },
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "palette-classic"
+ },
+ "custom": {
+ "axisBorderShow": false,
+ "axisCenteredZero": false,
+ "axisColorMode": "text",
+ "axisLabel": "",
+ "axisPlacement": "auto",
+ "fillOpacity": 80,
+ "gradientMode": "none",
+ "hideFrom": {
+ "legend": false,
+ "tooltip": false,
+ "viz": false
+ },
+ "lineWidth": 1,
+ "scaleDistribution": {
+ "type": "linear"
+ },
+ "thresholdsStyle": {
+ "mode": "off"
+ }
+ },
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": [
+ {
+ "matcher": {
+ "id": "byName",
+ "options": "id"
+ },
+ "properties": [
+ {
+ "id": "custom.hideFrom",
+ "value": {
+ "legend": false,
+ "tooltip": true,
+ "viz": false
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 9,
+ "x": 9,
+ "y": 8
+ },
+ "id": 7,
+ "options": {
+ "barRadius": 0,
+ "barWidth": 0.97,
+ "fullHighlight": false,
+ "groupWidth": 0.7,
+ "legend": {
+ "calcs": [],
+ "displayMode": "list",
+ "placement": "bottom",
+ "showLegend": true
+ },
+ "orientation": "auto",
+ "showValue": "auto",
+ "stacking": "none",
+ "tooltip": {
+ "mode": "multi",
+ "sort": "none"
+ },
+ "xTickLabelRotation": 0,
+ "xTickLabelSpacing": 0
+ },
+ "targets": [
+ {
+ "csvContent": "id, field 1, field 2, field 3\na, 20, 30, 40\nb, 40, 50, 60",
+ "datasource": {
+ "type": "testdata",
+ "uid": "PD8C576611E62080A"
+ },
+ "refId": "A",
+ "scenarioId": "csv_content"
+ }
+ ],
+ "title": "Hide 'id'",
+ "type": "barchart"
+ },
+ {
+ "collapsed": false,
+ "gridPos": {
+ "h": 1,
+ "w": 24,
+ "x": 0,
+ "y": 14
+ },
+ "id": 8,
+ "panels": [],
+ "title": "Legends - Stacking 100%",
+ "type": "row"
+ },
+ {
+ "datasource": {
+ "type": "grafana-testdata-datasource",
+ "uid": "PD8C576611E62080A"
+ },
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "fixed"
+ },
+ "custom": {
+ "axisBorderShow": false,
+ "axisCenteredZero": false,
+ "axisColorMode": "text",
+ "axisLabel": "",
+ "axisPlacement": "auto",
+ "fillOpacity": 80,
+ "gradientMode": "none",
+ "hideFrom": {
+ "legend": false,
+ "tooltip": false,
+ "viz": false
+ },
+ "lineWidth": 1,
+ "scaleDistribution": {
+ "type": "linear"
+ },
+ "thresholdsStyle": {
+ "mode": "off"
+ }
+ },
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ },
+ "unit": "accFS2"
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 8,
+ "w": 7,
+ "x": 0,
+ "y": 15
+ },
+ "id": 9,
+ "options": {
+ "barRadius": 0,
+ "barWidth": 0.97,
+ "fullHighlight": false,
+ "groupWidth": 0.7,
+ "legend": {
+ "calcs": [
+ "min",
+ "max",
+ "mean",
+ "variance"
+ ],
+ "displayMode": "table",
+ "placement": "bottom",
+ "showLegend": true
+ },
+ "orientation": "auto",
+ "showValue": "auto",
+ "stacking": "percent",
+ "tooltip": {
+ "mode": "single",
+ "sort": "none"
+ },
+ "xTickLabelRotation": 0,
+ "xTickLabelSpacing": 0
+ },
+ "targets": [
+ {
+ "csvContent": "time, value\n100000, 10\n200000, 20\n300000, 30\n400000, 40",
+ "datasource": {
+ "type": "grafana-testdata-datasource",
+ "uid": "PD8C576611E62080A"
+ },
+ "refId": "A",
+ "scenarioId": "csv_content"
+ },
+ {
+ "csvContent": "time, value\n100000, 500\n200000, 220\n300000, 10\n400000, 550",
+ "datasource": {
+ "type": "grafana-testdata-datasource",
+ "uid": "PD8C576611E62080A"
+ },
+ "hide": false,
+ "refId": "B",
+ "scenarioId": "csv_content"
+ }
+ ],
+ "title": "Stacking 100% Correct Legend Units (no %)",
+ "type": "barchart"
+ },
+ {
+ "datasource": {
+ "type": "grafana-testdata-datasource",
+ "uid": "PD8C576611E62080A"
+ },
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "palette-classic"
+ },
+ "custom": {
+ "axisBorderShow": false,
+ "axisCenteredZero": false,
+ "axisColorMode": "text",
+ "axisLabel": "",
+ "axisPlacement": "auto",
+ "fillOpacity": 80,
+ "gradientMode": "none",
+ "hideFrom": {
+ "legend": false,
+ "tooltip": false,
+ "viz": false
+ },
+ "lineWidth": 1,
+ "scaleDistribution": {
+ "type": "linear"
+ },
+ "thresholdsStyle": {
+ "mode": "off"
+ }
+ },
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": [
+ {
+ "matcher": {
+ "id": "byName",
+ "options": "Total B"
+ },
+ "properties": [
+ {
+ "id": "color",
+ "value": {
+ "fixedColor": "red",
+ "mode": "fixed"
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "gridPos": {
+ "h": 8,
+ "w": 7,
+ "x": 7,
+ "y": 15
+ },
+ "id": 10,
+ "options": {
+ "barRadius": 0,
+ "barWidth": 0.97,
+ "fullHighlight": false,
+ "groupWidth": 0.7,
+ "legend": {
+ "calcs": [],
+ "displayMode": "list",
+ "placement": "bottom",
+ "showLegend": true
+ },
+ "orientation": "auto",
+ "showValue": "auto",
+ "stacking": "percent",
+ "tooltip": {
+ "mode": "single",
+ "sort": "none"
+ },
+ "xTickLabelRotation": 0,
+ "xTickLabelSpacing": 0
+ },
+ "targets": [
+ {
+ "datasource": {
+ "type": "grafana-testdata-datasource",
+ "uid": "PD8C576611E62080A"
+ },
+ "rawFrameContent": "[\n {\n \"fields\": [\n {\n \"name\": \"TimeGenerated\",\n \"type\": \"time\",\n \"values\": [\n 1687200000000\n ]\n },\n {\n \"name\": \"Total\",\n \"type\": \"number\",\n \"values\": [\n 200\n ],\n \"labels\": {\n \"name\": \"A\"\n }\n },\n {\n \"name\": \"Total\",\n \"type\": \"number\",\n \"values\": [\n 180\n ],\n \"labels\": {\n \"name\": \"B\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"custom\": {\n \"azureColumnTypes\": [\n \"string\",\n \"datetime\",\n \"long\"\n ]\n },\n \"type\": \"timeseries-wide\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n }\n]",
+ "refId": "A",
+ "scenarioId": "raw_frame"
+ }
+ ],
+ "title": "Stacking 100% Legend Label Color Override",
+ "type": "barchart"
+ },
+ {
+ "datasource": {
+ "type": "grafana-testdata-datasource",
+ "uid": "PD8C576611E62080A"
+ },
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "palette-classic"
+ },
+ "custom": {
+ "axisBorderShow": false,
+ "axisCenteredZero": false,
+ "axisColorMode": "text",
+ "axisLabel": "",
+ "axisPlacement": "hidden",
+ "fillOpacity": 80,
+ "gradientMode": "none",
+ "hideFrom": {
+ "legend": false,
+ "tooltip": false,
+ "viz": false
+ },
+ "lineWidth": 1,
+ "scaleDistribution": {
+ "type": "linear"
+ },
+ "thresholdsStyle": {
+ "mode": "off"
+ }
+ },
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 8,
+ "w": 10,
+ "x": 14,
+ "y": 15
+ },
+ "id": 11,
+ "options": {
+ "barRadius": 0.5,
+ "barWidth": 0.97,
+ "fullHighlight": false,
+ "groupWidth": 0.7,
+ "legend": {
+ "calcs": [],
+ "displayMode": "list",
+ "placement": "bottom",
+ "showLegend": true
+ },
+ "orientation": "horizontal",
+ "showValue": "auto",
+ "stacking": "percent",
+ "tooltip": {
+ "mode": "multi",
+ "sort": "none"
+ },
+ "xTickLabelRotation": 0,
+ "xTickLabelSpacing": 0
+ },
+ "targets": [
+ {
+ "datasource": {
+ "type": "grafana-testdata-datasource",
+ "uid": "PD8C576611E62080A"
+ },
+ "rawFrameContent": "[\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f141\"\n },\n \"values\": [\n 11834,\n 26195,\n 27496,\n 21417\n ],\n \"labels\": {\n \"nodename\": \"z141\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f131\"\n },\n \"values\": [\n 11042,\n 26646,\n 27120,\n 21508,\n 19905\n ],\n \"labels\": {\n \"nodename\": \"t131\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f121\"\n },\n \"values\": [\n 12095,\n 26718,\n 26907,\n 21483,\n 20272\n ],\n \"labels\": {\n \"nodename\": \"k121\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f111\"\n },\n \"values\": [\n 641,\n 1015,\n 791,\n 752,\n 758\n ],\n \"labels\": {\n \"nodename\": \"n111\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f102\"\n },\n \"values\": [\n 101,\n 167,\n 205,\n 181,\n 172\n ],\n \"labels\": {\n \"nodename\": \"a102\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f100\"\n },\n \"values\": [\n 89,\n 137,\n 161,\n 150,\n 161\n ],\n \"labels\": {\n \"nodename\": \"v100\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d141\"\n },\n \"values\": [\n 11616,\n 26053,\n 25586,\n 21023,\n 19787\n ],\n \"labels\": {\n \"nodename\": \"e141\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d131\"\n },\n \"values\": [\n 11682,\n 26851,\n 26985,\n 22475,\n 20852\n ],\n \"labels\": {\n \"nodename\": \"r131\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d121\"\n },\n \"values\": [\n 12108,\n 26379,\n 25734,\n 20145,\n 19310\n ],\n \"labels\": {\n \"nodename\": \"g121\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d111\"\n },\n \"values\": [\n 11254,\n 24739,\n 25406,\n 21239,\n 19426\n ],\n \"labels\": {\n \"nodename\": \"q111\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d102\"\n },\n \"values\": [\n 168,\n 264,\n 288,\n 283,\n 267\n ],\n \"labels\": {\n \"nodename\": \"d102\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n }\n]",
+ "refId": "A",
+ "scenarioId": "raw_frame"
+ }
+ ],
+ "title": "Stacking 100% unique legend field label when duplicate field names are present",
+ "type": "barchart"
+ }
+ ],
+ "refresh": "",
+ "schemaVersion": 39,
+ "tags": [
+ "gdev",
+ "panel-tests",
+ "barchart",
+ "graph-ng"
+ ],
+ "templating": {
+ "list": []
+ },
+ "time": {
+ "from": "now-6h",
+ "to": "now"
+ },
+ "timepicker": {},
+ "timezone": "",
+ "title": "Panel Tests - Bar Chart Tooltips & Legends",
+ "uid": "ea33320b-bd97-4fe1-a27c-24bc61a48b41",
+ "version": 1,
+ "weekStart": ""
+}
\ No newline at end of file
diff --git a/devenv/dev-dashboards/panel-barchart/barchart-tooltips.json b/devenv/dev-dashboards/panel-barchart/barchart-tooltips.json
deleted file mode 100644
index af7820bab35..00000000000
--- a/devenv/dev-dashboards/panel-barchart/barchart-tooltips.json
+++ /dev/null
@@ -1,593 +0,0 @@
-{
- "annotations": {
- "list": [
- {
- "builtIn": 1,
- "datasource": {
- "type": "grafana",
- "uid": "-- Grafana --"
- },
- "enable": true,
- "hide": true,
- "iconColor": "rgba(0, 211, 255, 1)",
- "name": "Annotations & Alerts",
- "type": "dashboard"
- }
- ]
- },
- "editable": true,
- "fiscalYearStartMonth": 0,
- "graphTooltip": 0,
- "id": 301,
- "links": [],
- "liveNow": false,
- "panels": [
- {
- "collapsed": false,
- "gridPos": {
- "h": 1,
- "w": 24,
- "x": 0,
- "y": 0
- },
- "id": 4,
- "panels": [],
- "title": "Field Override - Data Links",
- "type": "row"
- },
- {
- "datasource": {},
- "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"
- },
- "thresholdsStyle": {
- "mode": "off"
- }
- },
- "mappings": [],
- "thresholds": {
- "mode": "absolute",
- "steps": [
- {
- "color": "green",
- "value": null
- },
- {
- "color": "red",
- "value": 80
- }
- ]
- }
- },
- "overrides": [
- {
- "matcher": {
- "id": "byName",
- "options": "column1"
- },
- "properties": [
- {
- "id": "links",
- "value": [
- {
- "title": "google",
- "url": "google.com"
- },
- {
- "targetBlank": true,
- "title": "youtube",
- "url": "youtube.com"
- }
- ]
- },
- {
- "id": "custom.fillOpacity",
- "value": 14
- }
- ]
- },
- {
- "matcher": {
- "id": "byName",
- "options": "column2"
- },
- "properties": [
- {
- "id": "links",
- "value": [
- {
- "title": "datalink column 2",
- "url": "grafana.com"
- }
- ]
- },
- {
- "id": "color",
- "value": {
- "fixedColor": "purple",
- "mode": "shades"
- }
- }
- ]
- }
- ]
- },
- "gridPos": {
- "h": 6,
- "w": 9,
- "x": 0,
- "y": 1
- },
- "id": 1,
- "options": {
- "barRadius": 0,
- "barWidth": 0.97,
- "fullHighlight": false,
- "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
- },
- "pluginVersion": "9.5.0-cloud.4.a016665c",
- "targets": [
- {
- "csvContent": "id,column1,column2\r\nA,1,2",
- "datasource": {
- "type": "testdata",
- "uid": "o63ntNT4z"
- },
- "refId": "A",
- "scenarioId": "csv_content"
- },
- {
- "csvContent": "id,column1,column2\r\nB,2,1",
- "datasource": {
- "type": "testdata",
- "uid": "o63ntNT4z"
- },
- "hide": false,
- "refId": "B",
- "scenarioId": "csv_content"
- }
- ],
- "title": "Tooltip mode: Single",
- "transformations": [
- {
- "id": "merge",
- "options": {}
- }
- ],
- "type": "barchart"
- },
- {
- "datasource": {},
- "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"
- },
- "thresholdsStyle": {
- "mode": "off"
- }
- },
- "mappings": [],
- "thresholds": {
- "mode": "absolute",
- "steps": [
- {
- "color": "green",
- "value": null
- },
- {
- "color": "red",
- "value": 80
- }
- ]
- }
- },
- "overrides": [
- {
- "matcher": {
- "id": "byName",
- "options": "column1"
- },
- "properties": [
- {
- "id": "links",
- "value": [
- {
- "title": "google",
- "url": "google.com"
- },
- {
- "targetBlank": true,
- "title": "youtube",
- "url": "youtube.com"
- }
- ]
- },
- {
- "id": "custom.fillOpacity",
- "value": 14
- }
- ]
- },
- {
- "matcher": {
- "id": "byName",
- "options": "column2"
- },
- "properties": [
- {
- "id": "links",
- "value": [
- {
- "title": "datalink column 2",
- "url": "grafana.com"
- }
- ]
- },
- {
- "id": "color",
- "value": {
- "fixedColor": "purple",
- "mode": "shades"
- }
- }
- ]
- }
- ]
- },
- "gridPos": {
- "h": 6,
- "w": 9,
- "x": 9,
- "y": 1
- },
- "id": 6,
- "options": {
- "barRadius": 0,
- "barWidth": 0.97,
- "fullHighlight": false,
- "groupWidth": 0.7,
- "legend": {
- "calcs": [],
- "displayMode": "list",
- "placement": "bottom",
- "showLegend": true
- },
- "orientation": "auto",
- "showValue": "auto",
- "stacking": "none",
- "tooltip": {
- "mode": "multi",
- "sort": "none"
- },
- "xTickLabelRotation": 0,
- "xTickLabelSpacing": 0
- },
- "pluginVersion": "9.5.0-cloud.4.a016665c",
- "targets": [
- {
- "csvContent": "id,column1,column2\r\nA,1,2",
- "datasource": {
- "type": "testdata",
- "uid": "o63ntNT4z"
- },
- "refId": "A",
- "scenarioId": "csv_content"
- },
- {
- "csvContent": "id,column1,column2\r\nB,2,1",
- "datasource": {
- "type": "testdata",
- "uid": "o63ntNT4z"
- },
- "hide": false,
- "refId": "B",
- "scenarioId": "csv_content"
- }
- ],
- "title": "Tooltip mode: All",
- "transformations": [
- {
- "id": "merge",
- "options": {}
- }
- ],
- "type": "barchart"
- },
- {
- "collapsed": false,
- "gridPos": {
- "h": 1,
- "w": 24,
- "x": 0,
- "y": 7
- },
- "id": 3,
- "panels": [],
- "title": "Field Override - Hide Tooltip",
- "type": "row"
- },
- {
- "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"
- },
- "thresholdsStyle": {
- "mode": "off"
- }
- },
- "mappings": [],
- "thresholds": {
- "mode": "absolute",
- "steps": [
- {
- "color": "green",
- "value": null
- },
- {
- "color": "red",
- "value": 80
- }
- ]
- }
- },
- "overrides": [
- {
- "matcher": {
- "id": "byName",
- "options": "field 3"
- },
- "properties": [
- {
- "id": "custom.hideFrom",
- "value": {
- "legend": false,
- "tooltip": true,
- "viz": false
- }
- }
- ]
- }
- ]
- },
- "gridPos": {
- "h": 6,
- "w": 9,
- "x": 0,
- "y": 8
- },
- "id": 5,
- "options": {
- "barRadius": 0,
- "barWidth": 0.97,
- "fullHighlight": false,
- "groupWidth": 0.7,
- "legend": {
- "calcs": [],
- "displayMode": "list",
- "placement": "bottom",
- "showLegend": true
- },
- "orientation": "auto",
- "showValue": "auto",
- "stacking": "none",
- "tooltip": {
- "mode": "multi",
- "sort": "none"
- },
- "xTickLabelRotation": 0,
- "xTickLabelSpacing": 0
- },
- "targets": [
- {
- "csvContent": "id, field 1, field 2, field 3\na, 20, 30, 40\nb, 40, 50, 60",
- "datasource": {
- "type": "testdata",
- "uid": "PD8C576611E62080A"
- },
- "refId": "A",
- "scenarioId": "csv_content"
- }
- ],
- "title": "Hide 'field 3'",
- "type": "barchart"
- },
- {
- "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"
- },
- "thresholdsStyle": {
- "mode": "off"
- }
- },
- "mappings": [],
- "thresholds": {
- "mode": "absolute",
- "steps": [
- {
- "color": "green",
- "value": null
- },
- {
- "color": "red",
- "value": 80
- }
- ]
- }
- },
- "overrides": [
- {
- "matcher": {
- "id": "byName",
- "options": "id"
- },
- "properties": [
- {
- "id": "custom.hideFrom",
- "value": {
- "legend": false,
- "tooltip": true,
- "viz": false
- }
- }
- ]
- }
- ]
- },
- "gridPos": {
- "h": 6,
- "w": 9,
- "x": 9,
- "y": 8
- },
- "id": 7,
- "options": {
- "barRadius": 0,
- "barWidth": 0.97,
- "fullHighlight": false,
- "groupWidth": 0.7,
- "legend": {
- "calcs": [],
- "displayMode": "list",
- "placement": "bottom",
- "showLegend": true
- },
- "orientation": "auto",
- "showValue": "auto",
- "stacking": "none",
- "tooltip": {
- "mode": "multi",
- "sort": "none"
- },
- "xTickLabelRotation": 0,
- "xTickLabelSpacing": 0
- },
- "targets": [
- {
- "csvContent": "id, field 1, field 2, field 3\na, 20, 30, 40\nb, 40, 50, 60",
- "datasource": {
- "type": "testdata",
- "uid": "PD8C576611E62080A"
- },
- "refId": "A",
- "scenarioId": "csv_content"
- }
- ],
- "title": "Hide 'id'",
- "type": "barchart"
- }
- ],
- "refresh": "",
- "schemaVersion": 38,
- "tags": [
- "gdev",
- "panel-tests",
- "barchart",
- "graph-ng"
- ],
- "templating": {
- "list": []
- },
- "time": {
- "from": "now-6h",
- "to": "now"
- },
- "timepicker": {},
- "timezone": "",
- "title": "Panel Tests - Bar Chart Tooltip",
- "uid": "ea33320b-bd97-4fe1-a27c-24bc61a48b41",
- "version": 12,
- "weekStart": ""
- }
\ No newline at end of file
diff --git a/devenv/jsonnet/dev-dashboards.libsonnet b/devenv/jsonnet/dev-dashboards.libsonnet
index 1ef01464d10..d345f86d873 100644
--- a/devenv/jsonnet/dev-dashboards.libsonnet
+++ b/devenv/jsonnet/dev-dashboards.libsonnet
@@ -107,7 +107,7 @@ local dashboard = grafana.dashboard;
id: 0,
}
},
- dashboard.new('barchart-tooltips', import '../dev-dashboards/panel-barchart/barchart-tooltips.json') +
+ dashboard.new('barchart-tooltips-legends', import '../dev-dashboards/panel-barchart/barchart-tooltips-legends.json') +
resource.addMetadata('folder', 'dev-dashboards') +
{
spec+: {
diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx
index 27d7a366e17..30e25731c1f 100644
--- a/public/app/plugins/panel/barchart/BarChartPanel.tsx
+++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx
@@ -213,7 +213,7 @@ export const BarChartPanel = ({ data, options, fieldConfig, width, height, timeZ
}
}
- return ;
+ return ;
};
const rawValue = (seriesIdx: number, valueIdx: number) => {
diff --git a/public/app/plugins/panel/barchart/types.ts b/public/app/plugins/panel/barchart/types.ts
index 347ae56edc0..f694f369a19 100644
--- a/public/app/plugins/panel/barchart/types.ts
+++ b/public/app/plugins/panel/barchart/types.ts
@@ -10,12 +10,6 @@ export interface BarChartDisplayValues {
*/
viz: [DataFrame];
- /**
- * The fields we can display, first field is X axis.
- * Contains same data as viz, but without config modifications (e.g: unit override)
- */
- legend: DataFrame;
-
/** Potentialy color by a field value */
colorByField?: Field;
}
diff --git a/public/app/plugins/panel/barchart/utils.test.ts b/public/app/plugins/panel/barchart/utils.test.ts
index 99edf5007ea..3818df464dc 100644
--- a/public/app/plugins/panel/barchart/utils.test.ts
+++ b/public/app/plugins/panel/barchart/utils.test.ts
@@ -211,19 +211,6 @@ describe('BarChart utils', () => {
null,
]
`);
-
- const displayLegendValuesAsc = assertIsDefined('legend' in result ? result : null).legend;
- const legendField = displayLegendValuesAsc.fields[1];
-
- expect(legendField.values).toMatchInlineSnapshot(`
- [
- -10,
- null,
- 10,
- null,
- null,
- ]
- `);
});
it('should remove unit from legend values when stacking is percent', () => {
@@ -239,7 +226,7 @@ describe('BarChart utils', () => {
const resultAsc = prepareBarChartDisplayValues([frame], createTheme(), {
stacking: StackingMode.Percent,
} as Options);
- const displayLegendValuesAsc = assertIsDefined('legend' in resultAsc ? resultAsc : null).legend;
+ const displayLegendValuesAsc = assertIsDefined('viz' in resultAsc ? resultAsc : null).viz[0];
expect(displayLegendValuesAsc.fields[1].config.unit).toBeUndefined();
expect(displayLegendValuesAsc.fields[2].config.unit).toBeUndefined();
diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts
index 9783cad0849..e999f750022 100644
--- a/public/app/plugins/panel/barchart/utils.ts
+++ b/public/app/plugins/panel/barchart/utils.ts
@@ -13,6 +13,7 @@ import {
outerJoinDataFrames,
TimeZone,
VizOrientation,
+ getFieldDisplayName,
} from '@grafana/data';
import { maybeSortFrame } from '@grafana/data/src/transformations/transformers/joinDataFrames';
import {
@@ -490,25 +491,16 @@ export function prepareBarChartDisplayValues(
}
}
- let legendFields: Field[] = fields;
+ // If stacking is percent, we need to correct the fields unit and display
if (options.stacking === StackingMode.Percent) {
- legendFields = fields.map((field) => {
- const alignedFrameField = frame.fields.find((f) => f.state?.displayName === field.state?.displayName)!;
+ fields.map((field) => {
+ const alignedFrameField = frame.fields.find(
+ (f) => getFieldDisplayName(f, frame) === getFieldDisplayName(f, frame)
+ );
- const copy = {
- ...field,
- config: {
- ...alignedFrameField.config,
- },
- values: field.values,
- };
-
- copy.display = getDisplayProcessor({ field: copy, theme });
-
- return copy;
+ field.config.unit = alignedFrameField?.config?.unit ?? undefined;
+ field.display = getDisplayProcessor({ field: field, theme });
});
-
- legendFields.unshift(firstField);
}
// String field is first
@@ -523,10 +515,6 @@ export function prepareBarChartDisplayValues(
fields: fields, // ideally: fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.viz)),
},
],
- legend: {
- fields: legendFields,
- length: firstField.values.length,
- },
};
}