diff --git a/e2e/suite1/specs/bar-gauge.spec.ts b/e2e/suite1/specs/bar-gauge.spec.ts
index c78f498906c..382e70d6908 100644
--- a/e2e/suite1/specs/bar-gauge.spec.ts
+++ b/e2e/suite1/specs/bar-gauge.spec.ts
@@ -1,8 +1,9 @@
 import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
 
 e2e.scenario({
   describeName: 'Bar Gauge Panel',
-  itName: 'Bar Guage rendering e2e tests',
+  itName: 'Bar Gauge rendering e2e tests',
   addScenarioDataSource: false,
   addScenarioDashBoard: false,
   skipScenario: false,
@@ -11,7 +12,7 @@ e2e.scenario({
     e2e.flows.openDashboard({ uid: 'O6f11TZWk' });
 
     e2e()
-      .get('#panel-6 .bar-gauge__value')
+      .get(`#panel-6 [aria-label^="${selectors.components.Panels.Visualization.BarGauge.value}"]`)
       .should('have.css', 'color', 'rgb(242, 73, 92)')
       .contains('100');
   },
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 9b78254df32..10887aa5858 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -33,6 +33,9 @@ export const Components = {
           labels: () => 'div.flot-x-axis > div.flot-tick-label',
         },
       },
+      BarGauge: {
+        value: 'Bar gauge value',
+      },
     },
   },
   Drawer: {
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx b/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx
new file mode 100644
index 00000000000..cefcce56ee9
--- /dev/null
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx
@@ -0,0 +1,40 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { BarGauge } from './BarGauge';
+
+<Meta title="MDX|BarGauge" component={BarGauge} />
+
+# BarGauge
+
+## Usage
+```tsx
+import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
+import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
+
+const field: Partial<Field> = {
+    type: FieldType.number,
+    config: {
+      min: minValue,
+      max: maxValue,
+      thresholds: {
+        mode: ThresholdsMode.Absolute,
+        steps: [
+          { value: -Infinity, color: 'green' },
+          { value: threshold1Value, color: threshold1Color },
+          { value: threshold2Value, color: threshold2Color },
+        ],
+      },
+    },
+  };
+  field.display = getDisplayProcessor({ field });
+
+const value = {
+  text: value.toString(),
+  title: title,
+  numeric: value,
+};
+
+//...
+<BarGauge value={70} field={field.config} display={field.display} value={value} orientation={VizOrientation.Vertical} displayMode={BarGaugeDisplayMode.Basic}/>
+```
+
+<Props of={BarGauge} />
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
index 51dcc8c9fcc..1a2cef1b990 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
@@ -4,6 +4,7 @@ import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor }
 import { Props } from './BarGauge';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
+import mdx from './BarGauge.mdx';
 
 const getKnobs = () => {
   return {
@@ -22,6 +23,11 @@ export default {
   title: 'Visualizations/BarGauge',
   component: BarGauge,
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 function addBarGaugeStory(overrides: Partial<Props>) {
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index f28aceb8952..66e5cf97cda 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -13,6 +13,7 @@ import {
   FieldConfig,
   FieldColorMode,
 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 // Components
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
@@ -115,7 +116,11 @@ export class BarGauge extends PureComponent<Props> {
 
     return (
       <div style={styles.wrapper}>
-        <FormattedValueDisplay className="bar-gauge__value" value={value} style={styles.value} />
+        <FormattedValueDisplay
+          aria-label={selectors.components.Panels.Visualization.BarGauge.value}
+          value={value}
+          style={styles.value}
+        />
         {showUnfilled && <div style={styles.emptyBar} />}
         <div style={styles.bar} />
       </div>
@@ -235,7 +240,11 @@ export class BarGauge extends PureComponent<Props> {
     return (
       <div style={containerStyles}>
         {cells}
-        <FormattedValueDisplay className="bar-gauge__value" value={value} style={valueStyles} />
+        <FormattedValueDisplay
+          aria-label={selectors.components.Panels.Visualization.BarGauge.value}
+          value={value}
+          style={valueStyles}
+        />
       </div>
     );
   }
diff --git a/packages/grafana-ui/src/components/BarGauge/_BarGauge.scss b/packages/grafana-ui/src/components/BarGauge/_BarGauge.scss
deleted file mode 100644
index 9e43439f0a2..00000000000
--- a/packages/grafana-ui/src/components/BarGauge/_BarGauge.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.bar-gauge {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.bar-gauge__value {
-  text-align: center;
-}
diff --git a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
index 3b39c8362dc..c0757d98335 100644
--- a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
+++ b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`BarGauge Render with basic options should render 1`] = `
     }
   >
     <FormattedDisplayValue
-      className="bar-gauge__value"
+      aria-label="Bar gauge value"
       style={
         Object {
           "alignItems": "center",
diff --git a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx
index f1b5034c5e0..a5a4b04b87b 100644
--- a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx
+++ b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx
@@ -1,7 +1,7 @@
-import React, { FC, CSSProperties } from 'react';
+import React, { FC, CSSProperties, HTMLProps } from 'react';
 import { FormattedValue } from '@grafana/data';
 
-export interface Props {
+export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'className' | 'value' | 'style'> {
   className?: string;
   value: FormattedValue;
   style: CSSProperties;
@@ -17,14 +17,14 @@ function fontSizeReductionFactor(fontSize: number) {
   return 0.6;
 }
 
-export const FormattedValueDisplay: FC<Props> = ({ value, className, style }) => {
+export const FormattedValueDisplay: FC<Props> = ({ value, className, style, ...htmlProps }) => {
   const fontSize = style.fontSize as number;
   const reductionFactor = fontSizeReductionFactor(fontSize);
   const hasPrefix = (value.prefix ?? '').length > 0;
   const hasSuffix = (value.suffix ?? '').length > 0;
 
   return (
-    <div className={className} style={style}>
+    <div className={className} style={style} {...htmlProps}>
       <div>
         {hasPrefix && <span>{value.prefix}</span>}
         <span>{value.text}</span>
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index 4f8a24b7bd9..2042620b884 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1,4 +1,3 @@
-@import 'BarGauge/BarGauge';
 @import 'ButtonCascader/ButtonCascader';
 @import 'ColorPicker/ColorPicker';
 @import 'CustomScrollbar/CustomScrollbar';
diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx
index 93cc8b74ba7..1597ecc456a 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx
@@ -12,10 +12,13 @@ import {
   toDataFrame,
 } from '@grafana/data';
 import { BarGaugeDisplayMode } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
 
 import { BarGaugePanel } from './BarGaugePanel';
 import { BarGaugeOptions } from './types';
 
+const valueSelector = selectors.components.Panels.Visualization.BarGauge.value;
+
 describe('BarGaugePanel', () => {
   describe('when empty result is rendered', () => {
     const wrapper = createBarGaugePanelWithData({
@@ -25,7 +28,7 @@ describe('BarGaugePanel', () => {
     });
 
     it('should render with title "No data"', () => {
-      const displayValue = wrapper.find('div.bar-gauge__value').text();
+      const displayValue = wrapper.find(`div[aria-label="${valueSelector}"]`).text();
       expect(displayValue).toBe('No data');
     });
   });
@@ -46,7 +49,7 @@ describe('BarGaugePanel', () => {
     });
 
     it('should render with title "No data"', () => {
-      const displayValue = wrapper.find('div.bar-gauge__value').text();
+      const displayValue = wrapper.find(`div[aria-label="${valueSelector}"]`).text();
       expect(displayValue).toBe('100');
     });
   });