CODEWITHSUNDEEP
vega-lite
Pramit
Pramit

Reputation: 1411

Is there a way to add a line break between the plot and X axis (vega-lite)

I am not sure if it makes sense but will it be possible to add a line break between the start of the plot and the X-axis.

For e.g.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": {"step": 10},
  "height": 120,
  "data": {"url": "data/cars.json"},
  "mark": "area",
  "encoding": {
    "x": {"field": "Name", "type": "nominal", "scale": {"round": false}},
    "y": {"aggregate": "count", "type": "quantitative"}
  }
}

enter image description here

Hopeful output: enter image description here

Upvotes: 2

Views: 446

Answers (2)

CS.
CS.

Reputation: 786

Another way to do something similar, adding it as another answer to make it convenient for others.

offset property of axis shifts the axis line by fixed pixels, independent of the data. Using offset adds a gap between the x and y axis lines though.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": {"step": 10},
  "height": 120,
  "data": {"url": "data/cars.json"},
  "mark": "area",
  "encoding": {
    "x": {"field": "Name", "type": "nominal", "scale": {"round": false}, "axis": {"offset": 5}},
    "y": {"aggregate": "count", "type": "quantitative"}
  }
}

Upvotes: 0

jakevdp
jakevdp

Reputation: 86463

One way to do this is by adding a scale.domain argument:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": {"step": 10},
  "height": 120,
  "data": {"url": "data/cars.json"},
  "mark": "area",
  "encoding": {
    "x": {"field": "Name", "type": "nominal", "scale": {"round": false}},
    "y": {"aggregate": "count", "type": "quantitative", "scale": {"domain": [-0.5, 6]}}
  }
}

enter image description here

Another way to do this is to use the y and y2 encodings to set a bottom value for the area chart:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": {"step": 10},
  "height": 120,
  "data": {"url": "data/cars.json"},
  "mark": "area",
  "transform": [{"calculate": "0.1", "as": "bottom"}],
  "encoding": {
    "x": {"field": "Name", "type": "nominal", "scale": {"round": false}},
    "y": {"aggregate": "count", "type": "quantitative"},
    "y2": {"field": "bottom"}
  }
}

enter image description here

Upvotes: 1

Related Questions