# How to determine separation between labels in axis?
**URL:** https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861
**Category:** Kibana
**Tags:** vega
**Created:** [April 12, 2021, 10:22am UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861 "2021-04-12T10:22:16Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)
#### Post date: [April 12, 2021, 10:22am UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/1 "2021-04-12T10:22:16Z")
Hello,
> **[Simple Bar Chart](https://vega.github.io/vega-lite/examples/bar.html)**
>
> A bar chart encodes quantitative values as the extent of rectangular bars.
If we consider above chart as an example, by default labels are separated with difference of 20.
Is there any way that we can control the difference/separation between labels?
---
### Author:  [@wayneseymour](https://discuss.elastic.co/u/wayneseymour)
#### Post date: [April 16, 2021, 12:30am UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/2 "2021-04-16T00:30:32Z")
@Pranusha119 Hello there, I did some digging and discovered the default spacing is 20. Here's an example changing it to 30:
```auto
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"spacing": 30,
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
}
}
```
---
### Author:  [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)
#### Post date: [April 16, 2021, 8:28am UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/3 "2021-04-16T08:28:44Z")
Hi @wayneseymour
Tried this spec, it's still giving the default spacing (20)
---
### Author:  [@wayneseymour](https://discuss.elastic.co/u/wayneseymour)
#### Post date: [April 21, 2021, 4:37pm UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/4 "2021-04-21T16:37:28Z")
@Pranusha119 ok, I'll ask around and see if we can fix this up
---
### Author:  [@wayneseymour](https://discuss.elastic.co/u/wayneseymour)
#### Post date: [April 21, 2021, 11:57pm UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/5 "2021-04-21T23:57:14Z")
@Pranusha119 I've yet to "ask around" in in lieu of that I've been mucking about with the online editor and documentation.
Looks like we can achieve what you are looking for by adjusting the `axis` values like I've done here:
```auto
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28},
{"a": "B", "b": 55},
{"a": "C", "b": 43},
{"a": "D", "b": 91},
{"a": "E", "b": 81},
{"a": "F", "b": 53},
{"a": "G", "b": 19},
{"a": "H", "b": 87},
{"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {
"field": "a",
"type": "nominal",
"axis": {
"labelAngle": 0,
"labelOffset": 10,
"labelPadding": 50,
"labelSeparation": 20
}
},
"y": {"field": "b", "type": "quantitative"}
}
}
```
Sounds like we need some amalgamation of the axis label properties such as `labelPadding`, `labelOffset`, and so on.
What are your thoughts @Pranusha119 ?
---
### Author:  [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)
#### Post date: [April 22, 2021, 12:22am UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/6 "2021-04-22T00:22:56Z")
Easy way is to add an overall width and the spacing changes.
```auto
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"width": 600,
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
}
}
```
---
### Author:  [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)
#### Post date: [April 29, 2021, 12:00pm UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/7 "2021-04-29T12:00:36Z")
Hi @wayneseymour and @aaron-nimocks
I need separation between labels in y-axis as 30, for example now in y-axis labels are 0,20,40,60.... I want it as 0,30,60,90
---
### Author:  [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)
#### Post date: [April 29, 2021, 12:13pm UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/8 "2021-04-29T12:13:16Z")
I know you can do this in Vega and the answer I gave was the only way I can think of how to do it in Vega-Lite. If you make the overall width bigger than all the y-axis labels increase with it.
Using Vega you get more control out of how everything is displayed.
---
### Author:  [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)
#### Post date: [April 29, 2021, 3:38pm UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/9 "2021-04-29T15:38:50Z")
okay, thanks @aaron-nimocks
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [May 27, 2021, 3:39pm UTC](https://discuss.elastic.co/t/how-to-determine-separation-between-labels-in-axis/269861/10 "2021-05-27T15:39:22Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.