# Vega Bar Chart
**URL:** https://discuss.elastic.co/t/vega-bar-chart/283578
**Category:** Kibana
**Tags:** vega
**Created:** [September 7, 2021, 8:14pm UTC](https://discuss.elastic.co/t/vega-bar-chart/283578 "2021-09-07T20:14:50Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Alexandre.Bernier](https://discuss.elastic.co/u/Alexandre.Bernier)
#### Post date: [September 7, 2021, 8:14pm UTC](https://discuss.elastic.co/t/vega-bar-chart/283578/1 "2021-09-07T20:14:50Z")
Hi,
I'm actually working on a new VEGA chart and I can't seem to make it work.
I'm trying to create something like this [Bar Grouped 1](https://vega.github.io/vega-lite/examples/bar_grouped.html) or like this [Bar Grouped 2](https://vega.github.io/vega/examples/grouped-bar-chart/).
I wanna display two columns for one X value.
The first thing that I see is that my data isn't formatted like the examples.
> **Data Sample**
>
> ```auto
> "data": [
> {
> "name": "table",
> "values": [
> {"week":"2021W32", "firstTot":5, "secondTot":2},
> {"week":"2021W33", "firstTot":7, "secondTot":5},
> {"week":"2021W34", "firstTot":3, "secondTot":9},
> {"week":"2021W35", "firstTot":8, "secondTot":8}
> ]
> }
> ]
>
> ```
Is it possible to do something like that?
I tried to do it with a repeat / layer and the only thing that I am able to get is a column hovering another column. Is it possible to display the column side by side?
Regards,
Alexandre
---
### Author:  [@brianseeders](https://discuss.elastic.co/u/brianseeders)
#### Post date: [September 8, 2021, 6:45pm UTC](https://discuss.elastic.co/t/vega-bar-chart/283578/2 "2021-09-08T18:45:50Z")
Hey @Alexandre.Bernier,
Take a look at the following Vega... does this get you what you were looking for?
```auto
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "table",
"values": [
{"week":"2021W32", "firstTot":5, "secondTot":2},
{"week":"2021W33", "firstTot":7, "secondTot":5},
{"week":"2021W34", "firstTot":3, "secondTot":9},
{"week":"2021W35", "firstTot":8, "secondTot":8}
]
},
"transform": [
{
"fold": ["firstTot", "secondTot"]
}
],
"mark": "bar",
"encoding": {
"column": {
"field": "week",
"header": {"orient": "bottom"},
"title": "Week",
"spacing": 10
},
"y": {
"aggregate": "sum",
"field": "value",
"title": "Total",
"axis": {"grid": false}
},
"x": {
"field": "key",
"axis": null
},
"color": {
"field": "key",
"scale": {"range": ["#675193", "#ca8861"]}
}
},
"config": {
"view": {"stroke": "transparent"},
"axis": {"domainWidth": 1}
}
}
```
---
### Author:  [@Alexandre.Bernier](https://discuss.elastic.co/u/Alexandre.Bernier)
#### Post date: [September 9, 2021, 11:55am UTC](https://discuss.elastic.co/t/vega-bar-chart/283578/3 "2021-09-09T11:55:03Z")
Good morning @brianseeders,
Thanks for your reply!
This is exactly what I was looking for.
The only issue that I have now is the "autosize" issue.
Is there any workaround for this? I'm actually the stack in 7.10. If I proceed to update to 7.14, does it correct this issue?
Have a nice day,
Alexandre
---
### Author:  [@Alexandre.Bernier](https://discuss.elastic.co/u/Alexandre.Bernier)
#### Post date: [September 9, 2021, 8:01pm UTC](https://discuss.elastic.co/t/vega-bar-chart/283578/4 "2021-09-09T20:01:22Z")
Hey!
I found a solution.
I will post it tomorrow.
Regards,
Alexandre
---
### Author:  [@Alexandre.Bernier](https://discuss.elastic.co/u/Alexandre.Bernier)
#### Post date: [September 13, 2021, 2:56pm UTC](https://discuss.elastic.co/t/vega-bar-chart/283578/5 "2021-09-13T14:56:29Z")
Hi!
I was facing an autosize issue with VEGA-LITE. I finally decided to adapt my code to use VEGA.
Here's the result. Take note that I remove the "Data" section by confidentiality.
> **Code**
>
> ```auto
> {
> $schema: https://vega.github.io/schema/vega/v5.json
> data: ...
> scales: [
> {
> name: color
> type: ordinal
> domain: {
> data: your_dataset_name
> field: your_field_split
> }
> range: {
> scheme: tableau20
> }
> }
> {
> name: xScale
> type: band
> domain: {
> data: your_dataset_name
> field: your_x_field
> }
> range: width
> padding: 0.2
> }
> {
> name: yScale
> type: linear
> domain: {
> data: formatData
> field: your_y_field
> }
> range: height
> round: true
> zero: true
> nice: true
> }
> ]
> axes: [
> {
> orient: bottom
> scale: xScale
> }
> {
> orient: left
> scale: yScale
> }
> ]
> marks: [
> {
> type: group
> from: {
> facet: {
> data: your_dataset_name
> name: facet
> groupby: your_x_field
> }
> }
> encode: {
> enter: {
> x: {
> scale: xScale
> field: your_x_field
> }
> }
> }
> signals: [
> {
> name: width
> update: bandwidth('xScale')
> }
> ]
> scales: [
> {
> name: pos
> type: band
> range: width
> domain: {
> data: facet
> field: your_split_field
> }
> }
> ]
> marks: [
> {
> name: bars
> type: rect
> from: {
> data: facet
> }
> encode: {
> enter: {
> x: {
> scale: pos
> field: your_split_field
> }
> width: {
> scale: pos
> band: 1
> }
> y: {
> scale: yScale
> field: your_y_field
> }
> y2: {
> scale: yScale
> value: 0
> }
> fill: {
> scale: color
> field: your_split_field
> }
> }
> }
> }
> ]
> }
> ]
> }
>
> ```
Regards,
Alexandre
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [October 11, 2021, 2:57pm UTC](https://discuss.elastic.co/t/vega-bar-chart/283578/6 "2021-10-11T14:57:11Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.