How to determine separation between labels in axis?

Elastic Stack Kibana
1

Hello,

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?

2

@Pranusha119 Hello there, I did some digging and discovered the default spacing is 20. Here's an example changing it to 30:

{
  "$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"}
  }
}
3

Hi @wayneseymour
Tried this spec, it's still giving the default spacing (20)

image
image1100×503 22.4 KB

4

@Pranusha119 ok, I'll ask around and see if we can fix this up

5

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

{
  "$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 ?

6

Easy way is to add an overall width and the spacing changes.

{
  "$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"}
  }
}
7

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

8

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.

9

okay, thanks @aaron-nimocks

10

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