diff --git a/.i18nrc.json b/.i18nrc.json
index 6c48a049ce316..d45eac4957bea 100644
--- a/.i18nrc.json
+++ b/.i18nrc.json
@@ -17,6 +17,7 @@
     "timelion": "src/core_plugins/timelion",
     "tsvb": "src/core_plugins/metrics",
     "tagCloud": "src/core_plugins/tagcloud",
+    "tsvb": "src/core_plugins/metrics",
     "xpack.graph": "x-pack/plugins/graph",
     "xpack.grokDebugger": "x-pack/plugins/grokdebugger",
     "xpack.idxMgmt": "x-pack/plugins/index_management",
diff --git a/src/core_plugins/metrics/public/components/add_delete_buttons.js b/src/core_plugins/metrics/public/components/add_delete_buttons.js
index 222ffa1af0f5e..d6bc91a1320e8 100644
--- a/src/core_plugins/metrics/public/components/add_delete_buttons.js
+++ b/src/core_plugins/metrics/public/components/add_delete_buttons.js
@@ -20,6 +20,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { EuiToolTip, EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 function AddDeleteButtons(props) {
   const { testSubj } = props;
@@ -86,9 +87,9 @@ function AddDeleteButtons(props) {
 
 AddDeleteButtons.defaultProps = {
   testSubj: 'Add',
-  addTooltip: 'Add',
-  deleteTooltip: 'Delete',
-  cloneTooltip: 'Clone'
+  addTooltip: i18n.translate('tsvb.addDeleteButtons.addButtonDefaultTooltip', { defaultMessage: 'Add' }),
+  deleteTooltip: i18n.translate('tsvb.addDeleteButtons.deleteButtonDefaultTooltip', { defaultMessage: 'Delete' }),
+  cloneTooltip: i18n.translate('tsvb.addDeleteButtons.cloneButtonDefaultTooltip', { defaultMessage: 'Clone' })
 };
 
 AddDeleteButtons.propTypes = {
diff --git a/src/core_plugins/metrics/public/components/add_delete_buttons.test.js b/src/core_plugins/metrics/public/components/add_delete_buttons.test.js
index de24bbff55846..71492c5ee1f84 100644
--- a/src/core_plugins/metrics/public/components/add_delete_buttons.test.js
+++ b/src/core_plugins/metrics/public/components/add_delete_buttons.test.js
@@ -19,14 +19,14 @@
 
 import React from 'react';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import sinon from 'sinon';
 import AddDeleteButtons from './add_delete_buttons';
 
 describe('AddDeleteButtons', () => {
   it('calls onAdd={handleAdd}', () => {
     const handleAdd = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons onAdd={handleAdd} />
     );
     wrapper.find('EuiButtonIcon').at(0).simulate('click');
@@ -35,7 +35,7 @@ describe('AddDeleteButtons', () => {
 
   it('calls onDelete={handleDelete}', () => {
     const handleDelete = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons onDelete={handleDelete} />
     );
     wrapper.find('EuiButtonIcon').at(1).simulate('click');
@@ -44,7 +44,7 @@ describe('AddDeleteButtons', () => {
 
   it('calls onClone={handleClone}', () => {
     const handleClone = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons onClone={handleClone} />
     );
     wrapper.find('EuiButtonIcon').at(0).simulate('click');
@@ -52,21 +52,21 @@ describe('AddDeleteButtons', () => {
   });
 
   it('disableDelete={true}', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons disableDelete={true} />
     );
     expect(wrapper.find({ text: 'Delete' })).to.have.length(0);
   });
 
   it('disableAdd={true}', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons disableAdd={true} />
     );
     expect(wrapper.find({ text: 'Add' })).to.have.length(0);
   });
 
   it('should not display clone by default', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons />
     );
     expect(wrapper.find({ text: 'Clone' })).to.have.length(0);
@@ -74,7 +74,7 @@ describe('AddDeleteButtons', () => {
 
   it('should not display clone when disableAdd={true}', () => {
     const fn = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons onClone={fn} disableAdd={true} />
     );
     expect(wrapper.find({ text: 'Clone' })).to.have.length(0);
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
index 88c8f2062121b..b0d095a731035 100644
--- a/src/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -41,6 +41,7 @@ import {
   EuiCode,
   EuiText,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 function newAnnotation() {
   return {
@@ -99,7 +100,10 @@ class AnnotationsEditor extends Component {
               <EuiFlexItem>
                 <EuiFormRow
                   id={htmlId('indexPattern')}
-                  label="Index pattern (required)"
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.indexPatternLabel"
+                    defaultMessage="Index pattern (required)"
+                  />)}
                   fullWidth
                 >
                   <EuiFieldText
@@ -110,7 +114,14 @@ class AnnotationsEditor extends Component {
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiFormRow id={htmlId('timeField')} label="Time field (required)" fullWidth>
+                <EuiFormRow
+                  id={htmlId('timeField')}
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.timeFieldLabel"
+                    defaultMessage="Time field (required)"
+                  />)}
+                  fullWidth
+                >
                   <FieldSelect
                     restrict="date"
                     value={model.time_field}
@@ -129,7 +140,10 @@ class AnnotationsEditor extends Component {
               <EuiFlexItem>
                 <EuiFormRow
                   id={htmlId('queryString')}
-                  label="Query string"
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.queryStringLabel"
+                    defaultMessage="Query string"
+                  />)}
                   fullWidth
                 >
                   <EuiFieldText
@@ -140,7 +154,12 @@ class AnnotationsEditor extends Component {
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel>Ignore global filters?</EuiFormLabel>
+                <EuiFormLabel>
+                  <FormattedMessage
+                    id="tsvb.annotationsEditor.ignoreGlobalFiltersLabel"
+                    defaultMessage="Ignore global filters?"
+                  />
+                </EuiFormLabel>
                 <EuiSpacer size="s" />
                 <YesNo
                   value={model.ignore_global_filters}
@@ -149,7 +168,12 @@ class AnnotationsEditor extends Component {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel>Ignore panel filters?</EuiFormLabel>
+                <EuiFormLabel>
+                  <FormattedMessage
+                    id="tsvb.annotationsEditor.ignorePanelFiltersLabel"
+                    defaultMessage="Ignore panel filters?"
+                  />
+                </EuiFormLabel>
                 <EuiSpacer size="s" />
                 <YesNo
                   value={model.ignore_panel_filters}
@@ -163,7 +187,13 @@ class AnnotationsEditor extends Component {
 
             <EuiFlexGroup responsive={false} wrap={true} gutterSize="m">
               <EuiFlexItem>
-                <EuiFormRow id={htmlId('icon')} label="Icon (required)">
+                <EuiFormRow
+                  id={htmlId('icon')}
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.iconLabel"
+                    defaultMessage="Icon (required)"
+                  />)}
+                >
                   <IconSelect
                     value={model.icon}
                     onChange={this.handleChange(model, 'icon')}
@@ -173,7 +203,10 @@ class AnnotationsEditor extends Component {
               <EuiFlexItem>
                 <EuiFormRow
                   id={htmlId('fields')}
-                  label="Fields (required - comma separated paths)"
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.fieldsLabel"
+                    defaultMessage="Fields (required - comma separated paths)"
+                  />)}
                   fullWidth
                 >
                   <EuiFieldText
@@ -186,9 +219,18 @@ class AnnotationsEditor extends Component {
               <EuiFlexItem>
                 <EuiFormRow
                   id={htmlId('rowTemplate')}
-                  label="Row template (required)"
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.rowTemplateLabel"
+                    defaultMessage="Row template (required)"
+                  />)}
                   helpText={
-                    <span>eg. <EuiCode>{'{{field}}'}</EuiCode></span>
+                    <span>
+                      <FormattedMessage
+                        id="tsvb.annotationsEditor.rowTemplateHelpText"
+                        defaultMessage="eg.{rowTemplateExample}"
+                        values={{ rowTemplateExample: (<EuiCode>{'{{field}}'}</EuiCode>) }}
+                      />
+                    </span>
                   }
                   fullWidth
                 >
@@ -222,8 +264,18 @@ class AnnotationsEditor extends Component {
         .bind(null, this.props, newAnnotation);
       content = (
         <EuiText textAlign="center">
-          <p>Click the button below to create an annotation data source.</p>
-          <EuiButton fill onClick={handleAdd}>Add data source</EuiButton>
+          <p>
+            <FormattedMessage
+              id="tsvb.annotationsEditor.howToCreateAnnotationDataSourceDescription"
+              defaultMessage="Click the button below to create an annotation data source."
+            />
+          </p>
+          <EuiButton fill onClick={handleAdd}>
+            <FormattedMessage
+              id="tsvb.annotationsEditor.addDataSourceButtonLabel"
+              defaultMessage="Add data source"
+            />
+          </EuiButton>
         </EuiText>
       );
     } else {
@@ -231,7 +283,12 @@ class AnnotationsEditor extends Component {
       content = (
         <div>
           <EuiTitle size="s">
-            <span>Data sources</span>
+            <span>
+              <FormattedMessage
+                id="tsvb.annotationsEditor.dataSourcesLabel"
+                defaultMessage="Data sources"
+              />
+            </span>
           </EuiTitle>
           <EuiSpacer size="m" />
 
diff --git a/src/core_plugins/metrics/public/components/color_picker.js b/src/core_plugins/metrics/public/components/color_picker.js
index 3458556300079..2bedccb32cdee 100644
--- a/src/core_plugins/metrics/public/components/color_picker.js
+++ b/src/core_plugins/metrics/public/components/color_picker.js
@@ -24,6 +24,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { EuiIconTip, } from '@elastic/eui';
 import Picker from './custom_color_picker';
+import { injectI18n } from '@kbn/i18n/react';
 
 class ColorPicker extends Component {
 
@@ -65,7 +66,10 @@ class ColorPicker extends Component {
     if (!this.props.value) {
       return (
         <button
-          aria-label="Color picker, not accessible"
+          aria-label={this.props.intl.formatMessage({
+            id: 'tsvb.colorPicker.notAccessibleAriaLabel',
+            defaultMessage: 'Color picker, not accessible'
+          })}
           className="tvbColorPicker__swatch-empty"
           onClick={this.handleClick}
         />
@@ -73,7 +77,11 @@ class ColorPicker extends Component {
     }
     return (
       <button
-        aria-label={`Color picker ({this.props.value}), not accessible`}
+        aria-label={this.props.intl.formatMessage({
+          id: 'tsvb.colorPicker.notAccessibleWithValueAriaLabel',
+          defaultMessage: 'Color picker ({value}), not accessible' }, {
+          value: this.props.value
+        })}
         style={{ backgroundColor: this.props.value }}
         className="tvbColorPicker__swatch"
         onClick={this.handleClick}
@@ -88,7 +96,15 @@ class ColorPicker extends Component {
     if (!this.props.disableTrash) {
       clear = (
         <div className="tvbColorPicker__clear" onClick={this.handleClear}>
-          <EuiIconTip size="s" type="cross" color="danger" content="Clear" />
+          <EuiIconTip
+            size="s"
+            type="cross"
+            color="danger"
+            content={this.props.intl.formatMessage({
+              id: 'tsvb.colorPicker.clearIconLabel',
+              defaultMessage: 'Clear'
+            })}
+          />
         </div>
       );
     }
@@ -124,4 +140,4 @@ ColorPicker.propTypes = {
   onChange: PropTypes.func
 };
 
-export default ColorPicker;
+export default injectI18n(ColorPicker);
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
index 9533ef642a8ae..baaae852b1111 100644
--- a/src/core_plugins/metrics/public/components/color_rules.js
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -31,6 +31,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 class ColorRules extends Component {
 
@@ -55,11 +57,15 @@ class ColorRules extends Component {
     const model = { ...defaults, ...row };
     const handleAdd = collectionActions.handleAdd.bind(null, this.props);
     const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
+    const { intl } = this.props;
     const operatorOptions = [
-      { label: '> greater than', value: 'gt' },
-      { label: '>= greater than or equal', value: 'gte' },
-      { label: '< less than', value: 'lt' },
-      { label: '<= less than or equal', value: 'lte' },
+      { label: intl.formatMessage({ id: 'tsvb.colorRules.greaterThanLabel', defaultMessage: '> greater than' }), value: 'gt' },
+      {
+        label: intl.formatMessage({ id: 'tsvb.colorRules.greaterThanOrEqualLabel', defaultMessage: '>= greater than or equal' }),
+        value: 'gte'
+      },
+      { label: intl.formatMessage({ id: 'tsvb.colorRules.lessThanLabel', defaultMessage: '< less than' }), value: 'lt' },
+      { label: intl.formatMessage({ id: 'tsvb.colorRules.lessThanOrEqualLabel', defaultMessage: '<= less than or equal' }), value: 'lte' },
     ];
     const handleColorChange = (part) => {
       const handleChange = collectionActions.handleChange.bind(null, this.props);
@@ -77,7 +83,15 @@ class ColorRules extends Component {
       secondary = (
         <Fragment>
           <EuiFlexItem grow={false}>
-            <EuiFormLabel style={labelStyle}>and {this.props.secondaryName} to</EuiFormLabel>
+            <EuiFormLabel style={labelStyle}>
+              <FormattedMessage
+                id="tsvb.colorRules.setSecondaryColorLabel"
+                defaultMessage="and {secondaryName} to"
+                values={{ secondaryName: this.props.secondaryName }}
+                description="Part of a larger string: Set {primaryName} to {color} and {secondaryName} to {color} if
+                metric is {greaterOrLessThan} {value}."
+              />
+            </EuiFormLabel>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ColorPicker
@@ -92,7 +106,15 @@ class ColorRules extends Component {
     return (
       <EuiFlexGroup wrap={true} responsive={false} gutterSize="s" key={model.id} alignItems="center" className="tvbColorRules__rule">
         <EuiFlexItem grow={false}>
-          <EuiFormLabel style={labelStyle}>Set {this.props.primaryName} to</EuiFormLabel>
+          <EuiFormLabel style={labelStyle}>
+            <FormattedMessage
+              id="tsvb.colorRules.setPrimaryColorLabel"
+              defaultMessage="Set {primaryName} to"
+              values={{ primaryName: this.props.primaryName }}
+              description="Part of a larger string: Set {primaryName} to {color} and {secondaryName} to {color} if
+              metric is {greaterOrLessThan} {value}."
+            />
+          </EuiFormLabel>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <ColorPicker
@@ -105,7 +127,14 @@ class ColorRules extends Component {
         { secondary }
 
         <EuiFlexItem grow={false}>
-          <EuiFormLabel style={labelStyle} htmlFor={htmlId('ifMetricIs')}>if metric is</EuiFormLabel>
+          <EuiFormLabel style={labelStyle} htmlFor={htmlId('ifMetricIs')}>
+            <FormattedMessage
+              id="tsvb.colorRules.ifMetricIsLabel"
+              defaultMessage="if metric is"
+              description="Part of a larger string: Set {primaryName} to {color} and {secondaryName} to {color} if
+              metric is {greaterOrLessThan} {value}."
+            />
+          </EuiFormLabel>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiComboBox
@@ -120,7 +149,7 @@ class ColorRules extends Component {
 
         <EuiFlexItem>
           <EuiFieldNumber
-            aria-label="Value"
+            aria-label={intl.formatMessage({ id: 'tsvb.colorRules.valueAriaLabel', defaultMessage: 'Value' })}
             value={model.value}
             onChange={this.handleChange(model, 'value', Number)}
             fullWidth
@@ -154,9 +183,9 @@ class ColorRules extends Component {
 
 ColorRules.defaultProps = {
   name: 'color_rules',
-  primaryName: 'background',
+  primaryName: i18n.translate('tsvb.colorRules.defaultPrimaryNameLabel', { defaultMessage: 'background' }),
   primaryVarName: 'background_color',
-  secondaryName: 'text',
+  secondaryName: i18n.translate('tsvb.colorRules.defaultSecondaryNameLabel', { defaultMessage: 'text' }),
   secondaryVarName: 'color',
   hideSecondary: false
 };
@@ -172,4 +201,4 @@ ColorRules.propTypes = {
   hideSecondary: PropTypes.bool
 };
 
-export default ColorRules;
+export default injectI18n(ColorRules);
diff --git a/src/core_plugins/metrics/public/components/data_format_picker.js b/src/core_plugins/metrics/public/components/data_format_picker.js
index 460f52920be05..328c98de41e45 100644
--- a/src/core_plugins/metrics/public/components/data_format_picker.js
+++ b/src/core_plugins/metrics/public/components/data_format_picker.js
@@ -24,6 +24,8 @@ import {
   htmlIdGenerator, EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFieldText, EuiLink,
 } from '@elastic/eui';
 import { durationOutputOptions, durationInputOptions } from './lib/durations';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 const durationFormatTest = /[pnumshdwMY]+,[pnumshdwMY]+/;
 
 class DataFormatPicker extends Component {
@@ -100,12 +102,13 @@ class DataFormatPicker extends Component {
     if (durationFormatTest.test(value)) {
       defaultValue = 'duration';
     }
+    const { intl } = this.props;
     const options = [
-      { label: 'Bytes', value: 'bytes' },
-      { label: 'Number', value: 'number' },
-      { label: 'Percent', value: 'percent' },
-      { label: 'Duration', value: 'duration' },
-      { label: 'Custom', value: 'custom' }
+      { label: intl.formatMessage({ id: 'tsvb.dataFormatPicker.bytesLabel', defaultMessage: 'Bytes' }), value: 'bytes' },
+      { label: intl.formatMessage({ id: 'tsvb.dataFormatPicker.numberLabel', defaultMessage: 'Number' }), value: 'number' },
+      { label: intl.formatMessage({ id: 'tsvb.dataFormatPicker.percentLabel', defaultMessage: 'Percent' }), value: 'percent' },
+      { label: intl.formatMessage({ id: 'tsvb.dataFormatPicker.durationLabel', defaultMessage: 'Duration' }), value: 'duration' },
+      { label: intl.formatMessage({ id: 'tsvb.dataFormatPicker.customLabel', defaultMessage: 'Custom' }), value: 'custom' }
     ];
     const selectedOption = options.find(option => {
       return defaultValue === option.value;
@@ -134,7 +137,13 @@ class DataFormatPicker extends Component {
             </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow id={htmlId('from')} label="From">
+            <EuiFormRow
+              id={htmlId('from')}
+              label={(<FormattedMessage
+                id="tsvb.dataFormatPicker.fromLabel"
+                defaultMessage="From"
+              />)}
+            >
               <EuiComboBox
                 isClearable={false}
                 options={durationInputOptions}
@@ -145,7 +154,13 @@ class DataFormatPicker extends Component {
             </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow id={htmlId('to')} label="To">
+            <EuiFormRow
+              id={htmlId('to')}
+              label={(<FormattedMessage
+                id="tsvb.dataFormatPicker.toLabel"
+                defaultMessage="To"
+              />)}
+            >
               <EuiComboBox
                 isClearable={false}
                 options={durationOutputOptions}
@@ -156,7 +171,13 @@ class DataFormatPicker extends Component {
             </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow id={htmlId('decimal')} label="Decimal places">
+            <EuiFormRow
+              id={htmlId('decimal')}
+              label={(<FormattedMessage
+                id="tsvb.dataFormatPicker.decimalPlacesLabel"
+                defaultMessage="Decimal places"
+              />)}
+            >
               <EuiFieldText
                 defaultValue={decimals}
                 inputRef={(el) => this.decimals = el}
@@ -171,9 +192,18 @@ class DataFormatPicker extends Component {
       custom = (
         <EuiFlexItem grow={false}>
           <EuiFormRow
-            label="Format string"
+            label={(<FormattedMessage
+              id="tsvb.dataFormatPicker.formatStringLabel"
+              defaultMessage="Format string"
+            />)}
             helpText={
-              <span>See <EuiLink href="http://numeraljs.com/#format" target="_BLANK">Numeral.js</EuiLink></span>
+              <span>
+                <FormattedMessage
+                  id="tsvb.dataFormatPicker.formatStringHelpText"
+                  defaultMessage="See {numeralJsLink}"
+                  values={{ numeralJsLink: (<EuiLink href="http://numeraljs.com/#format" target="_BLANK">Numeral.js</EuiLink>) }}
+                />
+              </span>
             }
           >
             <EuiFieldText
@@ -206,7 +236,7 @@ class DataFormatPicker extends Component {
 }
 
 DataFormatPicker.defaultProps = {
-  label: 'Data Formatter'
+  label: i18n.translate('tsvb.defaultDataFormatterLabel', { defaultMessage: 'Data Formatter' })
 };
 
 DataFormatPicker.propTypes = {
@@ -215,4 +245,4 @@ DataFormatPicker.propTypes = {
   onChange: PropTypes.func
 };
 
-export default DataFormatPicker;
+export default injectI18n(DataFormatPicker);
diff --git a/src/core_plugins/metrics/public/components/error.js b/src/core_plugins/metrics/public/components/error.js
index eddcdf9d47c4b..eef0a6d841705 100644
--- a/src/core_plugins/metrics/public/components/error.js
+++ b/src/core_plugins/metrics/public/components/error.js
@@ -20,6 +20,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 function ErrorComponent(props) {
   const { error } = props;
@@ -51,7 +52,13 @@ function ErrorComponent(props) {
 
   return (
     <div className="tvbError">
-      <div className="tvbError__title">{title || 'The request for this panel failed'}</div>
+      <div className="tvbError__title">
+        {title ||
+        <FormattedMessage
+          id="tsvb.error.requestForPanelFailedErrorMessage"
+          defaultMessage="The request for this panel failed"
+        />}
+      </div>
       {additionalInfo}
     </div>
   );
diff --git a/src/core_plugins/metrics/public/components/icon_select.js b/src/core_plugins/metrics/public/components/icon_select.js
index 576f62d2ad5dc..28a9d6bec2070 100644
--- a/src/core_plugins/metrics/public/components/icon_select.js
+++ b/src/core_plugins/metrics/public/components/icon_select.js
@@ -22,6 +22,7 @@ import React from 'react';
 import {
   EuiComboBox,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 function renderOption(option) {
   const icon = option.value;
@@ -53,21 +54,27 @@ function IconSelect(props) {
 
 IconSelect.defaultProps = {
   icons: [
-    { value: 'fa-asterisk', label: 'Asterisk' },
-    { value: 'fa-bell', label: 'Bell' },
-    { value: 'fa-bolt', label: 'Bolt' },
-    { value: 'fa-bomb', label: 'Bomb' },
-    { value: 'fa-bug', label: 'Bug' },
-    { value: 'fa-comment', label: 'Comment' },
-    { value: 'fa-exclamation-circle', label: 'Exclamation Circle' },
-    { value: 'fa-exclamation-triangle', label: 'Exclamation Triangle' },
-    { value: 'fa-fire', label: 'Fire' },
-    { value: 'fa-flag', label: 'Flag' },
-    { value: 'fa-heart', label: 'Heart' },
-    { value: 'fa-map-marker', label: 'Map Marker' },
-    { value: 'fa-map-pin', label: 'Map Pin' },
-    { value: 'fa-star', label: 'Star' },
-    { value: 'fa-tag', label: 'Tag' },
+    { value: 'fa-asterisk', label: i18n.translate('tsvb.iconSelect.asteriskLabel', { defaultMessage: 'Asterisk' }) },
+    { value: 'fa-bell', label: i18n.translate('tsvb.iconSelect.bellLabel', { defaultMessage: 'Bell' }) },
+    { value: 'fa-bolt', label: i18n.translate('tsvb.iconSelect.boltLabel', { defaultMessage: 'Bolt' }) },
+    { value: 'fa-bomb', label: i18n.translate('tsvb.iconSelect.bombLabel', { defaultMessage: 'Bomb' }) },
+    { value: 'fa-bug', label: i18n.translate('tsvb.iconSelect.bugLabel', { defaultMessage: 'Bug' }) },
+    { value: 'fa-comment', label: i18n.translate('tsvb.iconSelect.commentLabel', { defaultMessage: 'Comment' }) },
+    {
+      value: 'fa-exclamation-circle',
+      label: i18n.translate('tsvb.iconSelect.exclamationCircleLabel', { defaultMessage: 'Exclamation Circle' })
+    },
+    {
+      value: 'fa-exclamation-triangle',
+      label: i18n.translate('tsvb.iconSelect.exclamationTriangleLabel', { defaultMessage: 'Exclamation Triangle' })
+    },
+    { value: 'fa-fire', label: i18n.translate('tsvb.iconSelect.fireLabel', { defaultMessage: 'Fire' }) },
+    { value: 'fa-flag', label: i18n.translate('tsvb.iconSelect.flagLabel', { defaultMessage: 'Flag' }) },
+    { value: 'fa-heart', label: i18n.translate('tsvb.iconSelect.heartLabel', { defaultMessage: 'Heart' }) },
+    { value: 'fa-map-marker', label: i18n.translate('tsvb.iconSelect.mapMarkerLabel', { defaultMessage: 'Map Marker' }) },
+    { value: 'fa-map-pin', label: i18n.translate('tsvb.iconSelect.mapPinLabel', { defaultMessage: 'Map Pin' }) },
+    { value: 'fa-star', label: i18n.translate('tsvb.iconSelect.starLabel', { defaultMessage: 'Star' }) },
+    { value: 'fa-tag', label: i18n.translate('tsvb.iconSelect.tagLabel', { defaultMessage: 'Tag' }) },
   ]
 };
 
diff --git a/src/core_plugins/metrics/public/components/index_pattern.js b/src/core_plugins/metrics/public/components/index_pattern.js
index 15712513f416b..dc456026acb5a 100644
--- a/src/core_plugins/metrics/public/components/index_pattern.js
+++ b/src/core_plugins/metrics/public/components/index_pattern.js
@@ -32,6 +32,7 @@ import {
   EuiFormLabel,
   EuiSpacer,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export const IndexPattern = props => {
   const { fields, prefix } = props;
@@ -57,7 +58,10 @@ export const IndexPattern = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('indexPattern')}
-            label="Index pattern"
+            label={(<FormattedMessage
+              id="tsvb.indexPatternLabel"
+              defaultMessage="Index pattern"
+            />)}
             fullWidth
           >
             <EuiFieldText
@@ -72,7 +76,10 @@ export const IndexPattern = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('timeField')}
-            label="Time field"
+            label={(<FormattedMessage
+              id="tsvb.indexPattern.timeFieldLabel"
+              defaultMessage="Time field"
+            />)}
             fullWidth
           >
             <FieldSelect
@@ -90,8 +97,15 @@ export const IndexPattern = props => {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('interval')}
-            label="Interval"
-            helpText="Examples: auto, 1m, 1d, 7d, 1y, >=1m"
+            label={(<FormattedMessage
+              id="tsvb.indexPattern.intervalLabel"
+              defaultMessage="Interval"
+            />)}
+            helpText={(<FormattedMessage
+              id="tsvb.indexPattern.intervalHelpText"
+              defaultMessage="Examples: auto, 1m, 1d, 7d, 1y, >=1m"
+              description="auto, 1m, 1d, 7d, 1y, >=1m are required values and must not be translated."
+            />)}
           >
             <EuiFieldText
               disabled={props.disabled}
@@ -101,7 +115,12 @@ export const IndexPattern = props => {
           </EuiFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFormLabel>Drop last bucket?</EuiFormLabel>
+          <EuiFormLabel>
+            <FormattedMessage
+              id="tsvb.indexPattern.dropLastBucketLabel"
+              defaultMessage="Drop last bucket?"
+            />
+          </EuiFormLabel>
           <EuiSpacer size="s" />
           <YesNo
             value={model[dropBucketName]}
diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
index d5061810b59ac..f00d7c1b80db1 100644
--- a/src/core_plugins/metrics/public/components/markdown_editor.js
+++ b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -38,6 +38,8 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { FormattedMessage } from '@kbn/i18n/react';
+
 class MarkdownEditor extends Component {
   state = {
     visData: null,
@@ -150,18 +152,38 @@ class MarkdownEditor extends Component {
         <div className="tvbMarkdownEditor__variables">
           <EuiText>
             <p>
-              The following variables can be used in the Markdown by using the Handlebar (mustache) syntax.{' '}
-              <a href="http://handlebarsjs.com/expressions.html" target="_BLANK">
-                Click here for documentation
-              </a>{' '}
-              on the available expressions.
+              <FormattedMessage
+                id="tsvb.markdownEditor.howToUseVariablesInMarkdownDescription"
+                defaultMessage="The following variables can be used in the Markdown by using the Handlebar (mustache) syntax.
+                {handlebarLink} on the available expressions."
+                values={{
+                  handlebarLink: (
+                    <a href="http://handlebarsjs.com/expressions.html" target="_BLANK">
+                      <FormattedMessage
+                        id="tsvb.markdownEditor.howUseVariablesInMarkdownDescription.documentationLinkText"
+                        defaultMessage="Click here for documentation"
+                      />
+                    </a>
+                  )
+                }}
+              />
             </p>
           </EuiText>
           <table className="table">
             <thead>
               <tr>
-                <th scope="col">Name</th>
-                <th scope="col">Value</th>
+                <th scope="col">
+                  <FormattedMessage
+                    id="tsvb.markdownEditor.nameLabel"
+                    defaultMessage="Name"
+                  />
+                </th>
+                <th scope="col">
+                  <FormattedMessage
+                    id="tsvb.markdownEditor.valueLabel"
+                    defaultMessage="Value"
+                  />
+                </th>
               </tr>
             </thead>
             <tbody>{rows}</tbody>
@@ -169,7 +191,12 @@ class MarkdownEditor extends Component {
 
           {rows.length === 0 && (
             <EuiTitle size="xxs" className="tvbMarkdownEditor__noVariables">
-              <span>No variables available for the selected data metrics.</span>
+              <span>
+                <FormattedMessage
+                  id="tsvb.markdownEditor.noVariablesAvailableDescription"
+                  defaultMessage="No variables available for the selected data metrics."
+                />
+              </span>
             </EuiTitle>
           )}
 
@@ -177,8 +204,12 @@ class MarkdownEditor extends Component {
 
           <EuiText>
             <p>
-              There is also a special variable named <code>_all</code> which you can use to access the entire tree. This is useful for
-              creating lists with data from a group by...
+              <FormattedMessage
+                id="tsvb.markdownEditor.howToAccessEntireTreeDescription"
+                defaultMessage="There is also a special variable named {all} which you can use to access the entire tree. This is useful for
+                creating lists with data from a group by…"
+                values={{ all: (<code>_all</code>) }}
+              />
             </p>
           </EuiText>
 
diff --git a/src/core_plugins/metrics/public/components/no_data.js b/src/core_plugins/metrics/public/components/no_data.js
index 579d87076fe05..4a7d62294bc6c 100644
--- a/src/core_plugins/metrics/public/components/no_data.js
+++ b/src/core_plugins/metrics/public/components/no_data.js
@@ -18,11 +18,17 @@
  */
 
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 function NoDataComponent() {
   return (
     <div className="tvbNoData" data-test-subj="noTSVBDataMessage">
-      <div className="tvbNoData__title">No data to display for the selected metrics</div>
+      <div className="tvbNoData__title">
+        <FormattedMessage
+          id="tsvb.noDataDescription"
+          defaultMessage="No data to display for the selected metrics"
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/core_plugins/metrics/public/components/panel_config.js b/src/core_plugins/metrics/public/components/panel_config.js
index 91c9449276083..c45c83d5644c2 100644
--- a/src/core_plugins/metrics/public/components/panel_config.js
+++ b/src/core_plugins/metrics/public/components/panel_config.js
@@ -25,6 +25,7 @@ import topN from './panel_config/top_n';
 import table from './panel_config/table';
 import gauge from './panel_config/gauge';
 import markdown from './panel_config/markdown';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 const types = {
   timeseries,
@@ -41,7 +42,14 @@ function PanelConfig(props) {
   if (component) {
     return React.createElement(component, props);
   }
-  return (<div>Missing panel config for &ldquo;{model.type}&rdquo;</div>);
+  return (
+    <div>
+      <FormattedMessage
+        id="tsvb.missingPanelConfigDescription"
+        defaultMessage="Missing panel config for &ldquo;{modelType}&rdquo;"
+        values={{ modelType: model.type }}
+      />
+    </div>);
 }
 
 PanelConfig.propTypes = {
diff --git a/src/core_plugins/metrics/public/components/series.js b/src/core_plugins/metrics/public/components/series.js
index 9cec7b7eace1d..fba1a69e1cc72 100644
--- a/src/core_plugins/metrics/public/components/series.js
+++ b/src/core_plugins/metrics/public/components/series.js
@@ -28,6 +28,7 @@ import table from './vis_types/table/series';
 import gauge from './vis_types/gauge/series';
 import markdown from './vis_types/markdown/series';
 import { sortable } from 'react-anything-sortable';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 const lookup = {
   top_n: topN,
@@ -98,7 +99,15 @@ class Series extends Component {
       };
       return (<Component {...params}/>);
     }
-    return (<div>Missing Series component for panel type: {panel.type}</div>);
+    return (
+      <div>
+        <FormattedMessage
+          id="tsvb.seriesConfig.missingSeriesComponentDescription"
+          defaultMessage="Missing Series component for panel type: {panelType}"
+          values={{ panelType: panel.type }}
+        />
+      </div>
+    );
   }
 
 }
diff --git a/src/core_plugins/metrics/public/components/series_config.js b/src/core_plugins/metrics/public/components/series_config.js
index ba46b589f1a04..989a59a21a4a1 100644
--- a/src/core_plugins/metrics/public/components/series_config.js
+++ b/src/core_plugins/metrics/public/components/series_config.js
@@ -35,6 +35,7 @@ import {
   EuiFormLabel,
   EuiSpacer,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export const SeriesConfig = props => {
   const defaults = { offset_time: '', value_template: '' };
@@ -55,7 +56,10 @@ export const SeriesConfig = props => {
 
       <EuiFormRow
         id={htmlId('series_filter')}
-        label="Filter"
+        label={(<FormattedMessage
+          id="tsvb.seriesConfig.filterLabel"
+          defaultMessage="Filter"
+        />)}
         fullWidth
       >
         <EuiFieldText
@@ -71,8 +75,19 @@ export const SeriesConfig = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('template')}
-            label="Template"
-            helpText={<span>eg.<EuiCode>{'{{value}}/s'}</EuiCode></span>}
+            label={(<FormattedMessage
+              id="tsvb.seriesConfig.templateLabel"
+              defaultMessage="Template"
+            />)}
+            helpText={(
+              <span>
+                <FormattedMessage
+                  id="tsvb.seriesConfig.templateHelpText"
+                  defaultMessage="eg. {templateExample}"
+                  values={{ templateExample: (<EuiCode>{'{{value}}/s'}</EuiCode>) }}
+                />
+              </span>
+            )}
             fullWidth
           >
             <EuiFieldText
@@ -85,7 +100,11 @@ export const SeriesConfig = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('offsetSeries')}
-            label="Offset series time by (1m, 1h, 1w, 1d)"
+            label={(<FormattedMessage
+              id="tsvb.seriesConfig.offsetSeriesTimeLabel"
+              defaultMessage="Offset series time by (1m, 1h, 1w, 1d)"
+              description="1m, 1h, 1w and 1d are required values and must not be translated."
+            />)}
           >
             <EuiFieldText
               data-test-subj="offsetTimeSeries"
@@ -100,7 +119,12 @@ export const SeriesConfig = props => {
 
       <EuiFlexGroup gutterSize="s" responsive={false} wrap={true}>
         <EuiFlexItem grow={false}>
-          <EuiFormLabel>Override Index Pattern?</EuiFormLabel>
+          <EuiFormLabel>
+            <FormattedMessage
+              id="tsvb.seriesConfig.overrideIndexPatternLabel"
+              defaultMessage="Override Index Pattern?"
+            />
+          </EuiFormLabel>
           <EuiSpacer size="s" />
           <YesNo
             value={model.override_index_pattern}
diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
index b217446f81056..9b2cfedd3f30f 100644
--- a/src/core_plugins/metrics/public/components/vis_editor.js
+++ b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -30,6 +30,7 @@ import { get } from 'lodash';
 import { extractIndexPatterns } from '../lib/extract_index_patterns';
 import { fetchFields } from '../lib/fetch_fields';
 import chrome from 'ui/chrome';
+import { I18nProvider } from '@kbn/i18n/react';
 
 class VisEditor extends Component {
   constructor(props) {
@@ -131,17 +132,19 @@ class VisEditor extends Component {
       }
       const reversed = this.state.reversed;
       return (
-        <Visualization
-          dateFormat={this.props.config.get('dateFormat')}
-          reversed={reversed}
-          onBrush={this.onBrush}
-          onUiState={this.handleUiState}
-          uiState={this.props.vis.getUiState()}
-          fields={this.state.visFields}
-          model={this.props.vis.params}
-          visData={this.props.visData}
-          getConfig={this.getConfig}
-        />
+        <I18nProvider>
+          <Visualization
+            dateFormat={this.props.config.get('dateFormat')}
+            reversed={reversed}
+            onBrush={this.onBrush}
+            onUiState={this.handleUiState}
+            uiState={this.props.vis.getUiState()}
+            fields={this.state.visFields}
+            model={this.props.vis.params}
+            visData={this.props.visData}
+            getConfig={this.getConfig}
+          />
+        </I18nProvider>
       );
     }
 
diff --git a/src/core_plugins/metrics/public/components/vis_editor_visualization.js b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
index 278265769b772..eac9a9e99b849 100644
--- a/src/core_plugins/metrics/public/components/vis_editor_visualization.js
+++ b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { keyCodes, EuiFlexGroup, EuiFlexItem, EuiButton, EuiText, EuiSwitch } from '@elastic/eui';
 import { getVisualizeLoader } from 'ui/visualize/loader/visualize_loader';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 const MIN_CHART_HEIGHT = 250;
 
@@ -140,15 +141,31 @@ class VisEditorVisualization extends Component {
       style.userSelect = 'none';
     }
 
-    let applyMessage = 'The latest changes have been applied.';
-    if (dirty) applyMessage = 'The changes to this visualization have not been applied.';
-    if (autoApply) applyMessage = 'The changes will be automatically applied.';
+    let applyMessage = (<FormattedMessage
+      id="tsvb.visEditorVisualization.changesSuccessfullyAppliedMessage"
+      defaultMessage="The latest changes have been applied."
+    />);
+    if (dirty) {
+      applyMessage = (<FormattedMessage
+        id="tsvb.visEditorVisualization.changesHaveNotBeenAppliedMessage"
+        defaultMessage="The changes to this visualization have not been applied."
+      />);
+    }
+    if (autoApply) {
+      applyMessage = (<FormattedMessage
+        id="tsvb.visEditorVisualization.changesWillBeAutomaticallyAppliedMessage"
+        defaultMessage="The changes will be automatically applied."
+      />);
+    }
     const applyButton = (
       <EuiFlexGroup className="tvbEditorVisualization__apply" alignItems="center">
         <EuiFlexItem grow={true}>
           <EuiSwitch
             id="tsvbAutoApplyInput"
-            label="Auto apply"
+            label={(<FormattedMessage
+              id="tsvb.visEditorVisualization.autoApplyLabel"
+              defaultMessage="Auto apply"
+            />)}
             checked={autoApply}
             onChange={this.props.onToggleAutoApply}
           />
@@ -164,7 +181,12 @@ class VisEditorVisualization extends Component {
 
         {!autoApply &&
           <EuiFlexItem grow={false}>
-            <EuiButton iconType="play" fill size="s" onClick={this.props.onCommit} disabled={!dirty}>Apply changes</EuiButton>
+            <EuiButton iconType="play" fill size="s" onClick={this.props.onCommit} disabled={!dirty}>
+              <FormattedMessage
+                id="tsvb.visEditorVisualization.applyChangesLabel"
+                defaultMessage="Apply changes"
+              />
+            </EuiButton>
           </EuiFlexItem>
         }
       </EuiFlexGroup>
@@ -189,7 +211,10 @@ class VisEditorVisualization extends Component {
             onMouseDown={this.handleMouseDown}
             onMouseUp={this.handleMouseUp}
             onKeyDown={this.onSizeHandleKeyDown}
-            aria-label="Press up/down to adjust the chart size"
+            aria-label={this.props.intl.formatMessage({
+              id: 'tsvb.colorRules.adjustChartSizeAriaLabel',
+              defaultMessage: 'Press up/down to adjust the chart size'
+            })}
           >
             <i className="fa fa-ellipsis-h" />
           </button>
@@ -215,4 +240,4 @@ VisEditorVisualization.propTypes = {
   appState: PropTypes.object,
 };
 
-export default VisEditorVisualization;
+export default injectI18n(VisEditorVisualization);
diff --git a/src/core_plugins/metrics/public/components/vis_editor_visualization.test.js b/src/core_plugins/metrics/public/components/vis_editor_visualization.test.js
index 15b6666207f73..146afeb07605d 100644
--- a/src/core_plugins/metrics/public/components/vis_editor_visualization.test.js
+++ b/src/core_plugins/metrics/public/components/vis_editor_visualization.test.js
@@ -20,7 +20,7 @@
 jest.mock('ui/visualize/loader/visualize_loader', () => ({}));
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import VisEditorVisualization from './vis_editor_visualization';
 
 describe('getVisualizeLoader', () => {
@@ -45,7 +45,7 @@ describe('getVisualizeLoader', () => {
   });
 
   it('should not call _handler.update until getVisualizeLoader returns _handler', async () => {
-    const wrapper = mount(
+    const wrapper = mountWithIntl(
       <VisEditorVisualization />
     );
 
diff --git a/src/core_plugins/metrics/public/components/vis_picker.js b/src/core_plugins/metrics/public/components/vis_picker.js
index 22579125837a3..d58fa8cfd43a2 100644
--- a/src/core_plugins/metrics/public/components/vis_picker.js
+++ b/src/core_plugins/metrics/public/components/vis_picker.js
@@ -20,6 +20,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { EuiTabs, EuiTab } from '@elastic/eui';
+import { injectI18n } from '@kbn/i18n/react';
 
 function VisPickerItem(props) {
   const { label, type, selected } = props;
@@ -44,19 +45,19 @@ VisPickerItem.propTypes = {
   selected: PropTypes.bool
 };
 
-function VisPicker(props) {
+const VisPicker = injectI18n(function (props) {
   const handleChange = (type) => {
     props.onChange({ type });
   };
 
-  const { model } = props;
+  const { model, intl } = props;
   const tabs = [
-    { type: 'timeseries', label: 'Time Series' },
-    { type: 'metric', label: 'Metric' },
-    { type: 'top_n', label: 'Top N' },
-    { type: 'gauge', label: 'Gauge' },
-    { type: 'markdown', label: 'Markdown' },
-    { type: 'table', label: 'Table' }
+    { type: 'timeseries', label: intl.formatMessage({ id: 'tsvb.visPicker.timeSeriesLabel', defaultMessage: 'Time Series' }) },
+    { type: 'metric', label: intl.formatMessage({ id: 'tsvb.visPicker.metricLabel', defaultMessage: 'Metric' }) },
+    { type: 'top_n', label: intl.formatMessage({ id: 'tsvb.visPicker.topNLabel', defaultMessage: 'Top N' }) },
+    { type: 'gauge', label: intl.formatMessage({ id: 'tsvb.visPicker.gaugeLabel', defaultMessage: 'Gauge' }) },
+    { type: 'markdown', label: intl.formatMessage({ id: 'tsvb.visPicker.markdownLabel', defaultMessage: 'Markdown' }) },
+    { type: 'table', label: intl.formatMessage({ id: 'tsvb.visPicker.tableLabel', defaultMessage: 'Table' }) }
   ].map(item => {
     return (
       <VisPickerItem
@@ -74,7 +75,7 @@ function VisPicker(props) {
     </EuiTabs>
   );
 
-}
+});
 
 VisPicker.propTypes = {
   model: PropTypes.object,
diff --git a/src/core_plugins/metrics/public/components/vis_types/table/config.js b/src/core_plugins/metrics/public/components/vis_types/table/config.js
index 324bc89d4dc86..c0d20467d66dc 100644
--- a/src/core_plugins/metrics/public/components/vis_types/table/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/table/config.js
@@ -39,6 +39,7 @@ import {
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 class TableSeriesConfig extends Component {
 
@@ -57,17 +58,18 @@ class TableSeriesConfig extends Component {
     const handleSelectChange = createSelectHandler(this.props.onChange);
     const handleTextChange = createTextHandler(this.props.onChange);
     const htmlId = htmlIdGenerator();
+    const { intl } = this.props;
 
     const functionOptions = [
-      { label: 'Sum', value: 'sum' },
-      { label: 'Max', value: 'max' },
-      { label: 'Min', value: 'min' },
-      { label: 'Avg', value: 'mean' },
-      { label: 'Overall Sum', value: 'overall_sum' },
-      { label: 'Overall Max', value: 'overall_max' },
-      { label: 'Overall Min', value: 'overall_min' },
-      { label: 'Overall Avg', value: 'overall_avg' },
-      { label: 'Cumulative Sum', value: 'cumulative_sum' },
+      { label: intl.formatMessage({ id: 'tsvb.table.sumLabel', defaultMessage: 'Sum' }), value: 'sum' },
+      { label: intl.formatMessage({ id: 'tsvb.table.maxLabel', defaultMessage: 'Max' }), value: 'max' },
+      { label: intl.formatMessage({ id: 'tsvb.table.minLabel', defaultMessage: 'Min' }), value: 'min' },
+      { label: intl.formatMessage({ id: 'tsvb.table.avgLabel', defaultMessage: 'Avg' }), value: 'mean' },
+      { label: intl.formatMessage({ id: 'tsvb.table.overallSumLabel', defaultMessage: 'Overall Sum' }), value: 'overall_sum' },
+      { label: intl.formatMessage({ id: 'tsvb.table.overallMaxLabel', defaultMessage: 'Overall Max' }), value: 'overall_max' },
+      { label: intl.formatMessage({ id: 'tsvb.table.overallMinLabel', defaultMessage: 'Overall Min' }), value: 'overall_min' },
+      { label: intl.formatMessage({ id: 'tsvb.table.overallAvgLabel', defaultMessage: 'Overall Avg' }), value: 'overall_avg' },
+      { label: intl.formatMessage({ id: 'tsvb.table.cumulativeSumLabel', defaultMessage: 'Cumulative Sum' }), value: 'cumulative_sum' },
     ];
     const selectedAggFuncOption = functionOptions.find(option => {
       return model.aggregate_function === option.value;
@@ -86,8 +88,19 @@ class TableSeriesConfig extends Component {
           <EuiFlexItem>
             <EuiFormRow
               id={htmlId('template')}
-              label="Template"
-              helpText={<span>eg.<EuiCode>{'{{value}}/s'}</EuiCode></span>}
+              label={(<FormattedMessage
+                id="tsvb.table.templateLabel"
+                defaultMessage="Template"
+              />)}
+              helpText={
+                <span>
+                  <FormattedMessage
+                    id="tsvb.table.templateHelpText"
+                    defaultMessage="eg.{templateExample}"
+                    values={{ templateExample: (<EuiCode>{'{{value}}/s'}</EuiCode>) }}
+                  />
+                </span>
+              }
               fullWidth
             >
               <EuiFieldText
@@ -105,7 +118,10 @@ class TableSeriesConfig extends Component {
           <EuiFlexItem grow={true}>
             <EuiFormRow
               id={htmlId('filterInput')}
-              label="Filter"
+              label={(<FormattedMessage
+                id="tsvb.table.filterLabel"
+                defaultMessage="Filter"
+              />)}
               fullWidth
             >
               <EuiFieldText
@@ -116,7 +132,12 @@ class TableSeriesConfig extends Component {
             </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormLabel>Show trend arrows?</EuiFormLabel>
+            <EuiFormLabel>
+              <FormattedMessage
+                id="tsvb.table.showTrendArrowsLabel"
+                defaultMessage="Show trend arrows?"
+              />
+            </EuiFormLabel>
             <EuiSpacer size="s" />
             <YesNo
               value={model.trend_arrows}
@@ -130,7 +151,13 @@ class TableSeriesConfig extends Component {
 
         <EuiFlexGroup responsive={false} wrap={true}>
           <EuiFlexItem grow={true}>
-            <EuiFormRow id={htmlId('field')} label="Field">
+            <EuiFormRow
+              id={htmlId('field')}
+              label={(<FormattedMessage
+                id="tsvb.table.fieldLabel"
+                defaultMessage="Field"
+              />)}
+            >
               <FieldSelect
                 fields={this.props.fields}
                 indexPattern={this.props.panel.index_pattern}
@@ -143,7 +170,10 @@ class TableSeriesConfig extends Component {
           <EuiFlexItem grow={true}>
             <EuiFormRow
               id={htmlId('aggregateFunctionInput')}
-              label="Aggregate function"
+              label={(<FormattedMessage
+                id="tsvb.table.aggregateFunctionLabel"
+                defaultMessage="Aggregate function"
+              />)}
               fullWidth
             >
               <EuiComboBox
@@ -159,7 +189,14 @@ class TableSeriesConfig extends Component {
 
         <EuiHorizontalRule margin="s" />
 
-        <EuiTitle size="xxs"><span>Color rules</span></EuiTitle>
+        <EuiTitle size="xxs">
+          <span>
+            <FormattedMessage
+              id="tsvb.table.colorRulesLabel"
+              defaultMessage="Color rules"
+            />
+          </span>
+        </EuiTitle>
         <EuiSpacer size="s" />
 
         <ColorRules
@@ -182,6 +219,6 @@ TableSeriesConfig.propTypes = {
   onChange: PropTypes.func
 };
 
-export default TableSeriesConfig;
+export default injectI18n(TableSeriesConfig);
 
 
diff --git a/src/core_plugins/metrics/public/components/vis_types/table/series.js b/src/core_plugins/metrics/public/components/vis_types/table/series.js
index 8802f1436d960..f65c15965fc21 100644
--- a/src/core_plugins/metrics/public/components/vis_types/table/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/table/series.js
@@ -26,6 +26,7 @@ import { EuiToolTip, EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, E
 import createTextHandler from '../../lib/create_text_handler';
 import createAggRowRender from '../../lib/create_agg_row_render';
 import { createUpDownHandler } from '../../lib/sort_keyhandler';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 function TopNSeries(props) {
   const {
@@ -36,7 +37,8 @@ function TopNSeries(props) {
     disableDelete,
     disableAdd,
     selectedTab,
-    visible
+    visible,
+    intl
   } = props;
 
   const handleChange = createTextHandler(onChange);
@@ -83,14 +85,20 @@ function TopNSeries(props) {
             isSelected={selectedTab === 'metrics'}
             onClick={() => props.switchTab('metrics')}
           >
-            Metrics
+            <FormattedMessage
+              id="tsvb.table.tab.metricsLabel"
+              defaultMessage="Metrics"
+            />
           </EuiTab>
           <EuiTab
             data-test-subj="seriesOptions"
             isSelected={selectedTab === 'options'}
             onClick={() => props.switchTab('options')}
           >
-            Options
+            <FormattedMessage
+              id="tsvb.table.tab.optionsLabel"
+              defaultMessage="Options"
+            />
           </EuiTab>
         </EuiTabs>
         {seriesBody}
@@ -102,11 +110,16 @@ function TopNSeries(props) {
   if (!props.disableDelete) {
     dragHandle = (
       <EuiFlexItem grow={false}>
-        <EuiToolTip content="Drag to sort">
+        <EuiToolTip
+          content={(<FormattedMessage
+            id="tsvb.table.dragToSortTooltip"
+            defaultMessage="Drag to sort"
+          />)}
+        >
           <EuiButtonIcon
             className="tvbSeries__sortHandle"
             iconType="grab"
-            aria-label="Sort series by pressing up/down"
+            aria-label={intl.formatMessage({ id: 'tsvb.table.dragToSortAriaLabel', defaultMessage: 'Sort series by pressing up/down' })}
             onKeyDown={createUpDownHandler(props.onShouldSortItem)}
           />
         </EuiToolTip>
@@ -127,7 +140,7 @@ function TopNSeries(props) {
             iconType={caretIcon}
             color="text"
             onClick={props.toggleVisible}
-            aria-label="Toggle series editor"
+            aria-label={intl.formatMessage({ id: 'tsvb.table.toggleSeriesEditorAriaLabel', defaultMessage: 'Toggle series editor' })}
             aria-expanded={props.visible}
           />
         </EuiFlexItem>
@@ -135,9 +148,9 @@ function TopNSeries(props) {
         <EuiFlexItem>
           <EuiFieldText
             fullWidth
-            aria-label="Label"
+            aria-label={intl.formatMessage({ id: 'tsvb.table.labelAriaLabel', defaultMessage: 'Label' })}
             onChange={handleChange('label')}
-            placeholder="Label"
+            placeholder={intl.formatMessage({ id: 'tsvb.table.labelPlaceholder', defaultMessage: 'Label' })}
             value={model.label}
           />
         </EuiFlexItem>
@@ -146,9 +159,9 @@ function TopNSeries(props) {
 
         <EuiFlexItem grow={false}>
           <AddDeleteButtons
-            addTooltip="Add Series"
-            deleteTooltip="Delete Series"
-            cloneTooltip="Clone Series"
+            addTooltip={intl.formatMessage({ id: 'tsvb.table.addSeriesTooltip', defaultMessage: 'Add Series' })}
+            deleteTooltip={intl.formatMessage({ id: 'tsvb.table.deleteSeriesTooltip', defaultMessage: 'Delete Series' })}
+            cloneTooltip={intl.formatMessage({ id: 'tsvb.table.cloneSeriesTooltip', defaultMessage: 'Clone Series' })}
             onDelete={onDelete}
             onClone={props.onClone}
             onAdd={onAdd}
@@ -188,4 +201,4 @@ TopNSeries.propTypes = {
   visible: PropTypes.bool
 };
 
-export default TopNSeries;
+export default injectI18n(TopNSeries);
diff --git a/src/core_plugins/metrics/public/components/vis_types/table/vis.js b/src/core_plugins/metrics/public/components/vis_types/table/vis.js
index 223bb7193bc17..26b317f29af54 100644
--- a/src/core_plugins/metrics/public/components/vis_types/table/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/table/vis.js
@@ -25,6 +25,7 @@ import calculateLabel from '../../../../common/calculate_label';
 import { isSortable } from './is_sortable';
 import { EuiToolTip, EuiIcon } from '@elastic/eui';
 import replaceVars from '../../lib/replace_vars';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 function getColor(rules, colorKey, value) {
   let color;
@@ -122,7 +123,14 @@ class TableVis extends Component {
       );
       if (!isSortable(metric)) {
         headerContent = (
-          <EuiToolTip content="This column is not sortable">{headerContent}</EuiToolTip>
+          <EuiToolTip
+            content={(<FormattedMessage
+              id="tsvb.table.columnNotSortableTooltip"
+              defaultMessage="This column is not sortable"
+            />)}
+          >
+            {headerContent}
+          </EuiToolTip>
         );
       }
 
@@ -176,10 +184,15 @@ class TableVis extends Component {
     if (_.isArray(visData.series) && visData.series.length) {
       rows = visData.series.map(this.renderRow);
     } else {
-      let message = 'No results available.';
-      if (!model.pivot_id) {
-        message += ' You must choose a group by field for this visualization.';
-      }
+      const message = model.pivot_id ?
+        (<FormattedMessage
+          id="tsvb.table.noResultsAvailableMessage"
+          defaultMessage="No results available."
+        />)
+        : (<FormattedMessage
+          id="tsvb.table.noResultsAvailableWithDescriptionMessage"
+          defaultMessage="No results available. You must choose a group by field for this visualization."
+        />);
       rows = (
         <tr>
           <td
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
index b615bfae2e3cc..54f4393ba100a 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -37,8 +37,9 @@ import {
   EuiFormLabel,
   EuiSpacer,
 } from '@elastic/eui';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-function TimeseriesConfig(props) {
+const TimeseriesConfig = injectI18n(function (props) {
   const handleSelectChange = createSelectHandler(props.onChange);
   const handleTextChange = createTextHandler(props.onChange);
 
@@ -56,35 +57,36 @@ function TimeseriesConfig(props) {
   };
   const model = { ...defaults, ...props.model };
   const htmlId = htmlIdGenerator();
+  const { intl } = props;
 
   const stackedOptions = [
-    { label: 'None', value: 'none' },
-    { label: 'Stacked', value: 'stacked' },
-    { label: 'Percent', value: 'percent' }
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.noneLabel', defaultMessage: 'None' }), value: 'none' },
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.stackedLabel', defaultMessage: 'Stacked' }), value: 'stacked' },
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.percentLabel', defaultMessage: 'Percent' }), value: 'percent' }
   ];
   const selectedStackedOption = stackedOptions.find(option => {
     return model.stacked === option.value;
   });
 
   const positionOptions = [
-    { label: 'Right', value: 'right' },
-    { label: 'Left', value: 'left' }
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.rightLabel', defaultMessage: 'Right' }), value: 'right' },
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.leftLabel', defaultMessage: 'Left' }), value: 'left' }
   ];
   const selectedAxisPosOption = positionOptions.find(option => {
     return model.axis_position === option.value;
   });
 
   const chartTypeOptions = [
-    { label: 'Bar', value: 'bar' },
-    { label: 'Line', value: 'line' }
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.barLabel', defaultMessage: 'Bar' }), value: 'bar' },
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.lineLabel', defaultMessage: 'Line' }), value: 'line' }
   ];
   const selectedChartTypeOption = chartTypeOptions.find(option => {
     return model.chart_type === option.value;
   });
 
   const splitColorOptions = [
-    { label: 'Gradient', value: 'gradient' },
-    { label: 'Rainbow', value: 'rainbow' }
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.gradientLabel', defaultMessage: 'Gradient' }), value: 'gradient' },
+    { label: intl.formatMessage({ id: 'tsvb.timeSeries.rainbowLabel', defaultMessage: 'Rainbow' }), value: 'rainbow' }
   ];
   const selectedSplitColorOption = splitColorOptions.find(option => {
     return model.split_color_mode === option.value;
@@ -97,7 +99,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('chartType')}
-            label="Chart type"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartLine.chartTypeLabel"
+              defaultMessage="Chart type"
+            />)}
           >
             <EuiComboBox
               isClearable={false}
@@ -111,7 +116,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('stacked')}
-            label="Stacked"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartLine.stackedLabel"
+              defaultMessage="Stacked"
+            />)}
           >
             <EuiComboBox
               isClearable={false}
@@ -125,7 +133,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('fill')}
-            label="Fill (0 to 1)"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartLine.fillLabel"
+              defaultMessage="Fill (0 to 1)"
+            />)}
           >
             <EuiFieldNumber
               step={0.1}
@@ -137,7 +148,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('lineWidth')}
-            label="Line width"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartLine.lineWidthLabel"
+              defaultMessage="Line width"
+            />)}
           >
             <EuiFieldNumber
               onChange={handleTextChange('line_width')}
@@ -148,7 +162,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('pointSize')}
-            label="Point size"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartLine.pointSizeLabel"
+              defaultMessage="Point size"
+            />)}
           >
             <EuiFieldNumber
               onChange={handleTextChange('point_size')}
@@ -157,7 +174,12 @@ function TimeseriesConfig(props) {
           </EuiFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFormLabel>Steps</EuiFormLabel>
+          <EuiFormLabel>
+            <FormattedMessage
+              id="tsvb.timeSeries.chartLine.stepsLabel"
+              defaultMessage="Steps"
+            />
+          </EuiFormLabel>
           <EuiSpacer size="s" />
           <YesNo
             value={model.steps}
@@ -174,7 +196,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('chartType')}
-            label="Chart type"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartBar.chartTypeLabel"
+              defaultMessage="Chart type"
+            />)}
           >
             <EuiComboBox
               isClearable={false}
@@ -188,7 +213,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('stacked')}
-            label="Stacked"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartBar.stackedLabel"
+              defaultMessage="Stacked"
+            />)}
           >
             <EuiComboBox
               isClearable={false}
@@ -202,7 +230,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('fill')}
-            label="Fill (0 to 1)"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartBar.fillLabel"
+              defaultMessage="Fill (0 to 1)"
+            />)}
           >
             <EuiFieldNumber
               step={0.5}
@@ -214,7 +245,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('lineWidth')}
-            label="Line width"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.chartBar.lineWidthLabel"
+              defaultMessage="Line width"
+            />)}
           >
             <EuiFieldNumber
               onChange={handleTextChange('line_width')}
@@ -241,8 +275,19 @@ function TimeseriesConfig(props) {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('template')}
-            label="Template"
-            helpText={<span>eg.<EuiCode>{'{{value}}/s'}</EuiCode></span>}
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.templateLabel"
+              defaultMessage="Template"
+            />)}
+            helpText={(
+              <span>
+                <FormattedMessage
+                  id="tsvb.timeSeries.templateHelpText"
+                  defaultMessage="eg.{templateExample}"
+                  values={{ templateExample: (<EuiCode>{'{{value}}/s'}</EuiCode>) }}
+                />
+              </span>
+            )}
             fullWidth
           >
             <EuiFieldText
@@ -258,7 +303,10 @@ function TimeseriesConfig(props) {
 
       <EuiFormRow
         id={htmlId('series_filter')}
-        label="Filter"
+        label={(<FormattedMessage
+          id="tsvb.timeSeries.filterLabel"
+          defaultMessage="Filter"
+        />)}
         fullWidth
       >
         <EuiFieldText
@@ -278,7 +326,11 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={true}>
           <EuiFormRow
             id={htmlId('offset')}
-            label="Offset series time by (1m, 1h, 1w, 1d)"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.offsetSeriesTimeLabel"
+              defaultMessage="Offset series time by (1m, 1h, 1w, 1d)"
+              description="1m, 1h, 1w, 1d are required values and must not be translated."
+            />)}
           >
             <EuiFieldText
               data-test-subj="offsetTimeSeries"
@@ -288,7 +340,12 @@ function TimeseriesConfig(props) {
           </EuiFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={true}>
-          <EuiFormLabel>Hide in legend</EuiFormLabel>
+          <EuiFormLabel>
+            <FormattedMessage
+              id="tsvb.timeSeries.hideInLegendLabel"
+              defaultMessage="Hide in legend"
+            />
+          </EuiFormLabel>
           <EuiSpacer size="s" />
           <YesNo
             value={model.hide_in_legend}
@@ -299,7 +356,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={true}>
           <EuiFormRow
             id={htmlId('splitColor')}
-            label="Split color theme"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.splitColorThemeLabel"
+              defaultMessage="Split color theme"
+            />)}
           >
             <EuiComboBox
               isClearable={false}
@@ -316,7 +376,12 @@ function TimeseriesConfig(props) {
 
       <EuiFlexGroup responsive={false} wrap={true}>
         <EuiFlexItem grow={false}>
-          <EuiFormLabel>Separate axis?</EuiFormLabel>
+          <EuiFormLabel>
+            <FormattedMessage
+              id="tsvb.timeSeries.separateAxisLabel"
+              defaultMessage="Separate axis?"
+            />
+          </EuiFormLabel>
           <EuiSpacer size="s" />
           <YesNo
             value={model.separate_axis}
@@ -327,7 +392,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('axisMin')}
-            label="Axis min"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.axisMinLabel"
+              defaultMessage="Axis min"
+            />)}
           >
             {/*
               EUITODO: The following input couldn't be converted to EUI because of type mis-match.
@@ -345,7 +413,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('axisMax')}
-            label="Axis max"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.axisMaxLabel"
+              defaultMessage="Axis max"
+            />)}
           >
             {/*
               EUITODO: The following input couldn't be converted to EUI because of type mis-match.
@@ -362,7 +433,10 @@ function TimeseriesConfig(props) {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('axisPos')}
-            label="Axis position"
+            label={(<FormattedMessage
+              id="tsvb.timeSeries.axisPositionLabel"
+              defaultMessage="Axis position"
+            />)}
           >
             <EuiComboBox
               isClearable={false}
@@ -380,7 +454,12 @@ function TimeseriesConfig(props) {
 
       <EuiFlexGroup gutterSize="s" responsive={false} wrap={true}>
         <EuiFlexItem grow={false}>
-          <EuiFormLabel>Override Index Pattern?</EuiFormLabel>
+          <EuiFormLabel>
+            <FormattedMessage
+              id="tsvb.timeSeries.overrideIndexPatternLabel"
+              defaultMessage="Override Index Pattern?"
+            />
+          </EuiFormLabel>
           <EuiSpacer size="s" />
           <YesNo
             value={model.override_index_pattern}
@@ -401,7 +480,7 @@ function TimeseriesConfig(props) {
     </div>
   );
 
-}
+});
 
 TimeseriesConfig.propTypes = {
   fields: PropTypes.object,
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
index 23a349aaac39e..f4eaf628a3500 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
@@ -28,8 +28,9 @@ import Split from '../../split';
 import createAggRowRender from '../../lib/create_agg_row_render';
 import createTextHandler from '../../lib/create_text_handler';
 import { createUpDownHandler } from '../../lib/sort_keyhandler';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-function TimeseriesSeries(props) {
+const TimeseriesSeries = injectI18n(function (props) {
   const {
     panel,
     fields,
@@ -39,7 +40,8 @@ function TimeseriesSeries(props) {
     disableAdd,
     selectedTab,
     onChange,
-    visible
+    visible,
+    intl
   } = props;
 
   const defaults = { label: '' };
@@ -96,14 +98,20 @@ function TimeseriesSeries(props) {
             isSelected={selectedTab === 'metrics'}
             onClick={() => props.switchTab('metrics')}
           >
-            Metrics
+            <FormattedMessage
+              id="tsvb.timeSeries.tab.metricsLabel"
+              defaultMessage="Metrics"
+            />
           </EuiTab>
           <EuiTab
             data-test-subj="seriesOptions"
             isSelected={selectedTab === 'options'}
             onClick={() => props.switchTab('options')}
           >
-            Options
+            <FormattedMessage
+              id="tsvb.timeSeries.tab.optionsLabel"
+              defaultMessage="Options"
+            />
           </EuiTab>
         </EuiTabs>
         {seriesBody}
@@ -124,11 +132,19 @@ function TimeseriesSeries(props) {
   if (!props.disableDelete) {
     dragHandle = (
       <EuiFlexItem grow={false}>
-        <EuiToolTip content="Drag to sort">
+        <EuiToolTip
+          content={(<FormattedMessage
+            id="tsvb.timeSeries.dragToSortLabel"
+            defaultMessage="Drag to sort"
+          />)}
+        >
           <EuiButtonIcon
             className="tvbSeries__sortHandle"
             iconType="grab"
-            aria-label="Sort series by pressing up/down"
+            aria-label={intl.formatMessage({
+              id: 'tsvb.timeSeries.dragToSortAriaLabel',
+              defaultMessage: 'Sort series by pressing up/down'
+            })}
             onKeyDown={createUpDownHandler(props.onShouldSortItem)}
           />
         </EuiToolTip>
@@ -149,7 +165,10 @@ function TimeseriesSeries(props) {
             iconType={caretIcon}
             color="text"
             onClick={props.toggleVisible}
-            aria-label="Toggle series editor"
+            aria-label={intl.formatMessage({
+              id: 'tsvb.timeSeries.toggleSeriesEditorAriaLabel',
+              defaultMessage: 'Toggle series editor'
+            })}
             aria-expanded={props.visible}
           />
         </EuiFlexItem>
@@ -162,7 +181,7 @@ function TimeseriesSeries(props) {
           <EuiFieldText
             fullWidth
             onChange={handleChange('label')}
-            placeholder="Label"
+            placeholder={intl.formatMessage({ id: 'tsvb.timeSeries.labelPlaceholder', defaultMessage: 'Label' })}
             value={model.label}
           />
         </EuiFlexItem>
@@ -171,9 +190,9 @@ function TimeseriesSeries(props) {
 
         <EuiFlexItem grow={false}>
           <AddDeleteButtons
-            addTooltip="Add Series"
-            deleteTooltip="Delete Series"
-            cloneTooltip="Clone Series"
+            addTooltip={intl.formatMessage({ id: 'tsvb.timeSeries.addSeriesTooltip', defaultMessage: 'Add Series' })}
+            deleteTooltip={intl.formatMessage({ id: 'tsvb.timeSeries.deleteSeriesTooltip', defaultMessage: 'Delete Series' })}
+            cloneTooltip={intl.formatMessage({ id: 'tsvb.timeSeries.cloneSeriesTooltip', defaultMessage: 'Clone Series' })}
             onDelete={onDelete}
             onClone={props.onClone}
             onAdd={onAdd}
@@ -188,7 +207,7 @@ function TimeseriesSeries(props) {
     </div>
   );
 
-}
+});
 
 TimeseriesSeries.propTypes = {
   className: PropTypes.string,
@@ -216,4 +235,4 @@ TimeseriesSeries.propTypes = {
   visible: PropTypes.bool
 };
 
-export default TimeseriesSeries;
+export default injectI18n(TimeseriesSeries);
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
index fa112a41e39c8..754becb788fbc 100644
--- a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
@@ -28,8 +28,9 @@ import { EuiToolTip, EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, E
 import createTextHandler from '../../lib/create_text_handler';
 import createAggRowRender from '../../lib/create_agg_row_render';
 import { createUpDownHandler } from '../../lib/sort_keyhandler';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-function TopNSeries(props) {
+const TopNSeries = injectI18n(function (props) {
   const {
     panel,
     model,
@@ -40,7 +41,8 @@ function TopNSeries(props) {
     disableDelete,
     disableAdd,
     selectedTab,
-    visible
+    visible,
+    intl
   } = props;
 
   const handleChange = createTextHandler(onChange);
@@ -94,14 +96,20 @@ function TopNSeries(props) {
             isSelected={selectedTab === 'metrics'}
             onClick={() => props.switchTab('metrics')}
           >
-            Metrics
+            <FormattedMessage
+              id="tsvb.topN.tab.metricsLabel"
+              defaultMessage="Metrics"
+            />
           </EuiTab>
           <EuiTab
             data-test-subj="seriesOptions"
             isSelected={selectedTab === 'options'}
             onClick={() => props.switchTab('options')}
           >
-            Options
+            <FormattedMessage
+              id="tsvb.topN.tab.optionsLabel"
+              defaultMessage="Options"
+            />
           </EuiTab>
         </EuiTabs>
         {seriesBody}
@@ -122,11 +130,16 @@ function TopNSeries(props) {
   if (!props.disableDelete) {
     dragHandle = (
       <EuiFlexItem grow={false}>
-        <EuiToolTip content="Drag to sort">
+        <EuiToolTip
+          content={(<FormattedMessage
+            id="tsvb.topN.dragToSortTooltip"
+            defaultMessage="Drag to sort"
+          />)}
+        >
           <EuiButtonIcon
             className="tvbSeries__sortHandle"
             iconType="grab"
-            aria-label="Sort series by pressing up/down"
+            aria-label={intl.formatMessage({ id: 'tsvb.topN.dragToSortAriaLabel', defaultMessage: 'Sort series by pressing up/down' })}
             onKeyDown={createUpDownHandler(props.onShouldSortItem)}
           />
         </EuiToolTip>
@@ -147,7 +160,7 @@ function TopNSeries(props) {
             iconType={caretIcon}
             color="text"
             onClick={props.toggleVisible}
-            aria-label="Toggle series editor"
+            aria-label={intl.formatMessage({ id: 'tsvb.topN.toggleSeriesEditorAriaLabel', defaultMessage: 'Toggle series editor' })}
             aria-expanded={props.visible}
           />
         </EuiFlexItem>
@@ -160,7 +173,7 @@ function TopNSeries(props) {
           <EuiFieldText
             fullWidth
             onChange={handleChange('label')}
-            placeholder="Label"
+            placeholder={intl.formatMessage({ id: 'tsvb.topN.labelPlaceholder', defaultMessage: 'Label' })}
             value={model.label}
           />
         </EuiFlexItem>
@@ -169,9 +182,9 @@ function TopNSeries(props) {
 
         <EuiFlexItem grow={false}>
           <AddDeleteButtons
-            addTooltip="Add Series"
-            deleteTooltip="Delete Series"
-            cloneTooltip="Clone Series"
+            addTooltip={intl.formatMessage({ id: 'tsvb.topN.addSeriesTooltip', defaultMessage: 'Add Series' })}
+            deleteTooltip={intl.formatMessage({ id: 'tsvb.topN.deleteSeriesTooltip', defaultMessage: 'Delete Series' })}
+            cloneTooltip={intl.formatMessage({ id: 'tsvb.topN.cloneSeriesTooltip', defaultMessage: 'Clone Series' })}
             onDelete={onDelete}
             onClone={props.onClone}
             onAdd={onAdd}
@@ -185,7 +198,7 @@ function TopNSeries(props) {
       { body }
     </div>
   );
-}
+});
 
 TopNSeries.propTypes = {
   className: PropTypes.string,
diff --git a/src/core_plugins/metrics/public/components/visualization.js b/src/core_plugins/metrics/public/components/visualization.js
index b72e1b047558c..505809afdd800 100644
--- a/src/core_plugins/metrics/public/components/visualization.js
+++ b/src/core_plugins/metrics/public/components/visualization.js
@@ -63,18 +63,20 @@ function Visualization(props) {
 
   const component = types[model.type];
   if (component) {
-    return React.createElement(component, {
-      dateFormat: props.dateFormat,
-      reversed: props.reversed,
-      backgroundColor: props.backgroundColor,
-      model: props.model,
-      onBrush: props.onBrush,
-      onChange: props.onChange,
-      onUiState: props.onUiState,
-      uiState: props.uiState,
-      visData: visData.type === model.type ? visData : {},
-      getConfig: props.getConfig
-    });
+    return (
+      React.createElement(component, {
+        dateFormat: props.dateFormat,
+        reversed: props.reversed,
+        backgroundColor: props.backgroundColor,
+        model: props.model,
+        onBrush: props.onBrush,
+        onChange: props.onChange,
+        onUiState: props.onUiState,
+        uiState: props.uiState,
+        visData: visData.type === model.type ? visData : {},
+        getConfig: props.getConfig
+      })
+    );
   }
   return <div className={props.className} />;
 }
diff --git a/src/core_plugins/metrics/public/components/yes_no.js b/src/core_plugins/metrics/public/components/yes_no.js
index 7a79ac6ca988c..beda91b8d3c04 100644
--- a/src/core_plugins/metrics/public/components/yes_no.js
+++ b/src/core_plugins/metrics/public/components/yes_no.js
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { EuiRadio, htmlIdGenerator } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 function YesNo(props) {
   const { name, value } = props;
@@ -37,7 +38,10 @@ function YesNo(props) {
     <div>
       <EuiRadio
         id={htmlId('yes')}
-        label="Yes"
+        label={(<FormattedMessage
+          id="tsvb.yesButtonLabel"
+          defaultMessage="Yes"
+        />)}
         className="eui-displayInlineBlock"
         name={inputName}
         checked={Boolean(value)}
@@ -49,7 +53,10 @@ function YesNo(props) {
 
       <EuiRadio
         id={htmlId('no')}
-        label="No"
+        label={(<FormattedMessage
+          id="tsvb.noButtonLabel"
+          defaultMessage="No"
+        />)}
         className="eui-displayInlineBlock"
         name={inputName}
         checked={!Boolean(value)}
diff --git a/src/core_plugins/metrics/public/components/yes_no.test.js b/src/core_plugins/metrics/public/components/yes_no.test.js
index e931ba5ce0775..09d936fde6f1f 100644
--- a/src/core_plugins/metrics/public/components/yes_no.test.js
+++ b/src/core_plugins/metrics/public/components/yes_no.test.js
@@ -19,14 +19,14 @@
 
 import React from 'react';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import sinon from 'sinon';
 import YesNo from './yes_no';
 
 describe('YesNo', () => {
   it('call onChange={handleChange} on yes', () => {
     const handleChange = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <YesNo name="test" onChange={handleChange} />
     );
     wrapper.find('EuiRadio').first().simulate('change');
@@ -38,7 +38,7 @@ describe('YesNo', () => {
 
   it('call onChange={handleChange} on no', () => {
     const handleChange = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <YesNo name="test" onChange={handleChange} />
     );
     wrapper.find('EuiRadio').last().simulate('change');
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js b/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
index 456a52fe3a4cc..89c859fdd421c 100644
--- a/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
+++ b/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
@@ -42,9 +42,7 @@ function ReactEditorControllerProvider(Private, config) {
             isEditorMode={true}
             appState={params.appState}
           />
-        </I18nProvider>,
-        this.el
-      );
+        </I18nProvider>, this.el);
     }
 
     resize() {
diff --git a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
index 8f9dccadbe60d..37fb4bab667b7 100644
--- a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
@@ -22,8 +22,9 @@ import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
 import { htmlIdGenerator, EuiButtonIcon } from '@elastic/eui';
+import { injectI18n } from '@kbn/i18n/react';
 
-function HorizontalLegend(props) {
+const HorizontalLegend = injectI18n(function (props) {
   const rows = props.series.map(createLegendSeries(props));
   const htmlId = htmlIdGenerator();
   const styles = reactcss({
@@ -46,7 +47,7 @@ function HorizontalLegend(props) {
         color="text"
         iconSize="s"
         onClick={props.onClick}
-        aria-label="Toggle chart legend"
+        aria-label={props.intl.formatMessage({ id: 'tsvb.horizontalLegend.toggleChartAriaLabel', defaultMessage: 'Toggle chart legend' })}
         aria-expanded={!!props.showLegend}
         aria-controls={htmlId('legend')}
       />
@@ -55,7 +56,7 @@ function HorizontalLegend(props) {
       </div>
     </div>
   );
-}
+});
 
 HorizontalLegend.propTypes = {
   legendPosition: PropTypes.string,
diff --git a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
index d2183bfbca34f..cfd9fa840f9ec 100644
--- a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
@@ -22,8 +22,9 @@ import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
 import { htmlIdGenerator, EuiButtonIcon } from '@elastic/eui';
+import { injectI18n } from '@kbn/i18n/react';
 
-function VerticalLegend(props) {
+const VerticalLegend = injectI18n(function (props) {
   const rows = props.series.map(createLegendSeries(props));
   const htmlId = htmlIdGenerator();
   const hideLegend = !props.showLegend;
@@ -56,7 +57,7 @@ function VerticalLegend(props) {
         color="text"
         iconSize="s"
         onClick={props.onClick}
-        aria-label="Toggle chart legend"
+        aria-label={props.intl.formatMessage({ id: 'tsvb.verticalLegend.toggleChartAriaLabel', defaultMessage: 'Toggle chart legend' })}
         aria-expanded={!!props.showLegend}
         aria-controls={htmlId('legend')}
       />
@@ -67,7 +68,7 @@ function VerticalLegend(props) {
     </div>
   );
 
-}
+});
 
 VerticalLegend.propTypes = {
   legendPosition: PropTypes.string,
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/bucket_transform.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/bucket_transform.js
index ce061464cc994..c487e541beb39 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/helpers/bucket_transform.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/bucket_transform.js
@@ -21,11 +21,17 @@ import parseSettings from './parse_settings';
 import getBucketsPath from './get_buckets_path';
 import { parseInterval } from './parse_interval';
 import { set } from 'lodash';
+import { i18n } from '@kbn/i18n';
 
 function checkMetric(metric, fields) {
   fields.forEach(field => {
     if (!metric[field]) {
-      throw new Error(`Metric missing ${field}`);
+      throw new Error(
+        i18n.translate('tsvb.metricMissingErrorMessage', {
+          defaultMessage: 'Metric missing {field}',
+          values: { field }
+        })
+      );
     }
   });
 }
diff --git a/src/core_plugins/metrics/server/lib/vis_data/series/handle_response_body.js b/src/core_plugins/metrics/server/lib/vis_data/series/handle_response_body.js
index 20eb2588ffde1..f732db82f45ed 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/series/handle_response_body.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/series/handle_response_body.js
@@ -20,6 +20,7 @@
 import buildProcessorFunction from '../build_processor_function';
 import processors from '../response_processors/series';
 import { get } from 'lodash';
+import { i18n } from '@kbn/i18n';
 
 export default function handleResponseBody(panel) {
   return resp => {
@@ -30,12 +31,19 @@ export default function handleResponseBody(panel) {
     }
     const aggregations = get(resp, 'aggregations');
     if (!aggregations) {
-      const message = `The aggregations key is missing from the response,
-        check your permissions for this request.`;
+      const message = i18n.translate('tsvb.series.missingAggregationKeyErrorMessage', {
+        defaultMessage: 'The aggregations key is missing from the response, check your permissions for this request.'
+      });
       throw Error(message);
     }
     const keys = Object.keys(aggregations);
-    if (keys.length !== 1) throw Error('There should only be one series per request.');
+    if (keys.length !== 1) {
+      throw Error(
+        i18n.translate('tsvb.series.shouldOneSeriesPerRequestErrorMessage', {
+          defaultMessage: 'There should only be one series per request.'
+        })
+      );
+    }
     const seriesId = keys[0];
     const series = panel.series.find(s => s.id === seriesId);
     const processor = buildProcessorFunction(processors, resp, panel, series);