diff --git a/public/app/core/time_series2.ts b/public/app/core/time_series2.ts
index 9872c0bc912..23a0a0c19ea 100644
--- a/public/app/core/time_series2.ts
+++ b/public/app/core/time_series2.ts
@@ -1,6 +1,7 @@
 import kbn from 'app/core/utils/kbn';
 import { getFlotTickDecimals } from 'app/core/utils/ticks';
 import _ from 'lodash';
+import { getValueFormat } from '@grafana/ui';
 
 function matchSeriesOverride(aliasOrRegex, seriesAlias) {
   if (!aliasOrRegex) {
@@ -31,13 +32,13 @@ export function updateLegendValues(data: TimeSeries[], panel, height) {
     const yaxes = panel.yaxes;
     const seriesYAxis = series.yaxis || 1;
     const axis = yaxes[seriesYAxis - 1];
-    const formater = kbn.valueFormats[axis.format];
+    const formatter = getValueFormat(axis.format);
 
     // decimal override
     if (_.isNumber(panel.decimals)) {
-      series.updateLegendValues(formater, panel.decimals, null);
+      series.updateLegendValues(formatter, panel.decimals, null);
     } else if (_.isNumber(axis.decimals)) {
-      series.updateLegendValues(formater, axis.decimals + 1, null);
+      series.updateLegendValues(formatter, axis.decimals + 1, null);
     } else {
       // auto decimals
       // legend and tooltip gets one more decimal precision
@@ -45,7 +46,7 @@ export function updateLegendValues(data: TimeSeries[], panel, height) {
       const { datamin, datamax } = getDataMinMax(data);
       const { tickDecimals, scaledDecimals } = getFlotTickDecimals(datamin, datamax, axis, height);
       const tickDecimalsPlusOne = (tickDecimals || -1) + 1;
-      series.updateLegendValues(formater, tickDecimalsPlusOne, scaledDecimals + 2);
+      series.updateLegendValues(formatter, tickDecimalsPlusOne, scaledDecimals + 2);
     }
   }
 }
@@ -105,7 +106,7 @@ export default class TimeSeries {
     this.aliasEscaped = _.escape(opts.alias);
     this.color = opts.color;
     this.bars = { fillColor: opts.color };
-    this.valueFormater = kbn.valueFormats.none;
+    this.valueFormater = getValueFormat('none');
     this.stats = {};
     this.legend = true;
     this.unit = opts.unit;
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 78f9d09520b..aeb540551b8 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -11,7 +11,6 @@ import './jquery.flot.events';
 import $ from 'jquery';
 import _ from 'lodash';
 import moment from 'moment';
-import kbn from 'app/core/utils/kbn';
 import { tickStep } from 'app/core/utils/ticks';
 import { appEvents, coreModule, updateLegendValues } from 'app/core/core';
 import GraphTooltip from './graph_tooltip';
@@ -26,7 +25,7 @@ import ReactDOM from 'react-dom';
 import { Legend, GraphLegendProps } from './Legend/Legend';
 
 import { GraphCtrl } from './module';
-import { GrafanaTheme } from '@grafana/ui';
+import { GrafanaTheme, getValueFormat } from '@grafana/ui';
 
 class GraphElement {
   ctrl: GraphCtrl;
@@ -730,10 +729,12 @@ class GraphElement {
 
   configureAxisMode(axis, format) {
     axis.tickFormatter = (val, axis) => {
-      if (!kbn.valueFormats[format]) {
+      const formatter = getValueFormat(format);
+
+      if (!formatter) {
         throw new Error(`Unit '${format}' is not supported`);
       }
-      return kbn.valueFormats[format](val, axis.tickDecimals, axis.scaledDecimals);
+      return formatter(val, axis.tickDecimals, axis.scaledDecimals);
     };
   }
 
diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
index 4ff0176d0bf..be9920b3edf 100644
--- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
@@ -1,8 +1,8 @@
 import * as d3 from 'd3';
 import $ from 'jquery';
 import _ from 'lodash';
-import kbn from 'app/core/utils/kbn';
 import { getValueBucketBound } from './heatmap_data_converter';
+import { getValueFormat } from '@grafana/ui';
 
 const TOOLTIP_PADDING_X = 30;
 const TOOLTIP_PADDING_Y = 5;
@@ -268,7 +268,7 @@ export class HeatmapTooltip {
   countValueFormatter(decimals, scaledDecimals = null) {
     const format = 'short';
     return value => {
-      return kbn.valueFormats[format](value, decimals, scaledDecimals);
+      return getValueFormat(format)(value, decimals, scaledDecimals);
     };
   }
 }
diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts
index 6333a985819..6489c9e9895 100644
--- a/public/app/plugins/panel/heatmap/rendering.ts
+++ b/public/app/plugins/panel/heatmap/rendering.ts
@@ -2,13 +2,12 @@ import _ from 'lodash';
 import $ from 'jquery';
 import moment from 'moment';
 import * as d3 from 'd3';
-import kbn from 'app/core/utils/kbn';
 import { appEvents, contextSrv } from 'app/core/core';
 import * as ticksUtils from 'app/core/utils/ticks';
 import { HeatmapTooltip } from './heatmap_tooltip';
 import { mergeZeroBuckets } from './heatmap_data_converter';
 import { getColorScale, getOpacityScale } from './color_scale';
-import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
+import { GrafanaTheme, getColorFromHexRgbOrName, getValueFormat } from '@grafana/ui';
 
 const MIN_CARD_SIZE = 1,
   CARD_PADDING = 1,
@@ -436,7 +435,7 @@ export class HeatmapRenderer {
     const format = this.panel.yAxis.format;
     return value => {
       try {
-        return format !== 'none' ? kbn.valueFormats[format](value, decimals, scaledDecimals) : value;
+        return format !== 'none' ? getValueFormat(format)(value, decimals, scaledDecimals) : value;
       } catch (err) {
         console.error(err.message || err);
         return value;
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index da9cf0de689..2768951d2ba 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -8,8 +8,7 @@ import kbn from 'app/core/utils/kbn';
 import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
-import { getColorFromHexRgbOrName } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/ui';
+import { GrafanaTheme, getValueFormat, getColorFromHexRgbOrName } from '@grafana/ui';
 
 class SingleStatCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
@@ -192,7 +191,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       data.valueRounded = 0;
     } else {
       const decimalInfo = this.getDecimalsForValue(data.value);
-      const formatFunc = kbn.valueFormats[this.panel.format];
+      const formatFunc = getValueFormat(this.panel.format);
+
       data.valueFormatted = formatFunc(
         datapoint[this.panel.tableColumn],
         decimalInfo.decimals,
@@ -301,6 +301,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     if (this.series && this.series.length > 0) {
       const lastPoint = _.last(this.series[0].datapoints);
       const lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;
+      const formatFunc = getValueFormat(this.panel.format);
 
       if (this.panel.valueName === 'name') {
         data.value = 0;
@@ -311,7 +312,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         data.valueFormatted = _.escape(lastValue);
         data.valueRounded = 0;
       } else if (this.panel.valueName === 'last_time') {
-        const formatFunc = kbn.valueFormats[this.panel.format];
         data.value = lastPoint[1];
         data.valueRounded = data.value;
         data.valueFormatted = formatFunc(data.value, 0, 0, this.dashboard.isTimezoneUtc());
@@ -320,7 +320,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         data.flotpairs = this.series[0].flotpairs;
 
         const decimalInfo = this.getDecimalsForValue(data.value);
-        const formatFunc = kbn.valueFormats[this.panel.format];
 
         data.valueFormatted = formatFunc(
           data.value,
diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts
index ccaf3ddf423..90479a67602 100644
--- a/public/app/plugins/panel/table/renderer.ts
+++ b/public/app/plugins/panel/table/renderer.ts
@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import kbn from 'app/core/utils/kbn';
-import { getColorFromHexRgbOrName } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/ui';
+import { GrafanaTheme, getValueFormat, getColorFromHexRgbOrName } from '@grafana/ui';
 
 export class TableRenderer {
   formatters: any[];
@@ -170,7 +169,7 @@ export class TableRenderer {
     }
 
     if (column.style.type === 'number') {
-      const valueFormatter = kbn.valueFormats[column.unit || column.style.unit];
+      const valueFormatter = getValueFormat(column.unit || column.style.unit);
 
       return v => {
         if (v === null || v === void 0) {