diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js
index 5149d2020d..cbbafbe557 100644
--- a/client/app/visualizations/chart/index.js
+++ b/client/app/visualizations/chart/index.js
@@ -251,9 +251,18 @@ function ChartEditor(ColorPalette, clientConfig) {
         scope.options.legend = { enabled: true };
       }
 
-      if (!has(scope.options, 'xAxisLabelLength')) {
-        scope.options.xAxisLabelLength = 300;
-      }
+      scope.$watch('options.globalSeriesType', (newType, oldType) => {
+        const defaultXAxisLength = 10;
+        if (!has(scope.options, 'xAxisLabelLength')) {
+          scope.options.xAxisLabelLength = defaultXAxisLength;
+        }
+        if (oldType !== newType) {
+          scope.options.xAxisLabelLength = defaultXAxisLength;
+          if (newType === 'pie') {
+            scope.options.xAxisLabelLength = 300;
+          }
+        }
+      }, true);
 
       if (scope.columnNames) {
         each(scope.options.columnMapping, (value, key) => {
diff --git a/client/app/visualizations/chart/plotly/utils.js b/client/app/visualizations/chart/plotly/utils.js
index 360be4a10e..ad563535a4 100644
--- a/client/app/visualizations/chart/plotly/utils.js
+++ b/client/app/visualizations/chart/plotly/utils.js
@@ -230,7 +230,8 @@ function prepareChartData(seriesList, options) {
     const yValues = [];
     const yErrorValues = [];
     each(data, (row) => {
-      const x = normalizeValue(row.x);
+      const xAxisLabelLength = parseInt(options.xAxisLabelLength, 10) || DEFAULT_XAXIS_LABEL_LENGTH;
+      const x = normalizeValue(row.x).substr(0, xAxisLabelLength);
       const y = normalizeValue(row.y);
       const yError = normalizeValue(row.yError);
       sourceData.set(x, {