Skewed bars on a graph

Hello!
There is a graph where each value of X-axis is splited onto 3 bars. When creating the visualization I noticed that each third bar is located above its "neightboring" right value. I mean that the 3rd bar of the 1s value (of X-axis) is located above the 2nd etc. (see screenshot below)
I just wanted to know, it is a bug or smth other?

Hi @Anne_Kim
Seems like a bug, could you please share a screenshot of the current chart configuration together with your current usecase?

Hi, @markov00
Here is the screenshot (black dots on lines are a bug (?) + the lines are sometimes behind the bars, sometimes - in front of them):


And its configuration (visState):

{
  "title": "Tutorial stages duration (5 last days)",
  "type": "histogram",
  "params": {
    "type": "histogram",
    "grid": {
      "categoryLines": false,
      "valueAxis": "ValueAxis-1"
    },
    "categoryAxes": [
      {
        "id": "CategoryAxis-1",
        "type": "category",
        "position": "bottom",
        "show": true,
        "style": {},
        "scale": {
          "type": "linear"
        },
        "labels": {
          "show": true,
          "filter": true,
          "truncate": 100
        },
        "title": {}
      }
    ],
    "valueAxes": [
      {
        "id": "ValueAxis-1",
        "name": "LeftAxis-1",
        "type": "value",
        "position": "left",
        "show": true,
        "style": {},
        "scale": {
          "type": "linear",
          "mode": "normal"
        },
        "labels": {
          "show": true,
          "rotate": 0,
          "filter": false,
          "truncate": 100
        },
        "title": {
          "text": "Average stage_duration"
        }
      }
    ],
    "seriesParams": [
      {
        "show": "true",
        "type": "histogram",
        "mode": "normal",
        "data": {
          "label": "Average stage_duration",
          "id": "1"
        },
        "valueAxis": "ValueAxis-1",
        "drawLinesBetweenPoints": true,
        "showCircles": true,
        "interpolate": "cardinal"
      },
      {
        "show": true,
        "mode": "normal",
        "type": "line",
        "drawLinesBetweenPoints": true,
        "showCircles": true,
        "data": {
          "id": "6",
          "label": "Median stage_duration"
        },
        "valueAxis": "ValueAxis-1",
        "interpolate": "cardinal",
        "lineWidth": 3.5
      }
    ],
    "addTooltip": true,
    "addLegend": true,
    "legendPosition": "top",
    "times": [],
    "addTimeMarker": false,
    "labels": {
      "show": false
    },
    "dimensions": {
      "x": {
        "accessor": 0,
        "format": {
          "id": "terms",
          "params": {
            "id": "number",
            "otherBucketLabel": "Other",
            "missingBucketLabel": "Missing"
          }
        },
        "params": {},
        "aggType": "terms"
      },
      "y": [
        {
          "accessor": 2,
          "format": {
            "id": "number"
          },
          "params": {},
          "aggType": "avg"
        },
        {
          "accessor": 3,
          "format": {
            "id": "number"
          },
          "params": {},
          "aggType": "median"
        }
      ],
      "series": [
        {
          "accessor": 1,
          "format": {
            "id": "string"
          },
          "params": {},
          "aggType": "date_range"
        }
      ]
    }
  },
  "aggs": [
    {
      "id": "2",
      "enabled": true,
      "type": "terms",
      "schema": "segment",
      "params": {
        "field": "stage_id",
        "orderBy": "_key",
        "order": "asc",
        "size": 10,
        "otherBucket": true,
        "otherBucketLabel": "Other",
        "missingBucket": false,
        "missingBucketLabel": "Missing"
      }
    },
    {
      "id": "1",
      "enabled": true,
      "type": "avg",
      "schema": "metric",
      "params": {
        "field": "stage_duration"
      }
    },
    {
      "id": "5",
      "enabled": true,
      "type": "date_range",
      "schema": "group",
      "params": {
        "field": "created_at",
        "ranges": [
          {
            "from": "now-2d/d",
            "to": "now-1d/d"
          },
          {
            "from": "now-1d/d",
            "to": "now/d"
          },
          {
            "from": "now/d",
            "to": "now"
          },
          {
            "from": "now-3d/d",
            "to": "now-2d/d"
          },
          {
            "from": "now-4d/d",
            "to": "now-3d/d"
          }
        ]
      }
    },
    {
      "id": "6",
      "enabled": true,
      "type": "median",
      "schema": "metric",
      "params": {
        "field": "stage_duration",
        "percents": [
          50
        ]
      }
    }
  ]
}

Any ideas, @markov00 ?

Sorry Anne, unfortunately this is a known old bug https://github.com/elastic/kibana/issues/13093
that happens when adding a line chart together with a bar chart.
I don't see an easy quick workaround (TSVB only work with a timescale unfortunately)
The only escape path is recreating that chart with Vega at the moment.
We are going to replace the chart library with our own that will solve this issue, but it will not be there until release 7.7 I think

Thank you!

Actually I've found another bug: a line connects dots not in chronological order (it can "go" back and then "go" forward, see the screenshots):

Is this a different configuration? if so try to change the order of the aggregations

It partly helped, 10/11 vizualizations (of the same type) are now correct, but if I change a time period, the problem appears again.

  1. Data for the last week (correct):

  2. Data for the last month: