CODEWITHSUNDEEP
vega-lite
Thomas Stow
Thomas Stow

Reputation: 128

How can I put a line break in a Vega-lite axis title?

I'm new to Vega-lite and I'm trying to figure out if line breaks are possible in axis titles. I have a long axis titles, e.g.:

"Long axis title is too long to fit under the graph"

I've tried:

"Long axis title is too\n long to fit under the graph" and
"Long axis title is too\
long to fit under the graph"

The "\n" doesn't seem to do anything. The "\[enter]" just adds extra space to the line.

My x and y encoding looks like this:

encoding: {
      x: {field: 'a',
          type: 'ordinal',
          sort: {"encoding": "x"},  
          axis: {"title": "Knowledge of the elder\
          categories would melt\
          your psyche",
          "titleFontSize": 30,
          }
          },
      y: {field: 'b', 
          type: 'quantitative',
          axis: {"title": "Your puny mortal mind\ncannot comprehend the units\nof the multiverse!",
          "titleFontSize": 14,
          }
          }
    }

I'm not getting error messages, but I'm not getting line breaks either. I either get no change (from \n), or weird spacing (from [enter]).

Thank you!

Upvotes: 8

Views: 3478

Answers (1)

jakevdp
jakevdp

Reputation: 86310

In Vega-Lite 4.0 or newer, multiline text can be specified in titles by passing an array of strings. For example:

{"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": "ordinal",
      "title": ["First line of title", "second line of title"]
    },
    "y": {"field": "b", "type": "quantitative"}
  }
}

enter image description here

Upvotes: 12

Related Questions