# Skewed bars on a graph

**URL:** https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943
**Category:** Kibana
**Created:** [November 7, 2019, 10:01am UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943 "2019-11-07T10:01:04Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Anne\_Kim](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anne_kim/32/47196_2.png) [@Anne\_Kim](https://discuss.elastic.co/u/Anne_Kim)
#### Post date: [November 7, 2019, 10:01am UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/1 "2019-11-07T10:01:05Z")

</div>

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?

 ![](https://us1.discourse-cdn.com/elastic/original/3X/4/e/4e8fc328f59e8075a7a31c10e8ee3c14ee3936ba.png)

---

<div class="post-metadata">

### Author: ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)
#### Post date: [November 15, 2019, 10:05am UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/2 "2019-11-15T10:05:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Anne\_Kim](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anne_kim/32/47196_2.png) [@Anne\_Kim](https://discuss.elastic.co/u/Anne_Kim)
#### Post date: [November 20, 2019, 8:24am UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/3 "2019-11-20T08:24:53Z")

</div>

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):

 ![](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1a68152d5f0722c6b77d855700c3d18751f3abd9.png)  
And its configuration (visState):

```auto
{
  "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
        ]
      }
    }
  ]
}

```

---

<div class="post-metadata">

### Author: ![Anne\_Kim](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anne_kim/32/47196_2.png) [@Anne\_Kim](https://discuss.elastic.co/u/Anne_Kim)
#### Post date: [December 5, 2019, 10:27am UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/4 "2019-12-05T10:27:02Z")

</div>

Any ideas, @markov00 ?

---

<div class="post-metadata">

### Author: ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)
#### Post date: [December 5, 2019, 11:15am UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/5 "2019-12-05T11:15:34Z")

</div>

Sorry Anne, unfortunately this is a known old bug [https://github.com/elastic/kibana/issues/13093](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

---

<div class="post-metadata">

### Author: ![Anne\_Kim](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anne_kim/32/47196_2.png) [@Anne\_Kim](https://discuss.elastic.co/u/Anne_Kim)
#### Post date: [December 5, 2019, 12:03pm UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/6 "2019-12-05T12:03:28Z")

</div>

Thank you!

---

<div class="post-metadata">

### Author: ![Anne\_Kim](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anne_kim/32/47196_2.png) [@Anne\_Kim](https://discuss.elastic.co/u/Anne_Kim)
#### Post date: [December 5, 2019, 12:06pm UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/7 "2019-12-05T12:06:49Z")

</div>

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):

 ![](https://us1.discourse-cdn.com/elastic/original/3X/f/8/f8780b87415965408d6b8a783cd90597d6ff80f8.png) ![](https://us1.discourse-cdn.com/elastic/original/3X/d/f/dfedbd1391e7a36e0b02c8d721b2c7560608a6da.png)

---

<div class="post-metadata">

### Author: ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)
#### Post date: [December 5, 2019, 2:02pm UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/8 "2019-12-05T14:02:41Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Anne\_Kim](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anne_kim/32/47196_2.png) [@Anne\_Kim](https://discuss.elastic.co/u/Anne_Kim)
#### Post date: [December 5, 2019, 3:16pm UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/9 "2019-12-05T15:16:13Z")

</div>

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:

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [January 2, 2020, 3:16pm UTC](https://discuss.elastic.co/t/skewed-bars-on-a-graph/206943/10 "2020-01-02T15:16:19Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
