# Length of bar and text are not matching in bar visualization

**URL:** <https://discuss.elastic.co/t/length-of-bar-and-text-are-not-matching-in-bar-visualization/271539>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [April 28, 2021, 4:48pm UTC](https://discuss.elastic.co/t/length-of-bar-and-text-are-not-matching-in-bar-visualization/271539 "2021-04-28T16:48:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [April 28, 2021, 4:48pm UTC](https://discuss.elastic.co/t/length-of-bar-and-text-are-not-matching-in-bar-visualization/271539/1 "2021-04-28T16:48:30Z")

</div>

Hi,

In below spec though same field (a\_count) has been used for x-axis and text, text is shown correctly where as length of bars is incorrect (x-axis). May I pls know where the issue is?

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width":600,
    "height":500,
  "data": {
    "values": [
      {"name": "a", "count": 3},
      {"name": "b", "count": 3},
      {"name": "b", "count": 3},
      {"name": "e", "count": 3},
      {"name": "e", "count": 3},
      {"name": "e", "count": 3},
      {"name": "g", "count": 1},
      {"name": "g", "count": 1},
       {"name": "a", "count": 3},
      {"name": "b", "count": 3},
      {"name": "b", "count": 3},
      {"name": "e", "count": 3},
      {"name": "e", "count": 3},
      {"name": "e", "count": 3},
      {"name": "g", "count": 1},
      {"name": "g", "count": 1}
    ]
  },
   "transform": [
        {
   "joinaggregate": [{
      "op": "count",
      "field": "name",
      "as": "b_count"
    }],
    "groupby": ["name"]
  },
    {
    "joinaggregate": [{
      "op": "distinct",
      "field": "count",
      "as": "no_count"
    }]
    },
    {"calculate": "datum.b_count/datum.no_count", "as": "a_count"}
   ],
  "encoding": {
    "y": {"field": "name", "type": "nominal", "sort": "-x", "title": null},
    "x": {"field": "a_count", "type": "quantitative", "title": null}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {"field": "a_count", "type": "quantitative", "legend": null}
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 17,
        "align": "left",
        "dx": 5,
        "aria": false
      },
      "encoding": {
        "text": {"field": "a_count", "type": "quantitative"}
      }
    }
  ]
}

```

output :

![image](https://us1.discourse-cdn.com/elastic/original/3X/3/9/39f7a4f15141017b2c57e0352000479b28778248.png)

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [May 5, 2021, 9:02am UTC](https://discuss.elastic.co/t/length-of-bar-and-text-are-not-matching-in-bar-visualization/271539/2 "2021-05-05T09:02:35Z")

</div>

I would probably recommend to debug the Vega visualization pipeline using the debug tools.  
You can access the debug tools via `Inspect` =\> `View: Request` =\> `View: Vega debug`. The different steps of the pipeline are visible as `data_X` in the `Data sets` table.

This is what I see when opening the debug tools for your `a_count` and `b_count` values:

 ![Screenshot 2021-05-05 at 11.01.09](https://us1.discourse-cdn.com/elastic/original/3X/0/a/0a7fabd5e8bd1cc61b5c224f9059c37d8ebf6157.png)

---

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [May 10, 2021, 6:38am UTC](https://discuss.elastic.co/t/length-of-bar-and-text-are-not-matching-in-bar-visualization/271539/3 "2021-05-10T06:38:28Z")

</div>

Hi @Marco_Liberati

Due to usage of joinaggregate transform function (for name field), a\_count is repeated as per input instead of showing corresponding values only once. Because of this whenever a\_count is used for x-axis it's adding all the values for particular parameter.

For example, a is repeated twice, due to which a bar length is shown as 2, where as I am expecting to show it as 1.

In case aggregate function is used in place of joinagrregate :

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",

  "data": {
    "values": [
      {"name": "a", "count": 3},
      {"name": "b", "count": 3},
      {"name": "b", "count": 1},
      {"name": "e", "count": 3},
      {"name": "e", "count": 3},
      {"name": "e", "count": 3},
      {"name": "g", "count": 1},
      {"name": "g", "count": 1},
       {"name": "a", "count": 1},
      {"name": "b", "count": 3},
      {"name": "b", "count": 3},
      {"name": "e", "count": 3},
      {"name": "e", "count": 3},
      {"name": "e", "count": 3},
      {"name": "g", "count": 1},
      {"name": "g", "count": 1}
    ]
  },
   "transform": [
        {
   "aggregate": [{
      "op": "count",
      "field": "name",
      "as": "b_count"
    }],
    "groupby": ["name"]
  },
    {
    "joinaggregate": [{
      "op": "distinct",
      "field": "count",
      "as": "no_count"
    }]
    },
    {"calculate": "datum.b_count/datum.no_count", "as": "a_count"}
 
   ],
  "encoding": {
    "y": {"field": "name", "type": "nominal", "sort": "-x", "title": null},
    "x": {"field": "a_count", "type": "quantitative", "title": null}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {"field": "a_count", "type": "quantitative", "legend": null}
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 17,
        "align": "left",
        "dx": 5,
        "aria": false
      },
      "encoding": {
        "text": {"field": "a_count", "type": "quantitative"}
      }
    }
  ]
}

```

Here I am getting distinct values (no\_count) as 1, whereas it should be 2.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/c/8cfd00300a39d7a357052e4b7d184ae864e6fd6b.png)

May I know if there is any solution for this one?

---

<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:** [June 7, 2021, 6:39am UTC](https://discuss.elastic.co/t/length-of-bar-and-text-are-not-matching-in-bar-visualization/271539/4 "2021-06-07T06:39:13Z")

</div>

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