diff --git a/docs/canvas/canvas-function-reference.asciidoc b/docs/canvas/canvas-function-reference.asciidoc
index 8cc7f64adc3a..df4b17e90577 100644
--- a/docs/canvas/canvas-function-reference.asciidoc
+++ b/docs/canvas/canvas-function-reference.asciidoc
@@ -1209,17 +1209,23 @@ Aliases: `label`, `text`, `description`
 
 Default: `""`
 
+|`labelFont`
+|`style`
+|The CSS font properties for the label. For example, `font-family` or `font-weight`.
+
+Default: `{font size=14 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align=center}`.
+
 |`metricFont`
 |`style`
 |The CSS font properties for the metric. For example, `font-family` or `font-weight`.
 
 Default: `{font size=48 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align=center lHeight=48}`.
 
-|`labelFont`
-|`style`
-|The CSS font properties for the label. For example, `font-family` or `font-weight`.
+|`metricFormat`
 
-Default: `{font size=14 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align=center}`.
+Alias: `format`
+|`string`
+|A NumeralJS format string. For example, `"0.0a"` or `"0%"`. See http://numeraljs.com/#format.
 |===
 
 *Returns:* `render`
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts
index acbd1b7c6b1a..def16f2a4b23 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts
@@ -6,6 +6,7 @@
 
 import { openSans } from '../../../common/lib/fonts';
 import header from './header.png';
+import { AdvancedSettings } from '../../../public/lib/kibana_advanced_settings';
 
 import { ElementFactory } from '../../../types';
 export const metric: ElementFactory = () => ({
@@ -22,5 +23,6 @@ export const metric: ElementFactory = () => ({
 | metric "Countries" 
   metricFont={font size=48 family="${openSans.value}" color="#000000" align="center" lHeight=48} 
   labelFont={font size=14 family="${openSans.value}" color="#000000" align="center"}
+  metricFormat="${AdvancedSettings.get('format:number:defaultPattern')}"
 | render`,
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
index bed30182a2a2..50a952d83625 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
@@ -38,7 +38,7 @@ describe('metric', () => {
       });
     });
 
-    describe('metricStyle', () => {
+    describe('metricFont', () => {
       it('sets the font style for the metric', () => {
         const result = fn(null, {
           metricFont: fontStyle,
@@ -51,7 +51,7 @@ describe('metric', () => {
       // it("sets a default style for the metric when not provided, () => {});
     });
 
-    describe('labelStyle', () => {
+    describe('labelFont', () => {
       it('sets the font style for the label', () => {
         const result = fn(null, {
           labelFont: fontStyle,
@@ -63,5 +63,15 @@ describe('metric', () => {
       // TODO: write test when using an instance of the interpreter
       // it("sets a default style for the label when not provided, () => {});
     });
+
+    describe('metricFormat', () => {
+      it('sets the number format of the metric value', () => {
+        const result = fn(null, {
+          metricFormat: '0.0%',
+        });
+
+        expect(result.value).toHaveProperty('metricFormat', '0.0%');
+      });
+    });
   });
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.ts
index f27749dbe9fc..02d212f12fde 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.ts
@@ -14,6 +14,7 @@ type Context = number | string | null;
 interface Arguments {
   label: string;
   metricFont: Style;
+  metricFormat: string;
   labelFont: Style;
 }
 
@@ -35,26 +36,32 @@ export function metric(): ExpressionFunction<'metric', Context, Arguments, Rende
         help: argHelp.label,
         default: '""',
       },
-      metricFont: {
-        types: ['style'],
-        help: argHelp.metricFont,
-        default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
-      },
       labelFont: {
         types: ['style'],
         help: argHelp.labelFont,
         default: `{font size=14 family="${openSans.value}" color="#000000" align=center}`,
       },
+      metricFont: {
+        types: ['style'],
+        help: argHelp.metricFont,
+        default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
+      },
+      metricFormat: {
+        types: ['string'],
+        aliases: ['format'],
+        help: argHelp.metricFormat,
+      },
     },
-    fn: (context, { label, metricFont, labelFont }) => {
+    fn: (context, { label, labelFont, metricFont, metricFormat }) => {
       return {
         type: 'render',
         as: 'metric',
         value: {
           metric: context === null ? '?' : context,
           label,
-          metricFont,
           labelFont,
+          metricFont,
+          metricFormat,
         },
       };
     },
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/__snapshots__/metric.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/__snapshots__/metric.examples.storyshot
new file mode 100644
index 000000000000..22b235bcd797
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/__snapshots__/metric.examples.storyshot
@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/Metric with formatted string metric and a specified format 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="canvasMetric"
+  >
+    <div
+      className="canvasMetric__metric"
+      style={
+        Object {
+          "color": "#b83c6f",
+          "fontFamily": "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif",
+          "fontSize": "48px",
+          "fontStyle": "normal",
+          "fontWeight": "bold",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      $10m
+    </div>
+    <div
+      className="canvasMetric__label"
+      style={
+        Object {
+          "color": "#000000",
+          "fontFamily": "Baskerville, Georgia, Garamond, 'Times New Roman', Times, serif",
+          "fontSize": "24px",
+          "fontStyle": "italic",
+          "fontWeight": "normal",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      Total Revenue
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots renderers/Metric with invalid metricFont 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="canvasMetric"
+  >
+    <div
+      className="canvasMetric__metric"
+      style={
+        Object {
+          "color": "#b83c6f",
+          "fontFamily": "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif",
+          "fontSize": "48px",
+          "fontStyle": "normal",
+          "fontWeight": "bold",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      $10m
+    </div>
+    <div
+      className="canvasMetric__label"
+      style={
+        Object {
+          "color": "#000000",
+          "fontFamily": "Baskerville, Georgia, Garamond, 'Times New Roman', Times, serif",
+          "fontSize": "24px",
+          "fontStyle": "italic",
+          "fontWeight": "normal",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      Total Revenue
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots renderers/Metric with label 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="canvasMetric"
+  >
+    <div
+      className="canvasMetric__metric"
+      style={
+        Object {
+          "color": "#b83c6f",
+          "fontFamily": "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif",
+          "fontSize": "48px",
+          "fontStyle": "normal",
+          "fontWeight": "bold",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      $12.34
+    </div>
+    <div
+      className="canvasMetric__label"
+      style={
+        Object {
+          "color": "#000000",
+          "fontFamily": "Baskerville, Georgia, Garamond, 'Times New Roman', Times, serif",
+          "fontSize": "24px",
+          "fontStyle": "italic",
+          "fontWeight": "normal",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      Average price
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots renderers/Metric with null metric 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="canvasMetric"
+  >
+    <div
+      className="canvasMetric__metric"
+      style={Object {}}
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots renderers/Metric with number metric 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="canvasMetric"
+  >
+    <div
+      className="canvasMetric__metric"
+      style={
+        Object {
+          "color": "#b83c6f",
+          "fontFamily": "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif",
+          "fontSize": "48px",
+          "fontStyle": "normal",
+          "fontWeight": "bold",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      12345.6789
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots renderers/Metric with number metric and a specified format 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="canvasMetric"
+  >
+    <div
+      className="canvasMetric__metric"
+      style={
+        Object {
+          "color": "#b83c6f",
+          "fontFamily": "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif",
+          "fontSize": "48px",
+          "fontStyle": "normal",
+          "fontWeight": "bold",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      -0.24%
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots renderers/Metric with string metric 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="canvasMetric"
+  >
+    <div
+      className="canvasMetric__metric"
+      style={
+        Object {
+          "color": "#b83c6f",
+          "fontFamily": "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif",
+          "fontSize": "48px",
+          "fontStyle": "normal",
+          "fontWeight": "bold",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "textDecoration": "none",
+        }
+      }
+    >
+      $12.34
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/metric.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/metric.examples.tsx
new file mode 100644
index 000000000000..3ab6363ea7dd
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/metric.examples.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { storiesOf } from '@storybook/react';
+import React, { CSSProperties } from 'react';
+import { Metric } from '../metric';
+
+const labelFontSpec: CSSProperties = {
+  fontFamily: "Baskerville, Georgia, Garamond, 'Times New Roman', Times, serif",
+  fontWeight: 'normal',
+  fontStyle: 'italic',
+  textDecoration: 'none',
+  textAlign: 'center',
+  fontSize: '24px',
+  lineHeight: '1',
+  color: '#000000',
+};
+
+const metricFontSpec: CSSProperties = {
+  fontFamily:
+    "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif",
+  fontWeight: 'bold',
+  fontStyle: 'normal',
+  textDecoration: 'none',
+  textAlign: 'center',
+  fontSize: '48px',
+  lineHeight: '1',
+  color: '#b83c6f',
+};
+
+storiesOf('renderers/Metric', module)
+  .addDecorator(story => (
+    <div
+      style={{
+        width: '200px',
+      }}
+    >
+      {story()}
+    </div>
+  ))
+  .add('with null metric', () => <Metric metric={null} metricFont={{}} labelFont={{}} />)
+  .add('with number metric', () => (
+    <Metric metric="12345.6789" labelFont={{}} metricFont={metricFontSpec} />
+  ))
+  .add('with string metric', () => (
+    <Metric metric="$12.34" labelFont={labelFontSpec} metricFont={metricFontSpec} />
+  ))
+  .add('with label', () => (
+    <Metric
+      label="Average price"
+      metric="$12.34"
+      labelFont={labelFontSpec}
+      metricFont={metricFontSpec}
+    />
+  ))
+  .add('with number metric and a specified format', () => (
+    <Metric
+      metric="-0.0024"
+      labelFont={labelFontSpec}
+      metricFont={metricFontSpec}
+      metricFormat="0.00%"
+    />
+  ))
+  .add('with formatted string metric and a specified format', () => (
+    <Metric
+      label="Total Revenue"
+      metric="$10000000.00"
+      labelFont={labelFontSpec}
+      metricFont={metricFontSpec}
+      metricFormat="$0a"
+    />
+  ))
+  .add('with invalid metricFont', () => (
+    <Metric
+      label="Total Revenue"
+      metric="$10000000.00"
+      labelFont={labelFontSpec}
+      metricFont={metricFontSpec}
+      metricFormat="$0a"
+    />
+  ));
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts
new file mode 100644
index 000000000000..d830090249d5
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { Metric } from './metric';
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx
new file mode 100644
index 000000000000..8d2df8bf2233
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent, CSSProperties } from 'react';
+import numeral from '@elastic/numeral';
+
+interface Props {
+  /** The text to display under the metric */
+  label?: string;
+  /** CSS font properties for the label */
+  labelFont: CSSProperties;
+  /** Value of the metric to display */
+  metric: string | number | null;
+  /** CSS font properties for the metric */
+  metricFont: CSSProperties;
+  /** NumeralJS format string */
+  metricFormat?: string;
+}
+
+export const Metric: FunctionComponent<Props> = ({
+  label,
+  metric,
+  labelFont,
+  metricFont,
+  metricFormat,
+}) => (
+  <div className="canvasMetric">
+    <div className="canvasMetric__metric" style={metricFont}>
+      {metricFormat ? numeral(metric).format(metricFormat) : metric}
+    </div>
+    {label && (
+      <div className="canvasMetric__label" style={labelFont}>
+        {label}
+      </div>
+    )}
+  </div>
+);
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.js
deleted file mode 100644
index 688b183f9a61..000000000000
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-export const metric = () => ({
-  name: 'metric',
-  displayName: 'Metric',
-  help: 'Render HTML Markup for the Metric element',
-  reuseDomNode: true,
-  render(domNode, config, handlers) {
-    const metricFontStyle = config.metricFont ? config.metricFont.spec : {};
-    const labelFontStyle = config.labelFont ? config.labelFont.spec : {};
-
-    ReactDOM.render(
-      <div className="canvasMetric">
-        <div className="canvasMetric__metric" style={metricFontStyle}>
-          {config.metric}
-        </div>
-        <div className="canvasMetric__label" style={labelFontStyle}>
-          {config.label}
-        </div>
-      </div>,
-      domNode,
-      () => handlers.done()
-    );
-
-    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
-  },
-});
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx
new file mode 100644
index 000000000000..dd4d36aa7229
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { CSSProperties } from 'react';
+import ReactDOM from 'react-dom';
+import { RendererFactory, Style } from '../../../types';
+import { Metric } from './component/metric';
+
+export interface Config {
+  /** The text to display under the metric */
+  label: string;
+  /** Font settings for the label */
+  labelFont: Style;
+  /** Value of the metric to display */
+  metric: string | number | null;
+  /** Font settings for the metric */
+  metricFont: Style;
+  /** NumeralJS format string */
+  metricFormat: string;
+}
+
+export const metric: RendererFactory<Config> = () => ({
+  name: 'metric',
+  displayName: 'Metric',
+  help: 'Render HTML Markup for the Metric element',
+  reuseDomNode: true,
+  render(domNode, config, handlers) {
+    ReactDOM.render(
+      <Metric
+        label={config.label}
+        labelFont={config.labelFont ? (config.labelFont.spec as CSSProperties) : {}}
+        metric={config.metric}
+        metricFont={config.metricFont ? (config.metricFont.spec as CSSProperties) : {}}
+        metricFormat={config.metricFormat}
+      />,
+      domNode,
+      () => handlers.done()
+    );
+
+    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+  },
+});
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/functions/metric.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/functions/metric.ts
index 8e92cd9efa9b..77bf71800d38 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/functions/metric.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/functions/metric.ts
@@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n';
 import { metric } from '../../functions/common/metric';
 import { FunctionHelp } from '.';
 import { FunctionFactory } from '../../../types';
-import { FONT_FAMILY, FONT_WEIGHT, CSS } from '../constants';
+import { FONT_FAMILY, FONT_WEIGHT, CSS, NUMERALJS } from '../constants';
 
 export const help: FunctionHelp<FunctionFactory<typeof metric>> = {
   help: i18n.translate('xpack.canvas.functions.metricHelpText', {
@@ -18,15 +18,6 @@ export const help: FunctionHelp<FunctionFactory<typeof metric>> = {
     label: i18n.translate('xpack.canvas.functions.metric.args.labelHelpText', {
       defaultMessage: 'The text describing the metric.',
     }),
-    metricFont: i18n.translate('xpack.canvas.functions.metric.args.metricFontHelpText', {
-      defaultMessage:
-        'The {CSS} font properties for the metric. For example, {FONT_FAMILY} or {FONT_WEIGHT}.',
-      values: {
-        CSS,
-        FONT_FAMILY,
-        FONT_WEIGHT,
-      },
-    }),
     labelFont: i18n.translate('xpack.canvas.functions.metric.args.labelFontHelpText', {
       defaultMessage:
         'The {CSS} font properties for the label. For example, {FONT_FAMILY} or {FONT_WEIGHT}.',
@@ -36,5 +27,24 @@ export const help: FunctionHelp<FunctionFactory<typeof metric>> = {
         FONT_WEIGHT,
       },
     }),
+    metricFont: i18n.translate('xpack.canvas.functions.metric.args.metricFontHelpText', {
+      defaultMessage:
+        'The {CSS} font properties for the metric. For example, {FONT_FAMILY} or {FONT_WEIGHT}.',
+      values: {
+        CSS,
+        FONT_FAMILY,
+        FONT_WEIGHT,
+      },
+    }),
+    metricFormat: i18n.translate('xpack.canvas.functions.metric.args.metricFormatHelpText', {
+      defaultMessage:
+        'A {NUMERALJS} format string. For example, {example1} or {example2}. See {url}.',
+      values: {
+        example1: `"0.0a"`,
+        example2: `"0%"`,
+        NUMERALJS,
+        url: 'http://numeraljs.com/#format',
+      },
+    }),
   },
 };
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js
index db13083c9738..b714cdcaab09 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js
@@ -9,6 +9,7 @@ import { datacolumn } from './datacolumn';
 import { filterGroup } from './filter_group';
 import { imageUpload } from './image_upload';
 import { number } from './number';
+import { numberFormat } from './number_format';
 import { palette } from './palette';
 import { percentage } from './percentage';
 import { range } from './range';
@@ -24,6 +25,7 @@ export const args = [
   filterGroup,
   imageUpload,
   number,
+  numberFormat,
   palette,
   percentage,
   range,
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/__snapshots__/number_format.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/__snapshots__/number_format.examples.storyshot
new file mode 100644
index 000000000000..6fcfc922e5d0
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/__snapshots__/number_format.examples.storyshot
@@ -0,0 +1,242 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots arguments/NumberFormat with custom format 1`] = `
+Array [
+  <div
+    className="euiFormControlLayout euiFormControlLayout--compressed"
+  >
+    <div
+      className="euiFormControlLayout__childrenWrapper"
+    >
+      <select
+        className="euiSelect euiSelect--compressed"
+        id="NumberFormatExample3"
+        onChange={[Function]}
+        onMouseUp={[Function]}
+        value=""
+      >
+        <option
+          value="0.0[000]"
+        >
+          Number
+        </option>
+        <option
+          value="0.0%"
+        >
+          Percent
+        </option>
+        <option
+          value="$0.00"
+        >
+          Currency
+        </option>
+        <option
+          value="00:00:00"
+        >
+          Duration
+        </option>
+        <option
+          value="0.0b"
+        >
+          Bytes
+        </option>
+        <option
+          value=""
+        >
+          Custom
+        </option>
+      </select>
+      <div
+        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          className="euiFormControlLayoutCustomIcon"
+        >
+          <svg
+            aria-hidden="true"
+            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+            focusable="false"
+            height={16}
+            style={null}
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </span>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormControlLayout euiFormControlLayout--compressed"
+  >
+    <div
+      className="euiFormControlLayout__childrenWrapper"
+    >
+      <input
+        className="euiFieldText euiFieldText--compressed"
+        onChange={[Function]}
+        placeholder="0.0a"
+        type="text"
+        value="0.0[000]a"
+      />
+    </div>
+  </div>,
+]
+`;
+
+exports[`Storyshots arguments/NumberFormat with no format 1`] = `
+Array [
+  <div
+    className="euiFormControlLayout euiFormControlLayout--compressed"
+  >
+    <div
+      className="euiFormControlLayout__childrenWrapper"
+    >
+      <select
+        className="euiSelect euiSelect--compressed"
+        id="NumberFormatExample1"
+        onChange={[Function]}
+        onMouseUp={[Function]}
+        value=""
+      >
+        <option
+          value="0.0[000]"
+        >
+          Number
+        </option>
+        <option
+          value="0.0%"
+        >
+          Percent
+        </option>
+        <option
+          value="$0.00"
+        >
+          Currency
+        </option>
+        <option
+          value="00:00:00"
+        >
+          Duration
+        </option>
+        <option
+          value="0.0b"
+        >
+          Bytes
+        </option>
+        <option
+          value=""
+        >
+          Custom
+        </option>
+      </select>
+      <div
+        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          className="euiFormControlLayoutCustomIcon"
+        >
+          <svg
+            aria-hidden="true"
+            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+            focusable="false"
+            height={16}
+            style={null}
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </span>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormControlLayout euiFormControlLayout--compressed"
+  >
+    <div
+      className="euiFormControlLayout__childrenWrapper"
+    >
+      <input
+        className="euiFieldText euiFieldText--compressed"
+        onChange={[Function]}
+        placeholder="0.0a"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>,
+]
+`;
+
+exports[`Storyshots arguments/NumberFormat with preset format 1`] = `
+<div
+  className="euiFormControlLayout euiFormControlLayout--compressed"
+>
+  <div
+    className="euiFormControlLayout__childrenWrapper"
+  >
+    <select
+      className="euiSelect euiSelect--compressed"
+      id="NumberFormatExample2"
+      onChange={[Function]}
+      onMouseUp={[Function]}
+      value="$0.00"
+    >
+      <option
+        value="0.0[000]"
+      >
+        Number
+      </option>
+      <option
+        value="0.0%"
+      >
+        Percent
+      </option>
+      <option
+        value="$0.00"
+      >
+        Currency
+      </option>
+      <option
+        value="00:00:00"
+      >
+        Duration
+      </option>
+      <option
+        value="0.0b"
+      >
+        Bytes
+      </option>
+      <option
+        value=""
+      >
+        Custom
+      </option>
+    </select>
+    <div
+      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        className="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height={16}
+          style={null}
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/number_format.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/number_format.examples.tsx
new file mode 100644
index 000000000000..4a078a38c4a3
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/number_format.examples.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { NumberFormatArgInput } from '../number_format';
+
+const numberFormats = [
+  { value: '0.0[000]', text: 'Number' },
+  { value: '0.0%', text: 'Percent' },
+  { value: '$0.00', text: 'Currency' },
+  { value: '00:00:00', text: 'Duration' },
+  { value: '0.0b', text: 'Bytes' },
+];
+
+storiesOf('arguments/NumberFormat', module)
+  .add('with no format', () => (
+    <NumberFormatArgInput
+      numberFormats={numberFormats}
+      onValueChange={action('onValueChange')}
+      argValue=""
+      argId="NumberFormatExample1"
+    />
+  ))
+  .add('with preset format', () => (
+    <NumberFormatArgInput
+      numberFormats={numberFormats}
+      onValueChange={action('onValueChange')}
+      argValue="$0.00"
+      argId="NumberFormatExample2"
+    />
+  ))
+  .add('with custom format', () => (
+    <NumberFormatArgInput
+      numberFormats={numberFormats}
+      onValueChange={action('onValueChange')}
+      argValue="0.0[000]a"
+      argId="NumberFormatExample3"
+    />
+  ));
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts
new file mode 100644
index 000000000000..4eca6e41bd3f
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { compose, withProps } from 'recompose';
+import { NumberFormatArgInput as Component, Props as ComponentProps } from './number_format';
+import { AdvancedSettings } from '../../../../public/lib/kibana_advanced_settings';
+// @ts-ignore untyped local lib
+import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
+
+const formatMap = {
+  NUMBER: AdvancedSettings.get('format:number:defaultPattern'),
+  PERCENT: AdvancedSettings.get('format:percent:defaultPattern'),
+  CURRENCY: AdvancedSettings.get('format:currency:defaultPattern'),
+  DURATION: '00:00:00',
+  BYTES: AdvancedSettings.get('format:bytes:defaultPattern'),
+};
+
+const numberFormats = [
+  { value: formatMap.NUMBER, text: 'Number' },
+  { value: formatMap.PERCENT, text: 'Percent' },
+  { value: formatMap.CURRENCY, text: 'Currency' },
+  { value: formatMap.DURATION, text: 'Duration' },
+  { value: formatMap.BYTES, text: 'Bytes' },
+];
+
+export const NumberFormatArgInput = compose<ComponentProps, null>(withProps({ numberFormats }))(
+  Component
+);
+
+export const numberFormat = () => ({
+  name: 'numberFormat',
+  displayName: 'Number Format',
+  help: 'Select or enter a valid NumeralJS format',
+  simpleTemplate: templateFromReactComponent(NumberFormatArgInput),
+});
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/number_format.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/number_format.tsx
new file mode 100644
index 000000000000..b9d122dcf03d
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/number_format.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment, ChangeEvent, FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import { EuiSelect, EuiFieldText, EuiSpacer } from '@elastic/eui';
+
+interface NumberFormatOption {
+  /** A NumeralJS format string */
+  value: string;
+  /** The name to display for the format */
+  text: string;
+}
+
+export interface Props {
+  /** An array of number formats options */
+  numberFormats: NumberFormatOption[];
+  /** The handler to invoke when value changes */
+  onValueChange: (value: string) => void;
+  /** The value of the argument */
+  argValue: string;
+  /** The ID for the argument */
+  argId: string;
+}
+
+export const NumberFormatArgInput: FunctionComponent<Props> = ({
+  numberFormats,
+  onValueChange,
+  argValue,
+  argId,
+}) => {
+  const formatOptions = numberFormats.concat({ value: '', text: 'Custom' });
+  const handleTextChange = (ev: ChangeEvent<HTMLInputElement>) => onValueChange(ev.target.value);
+  const handleSelectChange = (ev: ChangeEvent<HTMLSelectElement>) => {
+    const { value } = formatOptions[ev.target.selectedIndex];
+    return onValueChange(value || '0.0a');
+  };
+
+  // checks if the argValue is one of the preset formats
+  const isCustomFormat = !argValue || !formatOptions.map(({ value }) => value).includes(argValue);
+
+  return (
+    <Fragment>
+      <EuiSelect
+        compressed
+        id={argId}
+        value={isCustomFormat ? '' : argValue}
+        options={formatOptions}
+        onChange={handleSelectChange}
+      />
+      {isCustomFormat && (
+        <Fragment>
+          <EuiSpacer size="s" />
+          <EuiFieldText
+            placeholder="0.0a"
+            value={argValue}
+            compressed
+            onChange={handleTextChange}
+          />
+        </Fragment>
+      )}
+    </Fragment>
+  );
+};
+
+NumberFormatArgInput.propTypes = {
+  onValueChange: PropTypes.func.isRequired,
+  argValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,
+  argId: PropTypes.string.isRequired,
+};
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
index 15da536c56e4..5df400361511 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
@@ -5,6 +5,7 @@
  */
 
 import { openSans } from '../../../common/lib/fonts';
+import { AdvancedSettings } from '../../../public/lib/kibana_advanced_settings';
 
 export const metric = () => ({
   name: 'metric',
@@ -19,6 +20,13 @@ export const metric = () => ({
       argType: 'string',
       default: '""',
     },
+    {
+      name: 'labelFont',
+      displayName: 'Label text settings',
+      help: 'Fonts, alignment and color',
+      argType: 'font',
+      default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
+    },
     {
       name: 'metricFont',
       displayName: 'Metric text settings',
@@ -27,11 +35,10 @@ export const metric = () => ({
       default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
     },
     {
-      name: 'labelFont',
-      displayName: 'Label text settings',
-      help: 'Fonts, alignment and color',
-      argType: 'font',
-      default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
+      name: 'metricFormat',
+      displayName: 'Metric Format',
+      argType: 'numberFormat',
+      default: `"${AdvancedSettings.get('format:number:defaultPattern')}"`,
     },
   ],
 });
diff --git a/x-pack/legacy/plugins/canvas/public/lib/kibana_advanced_settings.ts b/x-pack/legacy/plugins/canvas/public/lib/kibana_advanced_settings.ts
new file mode 100644
index 000000000000..33f3d801c22d
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/public/lib/kibana_advanced_settings.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import chrome from 'ui/chrome';
+
+export const AdvancedSettings = chrome.getUiSettingsClient();
diff --git a/x-pack/legacy/plugins/canvas/types/renderers.ts b/x-pack/legacy/plugins/canvas/types/renderers.ts
index 2167c542c354..282a1c820e34 100644
--- a/x-pack/legacy/plugins/canvas/types/renderers.ts
+++ b/x-pack/legacy/plugins/canvas/types/renderers.ts
@@ -7,19 +7,32 @@
 type GenericCallback = (callback: () => void) => void;
 
 export interface RendererHandlers {
+  /** Handler to invoke when an element has finished rendering */
   done: () => void;
-  getFilter: () => string;
+  /** Handler to invoke when an element is deleted or changes to a different render type */
   onDestroy: GenericCallback;
+  /** Handler to invoke when an element's dimensions have changed*/
   onResize: GenericCallback;
+  /** Retrieves the value of the filter property on the element object persisted on the workpad */
+  getFilter: () => string;
+  /** Sets the value of the filter property on the element object persisted on the workpad */
   setFilter: (filter: string) => void;
 }
 
 export interface RendererSpec<RendererConfig = {}> {
+  /** The render type */
   name: string;
+  /** The name to display */
   displayName: string;
+  /** A description of what is rendered */
   help: string;
+  /** Indicate whether the element should reuse the existing DOM element when re-rendering */
   reuseDomNode: boolean;
-  height: number;
+  /** The default width of the element in pixels */
+  width?: number;
+  /** The default height of the element in pixels */
+  height?: number;
+  /** A function that renders an element into the specified DOM element */
   render: (domNode: HTMLElement, config: RendererConfig, handlers: RendererHandlers) => void;
 }