Area chart displays data points on y-axis and user cannot brush on it to see the chart over a large time period

[bhavyarm]

Kibana version: 7.12.0

Elasticsearch version: 7.12.0

Server OS version: darwin_x86_64

Browser version: chrome latest

Browser OS version: OS X

Original install method (e.g. download page, yum, from source, etc.): from staging

Describe the bug: The new elastic charts area chart displays datapoints on y-axis directly if user tries to drill down into data over a large time period. Kibana also prevents you from brushing on the chart.

Steps to reproduce:

1. Add one of the sample ecommerce data to Kibana - go to dashboard - click create -panel and pick xy aggregation chart and pick area chart
2. Create an area chart with data histogram on x-axis and split the series on terms aggregation on product.manufacturer.keyword. My time period is 7 days

3. Change the time period to 3 years 4. Kibana displays the data points super imposed on y-axis. This makes it look like there is no data on the chart

5. Please note brushing on the chart to change the time period doesn't work 6. If you add this chart to a dashboard and you have another panel with say heatmap on same fields - brushing on heatmap will make Kibana display chart on area chart too

[elasticmachine]

Pinging @elastic/datavis (Feature:ElasticCharts)

[markov00]

@bhavyarm do you mind sharing the es response from the inspector about the second screenshot?

[bhavyarm]

@markov00 yep here you go. Thanks!

ES request:

{
  "aggs": {
    "2": {
      "date_histogram": {
        "field": "order_date",
        "fixed_interval": "30d",
        "time_zone": "America/Montreal",
        "min_doc_count": 1
      },
      "aggs": {
        "3": {
          "terms": {
            "field": "products.manufacturer.keyword",
            "order": {
              "_count": "desc"
            },
            "size": 5
          }
        }
      }
    }
  },
  "size": 0,
  "fields": [
    {
      "field": "customer_birth_date",
      "format": "date_time"
    },
    {
      "field": "order_date",
      "format": "date_time"
    },
    {
      "field": "products.created_on",
      "format": "date_time"
    }
  ],
  "script_fields": {},
  "stored_fields": [
    "*"
  ],
  "runtime_mappings": {},
  "_source": {
    "excludes": []
  },
  "query": {
    "bool": {
      "must": [],
      "filter": [
        {
          "match_all": {}
        },
        {
          "range": {
            "order_date": {
              "gte": "2018-03-01T21:43:18.167Z",
              "lte": "2021-03-01T21:43:18.167Z",
              "format": "strict_date_optional_time"
            }
          }
        }
      ],
      "should": [],
      "must_not": []
    }
  }
}

ES response:

{
  "took": 1,
  "timed_out": false,
  "_shards": {
    "total": 1,
    "successful": 1,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": 1759,
    "max_score": null,
    "hits": []
  },
  "aggregations": {
    "2": {
      "buckets": [
        {
          "3": {
            "doc_count_error_upper_bound": 0,
            "sum_other_doc_count": 1078,
            "buckets": [
              {
                "key": "Low Tide Media",
                "doc_count": 551
              },
              {
                "key": "Elitelligence",
                "doc_count": 511
              },
              {
                "key": "Oceanavigations",
                "doc_count": 426
              },
              {
                "key": "Tigress Enterprises",
                "doc_count": 404
              },
              {
                "key": "Pyramidustries",
                "doc_count": 365
              }
            ]
          },
          "key_as_string": "2021-02-02T00:00:00.000-05:00",
          "key": 1612242000000,
          "doc_count": 1759
        }
      ]
    }
  }
}

[nickofthyme]

@bhavyarm Good catch! This is fixed by #93091 which caused the time domain to be undefined. With that PR the above example behavior is seen below.

Screen.Recording.2021-03-01.at.04.50.56.PM.mp4

If you add this chart to a dashboard and you have another panel with say heatmap on same fields - brushing on heatmap will make Kibana display chart on area chart too

I'm not sure what you mean by this but I think this would also be solved by #93091

Could you pull down that pr and see if that in fact solves this issue too?