How Can I Customize the Size of My Vega-Lite Visualizations?

In this guide, you'll learn how to easily adjust the width and height of your Vega-Lite visualizations. Whether it's a simple bar chart or a complex layered plot, customizing the dimensions can make your data stories more compelling and easier to digest.

What's the Default Size?

By default, if you don't specify width and height, Vega-Lite determines the size of your visualization based on a few configuration settings.

The width will be based on config.view.continuousWidth for a plot with a continuous x-field with default value of 200, while for a plot with a discrete x-field or no x-field, the width is based on config.view.discreteWidth with a default value of 20.

Similarly, a plot with a continuous y-field will have a height based on config.view.continuousHeight while config.view.discreteHeight for a plot with either a discrete y-field or no y-field.

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

This simple bar chart, for example, will use 200px for the height and adjusts the width per category.

Setting Fixed Dimensions

Sometimes, you want your plot to have fixed dimensions. Simply set the width and height properties to specific pixel values.

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

Be cautious: if your data has many discrete categories, fixing the dimensions might crowd the plot.

Making Your Chart Responsive

Need your chart to fit a container dynamically? Set width or height to "container". This makes the chart adapt to its parent container's size.

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

Important: Ensure the parent container has defined sizes or the chart might not render as expected.

There are some limitations to the responsive charts:

The responsive mode is only available for single view or layer specifications.
The dimensions can be responsive only if the window.resize event is triggered. That means, if you change the container size programmatically (e.g., change the container width by setting element.style.width), the chart will not automatically fit the container unless you manually trigger window.resize event. To achieve that in a modern browser, you can do: window.dispatchEvent(new Event('resize'));.

Advanced Customization

Step-wise Sizing for Discrete Fields

For charts with discrete fields, you can specify size per step instead of fixed dimensions. I.e., you can dynamically set the width or height which depends on the data, e.g. the column count, rather than use a fixed width or height.

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

Autosize

Ever wanted more control over how your visualization adjusts to its content? The autosize setting is here to help!

none: Your plot's size isn't auto-adjusted.
pad: Default setting. Ensures all content fits, including axes and legends.
fit: Tries to fit everything within given dimensions, but may cut off some content if there's not enough space.
fit-x: Adjusts horizontally to fit content.
fit-y: Adjusts vertically to fit content.

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

Apply Width and Height to Multi-View Displays

When dealing with more complex views like concatenated or faceted plots, you can customize the inner unit's dimensions to impact the overall layout.

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

If you use row or column channel to create a faceted plot, width and heitht can be applied to the inner single view plot.

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

FAQs

1. What happens if I set dimensions for an overly large dataset?

For datasets with high cardinality in discrete fields, explicitly setting width or height might lead to crowded plots. Consider using step-wise sizing or autosize settings to better manage space.

In this example, we have amount of data but a fixed improper width is given, so that the rendered chart is crowded.

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

2. Can I use autosize with composed views?

Currently, fit autosize works only with single or layered views. For other composed views like facet, hconcat, or vconcat, manage sizes by configuring inner plot dimensions.

Add and Customize Title Data Source