# Grouped bar chart in vega Kibana

**URL:** <https://discuss.elastic.co/t/grouped-bar-chart-in-vega-kibana/262088>\
**Category:** Kibana\
**Created:** [January 25, 2021, 11:26am UTC](https://discuss.elastic.co/t/grouped-bar-chart-in-vega-kibana/262088 "2021-01-25T11:26:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sama.sowjanya](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@sama.sowjanya](https://discuss.elastic.co/u/sama.sowjanya)\
**Post date:** [January 25, 2021, 11:26am UTC](https://discuss.elastic.co/t/grouped-bar-chart-in-vega-kibana/262088/1 "2021-01-25T11:26:26Z")

</div>

Hello Everyone

I have a grouped bar chart which is plotted correctly in Vega online editor, but when I try the code in Kibana the graph is not plotted correctly.

The desired graph should be like  
 ![grouped bar chart](https://us1.discourse-cdn.com/elastic/original/3X/9/9/99249949c5b85748efe74cf91915124174c3608e.png)

x- axis year grouped by month  
y-axis - count of inc logged/ ticket(field)

Below is the snippet I am trying in Kibana vega visualization.

```auto
    {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  
  "title": "count of incidents grouped by year & month",
  "data": [
    {
      "name": "table",
      url: {
      // Apply dashboard context filters when set
      %context%: true
      index: grpdata
       body: {
        _source: ["num","year","month","priority","ticket"]
      } 
   }
   format: { property: "hits.hits" }
    /* "transform": [
          {"type": "filter", "expr": "( priority == 'All' ) ? priority != datum.priority : priority == datum.priority"}
      ] */
    }
  ],
  /* "signals": [
    {
      "name": "priority",
      "value": "All",
      "bind": {"input": "select", "options": ["All","p1", "p2", "p3", "p4"]}
    }
  ], */
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "_source.year"},
       "range": "width",
      "padding": 0.2
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "table", "field": "_source.ticket"},
      "range": "height",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "_source.month"},
      "range": {"scheme": "category20"}
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "tickSize": 0,
      "labelPadding": 4,
      "zindex": 1,
      "title": ["num of inc"]
    },
    {"orient": "bottom", "scale": "xscale", "title": ["year grouped by month"]}
  ],
  "marks": [
    {
      "type": "group",
      "from": {"facet": {"data": "table", "name": "facet", "groupby": "year"}},
      "encode": {"enter": {"x": {"scale": "xscale", "field": "year"}}},
      "signals": [{"name": "width", "update": "bandwidth('xscale')"}],
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "width",
          "domain": {"data": "facet", "field": "_source.month"}
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {"data": "facet"},
          "type": "rect",
          "encode": {
            "enter": {
              "x": {"scale": "pos", "field": "_source.month"},
              "width": {"scale": "pos", "band": 1},
              "y": {"scale": "yscale", "field": "_source.ticket"},
              "y2": {"scale": "yscale", "value": 0},
              "fill": {"scale": "color", "field": "_source.month"}
            }
          }
        }
      ]
    }
  ]
}

```

Thank you.

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [January 25, 2021, 3:43pm UTC](https://discuss.elastic.co/t/grouped-bar-chart-in-vega-kibana/262088/2 "2021-01-25T15:43:25Z")

</div>

Could you provide the spec? This would help look at the issue and also let us see the underlying data.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/1/7110a016af9bb5b80cde97852675961bbcbd1a68.png)

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [January 25, 2021, 3:56pm UTC](https://discuss.elastic.co/t/grouped-bar-chart-in-vega-kibana/262088/3 "2021-01-25T15:56:16Z")

</div>

You're using a `select` signal, which Vega renders using a scrollbar by default. See this bug [https://github.com/elastic/kibana/issues/77553](https://github.com/elastic/kibana/issues/77553) for a workaround, which is to use an exact pixel size instead of auto size

---

<div class="post-metadata">

**Author:** ![sama.sowjanya](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@sama.sowjanya](https://discuss.elastic.co/u/sama.sowjanya)\
**Post date:** [January 27, 2021, 6:38am UTC](https://discuss.elastic.co/t/grouped-bar-chart-in-vega-kibana/262088/4 "2021-01-27T06:38:33Z")

</div>

Hi @aaron-nimocks

sorry for the delay.  
Below is the spec code.

{  
"$schema": "[https://vega.github.io/schema/vega/v5.json](https://vega.github.io/schema/vega/v5.json)",  
"data": {  
"name": "table",  
"format": {  
"property": "hits.hits"  
},  
"values": {  
"took": 5,  
"timed\_out": false,  
"\_shards": {  
"total": 1,  
"successful": 1,  
"skipped": 0,  
"failed": 0  
},  
"hits": {  
"total": 11,  
"max\_score": 0,  
"hits": [  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "cB6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "jan",  
"ticket": 10,  
"year": 1885,  
"priority": "p1"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "cR6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "feb",  
"ticket": 17,  
"year": 1885,  
"priority": "p2"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "ch6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "mar",  
"ticket": 20,  
"year": 1885,  
"priority": "p3"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "cx6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "apr",  
"ticket": 15,  
"year": 1885,  
"priority": "p3"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "dB6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "jan",  
"ticket": 27,  
"year": 1990,  
"priority": "p4"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "dR6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "feb",  
"ticket": 32,  
"year": 1990,  
"priority": "p1"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "dh6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "mar",  
"ticket": 11,  
"year": 1990,  
"priority": "p4"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "dx6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "apr",  
"ticket": 28,  
"year": 1990,  
"priority": "p3"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "eB6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "jan",  
"ticket": 16,  
"year": 2000,  
"priority": "p2"  
}  
},  
{  
"\_index": "grpdata",  
"\_type": "\_doc",  
"\_id": "eR6C9XYBnEfVCkKl1axb",  
"\_score": 0,  
"\_source": {  
"month": "feb",  
"ticket": 19,  
"year": 2000,  
"priority": "p2"  
}  
}  
]  
}  
}  
},  
"transform": [  
{  
"calculate": "datum.\_source.year",  
"as": "year"  
},  
{  
"calculate": "datum.\_source.month",  
"as": "month"  
},  
{  
"calculate": "datum.\_source.priority",  
"as": "priority"  
},  
{  
"calculate": "datum.\_source.num",  
"as": "num"  
},  
{  
"calculate": "datum.\_source.ticket",  
"as": "ticket"  
}  
],  
"scales": [  
{  
"name": "xscale",  
"type": "band",  
"domain": {  
"data": "table",  
"field": "\_source.year"  
},  
"range": "width",  
"padding": 0.2  
},  
{  
"name": "yscale",  
"type": "linear",  
"domain": {  
"data": "table",  
"field": "\_source.ticket"  
},  
"range": "height",  
"round": true,  
"zero": true,  
"nice": true  
},  
{  
"name": "color",  
"type": "ordinal",  
"domain": {  
"data": "table",  
"field": "\_source.month"  
},  
"range": {  
"scheme": "category20"  
}  
}  
],  
"axes": [  
{  
"orient": "left",  
"scale": "yscale",  
"tickSize": 0,  
"labelPadding": 4,  
"zindex": 1  
},  
{  
"orient": "bottom",  
"scale": "xscale"  
}  
],  
"marks": [  
{  
"type": "group",  
"from": {  
"facet": {  
"data": "table",  
"name": "facet",  
"groupby": "year"  
}  
},  
"encode": {  
"enter": {  
"x": {  
"scale": "xscale",  
"field": "year"  
}  
}  
},  
"signals": [  
{  
"name": "width",  
"update": "bandwidth('xscale')"  
}  
],  
"scales": [  
{  
"name": "pos",  
"type": "band",  
"range": "width",  
"domain": {  
"data": "facet",  
"field": "\_source.month"  
}  
}  
],  
"marks": [  
{  
"name": "bars",  
"from": {  
"data": "facet"  
},  
"type": "rect",  
"encode": {  
"enter": {  
"x": {  
"scale": "pos",  
"field": "\_source.month"  
},  
"width": {  
"scale": "pos",  
"band": 1  
},  
"y": {  
"scale": "yscale",  
"field": "\_source.ticket"  
},  
"y2": {  
"scale": "yscale",  
"value": 0  
},  
"fill": {  
"scale": "color",  
"field": "\_source.month"  
}  
}  
}  
},  
{  
"type": "text",  
"from": {  
"data": "bars"  
},  
"encode": {  
"enter": {  
"y": {  
"field": "y2",  
"offset": -5  
},  
"x": {  
"field": "x",  
"offset": {  
"field": "width",  
"mult": 0.5  
}  
},  
"fill": [  
{  
"test": "contrast('white', datum.fill) \> contrast('black', datum.fill)",  
"value": "white"  
},  
{  
"value": "black"  
}  
],  
"align": {  
"value": "right"  
},  
"baseline": {  
"value": "middle"  
},  
"text": {  
"field": "datum.value"  
}  
}  
}  
}  
]  
}  
],  
"config": {  
"range": {  
"category": {  
"scheme": "elastic"  
}  
},  
"arc": {  
"fill": "#54B399"  
},  
"area": {  
"fill": "#54B399"  
},  
"line": {  
"stroke": "#54B399"  
},  
"path": {  
"stroke": "#54B399"  
},  
"rect": {  
"fill": "#54B399"  
},  
"rule": {  
"stroke": "#54B399"  
},  
"shape": {  
"stroke": "#54B399"  
},  
"symbol": {  
"fill": "#54B399"  
},  
"trail": {  
"fill": "#54B399"  
},  
"title": {  
"color": "#343741"  
},  
"style": {  
"guide-label": {  
"fill": "#69707d"  
},  
"guide-title": {  
"fill": "#343741"  
},  
"group-title": {  
"fill": "#343741"  
},  
"group-subtitle": {  
"fill": "#343741"  
}  
},  
"axis": {  
"tickColor": "#eef0f3",  
"domainColor": "#eef0f3",  
"gridColor": "#eef0f3"  
},  
"background": "transparent"  
},  
"width": "container",  
"height": "container",  
"autosize": {  
"type": "fit",  
"contains": "padding"  
}  
}

The above code is populating the graph with max values, instead of all the values.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/0/2/026865e06644382210cfc379aecc8c89b06df083.png)

where as I need graph to plot all the values.

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

---

<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:** [February 24, 2021, 6:38am UTC](https://discuss.elastic.co/t/grouped-bar-chart-in-vega-kibana/262088/5 "2021-02-24T06:38:41Z")

</div>

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