Vega-Lite Size: width, height, autosize, and responsive container

If you searched for vega size, vega height, vega autosize, or vega-lite width "container" responsive, this page gives direct answers and working examples.

Quick answers

Query	Short answer
`what is the size of vega`	If you do not set `width` and `height`, Vega-Lite uses defaults from `config.view.*` (commonly `continuousWidth: 200`, `continuousHeight: 200`, and step-based discrete sizing).
`vega height` / `height vega`	`height` is in pixels when numeric, for example `"height": 300`.
`vega-lite width "container"`	Use `"width": "container"` and make sure the parent element has a real width.
`vega autosize`	Use `autosize.type` (`pad`, `fit`, `fit-x`, `fit-y`, `none`) to control layout behavior.

Default Vega-Lite size

When you do not set width and height, Vega-Lite computes them from config:

config.view.continuousWidth for continuous x fields.
config.view.discreteWidth for discrete x fields.
config.view.continuousHeight for continuous y fields.
config.view.discreteHeight for discrete y fields.

{
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Set fixed width and height

Set numeric values when you need strict size control:

{
  "width": 400,
  "height": 200,
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Fixed size is simple, but it can crowd charts with many categories.

Vega-Lite width "container" responsive

To make a chart responsive, set width or height to "container":

{
  "width": "container",
  "height": 300,
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Responsive checklist:

Parent container must have a real layout width.
fit autosize works best on single or layered views.
If container width changes through JS, trigger resize, for example:

window.dispatchEvent(new Event('resize'));

Step-based size for discrete fields

Use step sizing so chart width grows with category count:

{
  "width": {"step": 40},
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

{
  "width": {"step": 40},
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43},
      {"category": "D", "value": 64}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Vega autosize

autosize controls how Vega-Lite fits marks, axes, titles, and legends:

pad: Default. Preserves your view size and pads for guides.
fit: Tries to fit chart content into the specified width and height.
fit-x: Fit only on x dimension.
fit-y: Fit only on y dimension.
none: Do not adjust size automatically.

{
  "autosize": {"type": "fit", "resize": true},
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Width and height in multi-view charts

For facet, concat, and other composed views, set size on the inner unit spec:

{
  "data": {"url": "data/movies.json"},
  "facet": {"column": {"field": "MPAA Rating"}},
  "spec": {
    "width": 75,
    "height": 75,
    "mark": "point",
    "encoding": {
      "x": {"field": "Worldwide Gross", "type": "quantitative"},
      "y": {"field": "US DVD Sales", "type": "quantitative"}
    }
  }
}

You can do the same when faceting through encoding:

{
  "width": 75,
  "height": 75,
  "data": {"url": "data/movies.json"},
  "mark": "point",
  "encoding": {
    "column": {"field": "MPAA Rating"},
    "x": {"field": "Worldwide Gross", "type": "quantitative"},
    "y": {"field": "US DVD Sales", "type": "quantitative"}
  }
}

Fix error: the width(-1) and height(-1) of chart should be greater than 0

This error usually means Vega-Lite read a zero-width or zero-height container when the chart initialized.

Common fixes:

Ensure the chart parent is visible and has width before mounting.
Avoid hidden tabs without a resize call after tab activation.
Use numeric height if your container height is not explicit.
Trigger resize after layout changes:

window.dispatchEvent(new Event('resize'));

If needed, delay chart render until container is measurable.

FAQ

What is the size of Vega by default?

In Vega-Lite, default size comes from config.view.*. Continuous fields usually map to 200x200 style defaults, while discrete axes use step-based defaults.

Can I use `autosize: "fit"` with all chart types?

No. fit is mainly for single and layered views. For faceted and concatenated views, size each inner spec.

What if fixed width causes crowded bars?

Use width: {"step": ...} or switch to autosize strategies.

{
  "width": 200,
  "data": {
    "url": "data/movies.json"
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "IMDB Rating"},
    "y": {"aggregate": "count"}
  }
}

Title Arc