Date Range Agg - key needs to be a string

src/legacy/core_plugins/data/public/search/aggs/buckets/date_range.ts

@@ -42,7 +42,6 @@ export const dateRangeBucketAgg = new BucketAggType({
   },
   getFormat(agg) {
     const fieldFormatsService = npStart.plugins.data.fieldFormats;
-
     const formatter = agg.fieldOwnFormatter(
       fieldFormats.TEXT_CONTEXT_TYPE,
       fieldFormatsService.getDefaultInstance(KBN_FIELD_TYPES.DATE)

src/legacy/core_plugins/data/public/search/aggs/buckets/lib/date_range.ts

@@ -23,9 +23,13 @@ export interface DateRangeKey {
 }
 
 export const convertDateRangeToString = (
-  { from, to }: DateRangeKey,
+  range: DateRangeKey | string | number,
   format: (val: any) => string
 ) => {
+  if (!range.from && !range.to) {
+    return range;
+  }
+  const { from, to } = range;
   if (!from) {
     return 'Before ' + format(to);
   } else if (!to) {

src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js

@@ -243,7 +243,13 @@ export class AxisScale {
     const range = this.getRange(length);
     const padding = config.get('style.rangePadding');
     const outerPadding = config.get('style.rangeOuterPadding');
-    this.scale = scale.domain(domain);
+    let domainSanitized = domain;
+    if (_.get(config, 'data.data.xAxisFormat.id', '') === 'date_range' && !config.isYExtents()) {
+      domainSanitized = domain.map(value => {
+        return config.data.data.xAxisFormatter(value);
+      });
+    }
+    this.scale = scale.domain(domainSanitized);
 
     if (config.isOrdinal()) {
       this.scale.rangeBands(range, padding, outerPadding);

src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/data.js

@@ -67,6 +67,7 @@ export class Data {
                 const newVal = _.clone(val);
                 newVal.extraMetrics = val.extraMetrics;
                 newVal.series = val.series || seri.label;
+                newVal.xFormatted = getFormat(newData.xAxisFormat).convert(newVal.x);
                 return newVal;
               }),
               yAxisFormatter: val => converter.convert(val),

src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/area_chart.js

@@ -102,9 +102,9 @@ export class AreaChart extends PointSeries {
 
     function x(d) {
       if (isTimeSeries) {
-        return xScale(d.x);
+        return xScale(d.xFormatted);
       }
-      return xScale(d.x) + xScale.rangeBand() / 2;
+      return xScale(d.xFormatted) + xScale.rangeBand() / 2;
     }
 
     function y1(d) {

src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/column_chart.js

@@ -147,11 +147,11 @@ export class ColumnChart extends PointSeries {
     function x(d, i) {
       if (isTimeScale) {
         return (
-          xScale(d.x) +
+          xScale(d.xFormatted) +
           datumWidth(barWidth, d, bars.data()[i + 1], xScale, gutterWidth, groupCount) * groupNum
         );
       }
-      return xScale(d.x) + (xScale.rangeBand() / groupCount) * groupNum;
+      return xScale(d.xFormatted) + (xScale.rangeBand() / groupCount) * groupNum;
     }
 
     function y(d) {
@@ -270,11 +270,11 @@ export class ColumnChart extends PointSeries {
     function x(d, i) {
       if (isTimeScale) {
         return (
-          xScale(d.x) +
+          xScale(d.xFormatted) +
           datumWidth(barWidth, d, bars.data()[i + 1], xScale, gutterWidth, groupCount) * groupNum
         );
       }
-      return xScale(d.x) + (xScale.rangeBand() / groupCount) * groupNum;
+      return xScale(d.xFormatted) + (xScale.rangeBand() / groupCount) * groupNum;
     }
 
     function y(d) {