CODEWITHSUNDEEP
vega-lite
Klaus Eckelt
Klaus Eckelt

Reputation: 685

Line wrap for horizontal legends in vega-lite

Is there a way to make the labels in a legend with horizontal direction wrap? I made a simple example wtih the cars dataset where i transformed the categtories to generate longer strings in the Vega Editor: enter image description here

Suppose I have more categories but also want to put the legend at the top/bottom to provide more horizontal space for the chart area.

Upvotes: 2

Views: 1138

Answers (2)

btk
btk

Reputation: 3225

Use the columns property of legend:

  {
    "legend": {
    "orient": "top",
    "direction": "horizontal",
    "columns": 2
  }

Upvotes: 1

Klaus Eckelt
Klaus Eckelt

Reputation: 685

I've created a custom legend in a separate div.

The categories and their mapped colors in the Vega visualization can be accessed via the View API:

const colors = vegaView.scale('color').range();
const categories = vegaView.scale('color').domain()

Upvotes: 0

Related Questions