diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
index 0ec722e370b404e..b8fb2b24ff31cfe 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
@@ -75,13 +75,19 @@ export class ExtendedTemplate extends PureComponent<Props> {
     }
 
     const positions = {
-      xaxis: [strings.getPositionBottom(), strings.getPositionTop()],
-      yaxis: [strings.getPositionLeft(), strings.getPositionRight()],
+      xaxis: [
+        { value: 'bottom', text: strings.getPositionBottom() },
+        { value: 'top', text: strings.getPositionTop() },
+      ],
+      yaxis: [
+        { value: 'left', text: strings.getPositionLeft() },
+        { value: 'right', text: strings.getPositionRight() },
+      ],
     };
     const argName = this.props.typeInstance.name;
-    const position = this.getArgValue('position', positions[argName][0]);
+    const position = this.getArgValue('position', positions[argName][0].value);
 
-    const options = positions[argName].map(val => ({ value: val, text: val }));
+    const options = positions[argName];
 
     return (
       <Fragment>