Customizing SizeEdit this page
This page describe how to adjust width and height of visualizations in Vega-lite.
- Width and Height of Single and Layered Plots
- Width and Height of Multi-View Displays
Width and Height of Single and Layered Plots
Single view and layer specifications can contain
height properties for customizing the view size.
height set the size of the data rectangle (plotting) dimensions.
To set the overall size of the visualization, the
autosize property can be specified.
Explicitly Specified Width and Height
When the top-level
width property is specified, the width of the single plot is the specified value for all scale types of the x-axis. Similarly, when the top-level
height property is specified, the height of the single plot is the specified value for all scale types of the y-axis.
Note: If numeric
rangeStep for a discrete x/y-scale is specified when
height is specified, the
rangeStep will be ignored (overridden with
Warning: If the cardinality of the x/y-field’s domain is too high, the
rangeStep might become less than one pixel and the mark might not appear correctly.
Default Width and Height
If the top-level
height property is not specified, the width / height of a single view is determined by the properties of the
If (1) the view’s
"fit"or (2) the
yaxis has a continuous scale (either quantitative or time) or a discrete scale with
null, the width/height is drawn directly from the
autosizetype is not
ychannel has a band or point scale in which
rangeStepis a number or unspecified, the width / height is determined based on the scale’s range step, paddings, and the cardinality of the encoded field (the number of possible distinct values of the field).
This example shows a plot with a continuous y-scale and a discrete x-scale:
- If the
ychannel has a discrete scale with
null, the width / height is drawn directly from the
config.view.heightproperty and the band of the scale will be adjusted to fit to the width.
yis not mapped to a field, the width / height is derived from config.scale.rangeStep except for the width when the mark is
text. In that case, the width will be drawn from config.scale.textXRangeStep.
For example, the following plot use
21 as a default height.
The specified dimensions of a chart as explained above set the size of the data rectangle (plotting) dimensions. You can override this behavior by setting the autosize property in the top level specification. Please note the limitations below.
The autosize property can be a string or an object with the following properties:
The sizing format type. One of
A boolean flag indicating if autosize layout should be re-calculated on every view update.
Determines how size calculation should be performed, one of
The total size of a Vega-Lite visualization may be determined by multiple factors: specified width, height, and padding values, as well as content such as axes, legends, and titles. To support different use cases, there are three different autosize types for determining the final size of a visualization view:
none: No automatic sizing is performed. The total visualization size is determined solely by the provided width, height and padding values. For example, by default the total width is calculated as
width + padding.left + padding.right. Any content lying outside this region will be clipped. If autosize.contains is set to
"padding", the total width is instead simply width.
pad: Automatically increase the size of the view such that all visualization content is visible. This is the default autosize setting, and ensures that axes, legends and other items outside the normal width and height are included. The total size will often exceed the specified width, height, and padding.
fit: Automatically adjust the layout in an attempt to force the total visualization size to fit within the given width, height and padding values. This setting causes the plotting region to be made smaller in order to accommodate axes, legends and titles. As a result, the value of the width and height signals may be changed to modify the layout. Though effective for many plots, the
fitmethod can not always ensure that all content remains visible. For example, if the axes and legends alone require more space than the specified width and height, some of the content will be clipped. Similar to
none, by default the total width will be
width + padding.left + padding.right, relative to the original, unmodified width value. If autosize.contains is set to
"padding", the total width will instead be the original width.
In order to
fit a chart into specified dimensions, it has to satisfy two requirements:
- The view must be either a single view or a layered view. Fit does not work with other kinds of composed views (
- The width and height of the chart cannot depend on an explicitly specified
rangeStepof a discrete scale. Any specified
rangeStepwill be ignored.
Below is an example of a bar chart that fits exactly into 300px width.
Width and Height of Multi-View Displays
Currently, width and height of multi-view displays including concatenated, faceted, and repeated are determined based on the size of the composed unit and layered views. To adjust the size of multi-view displays, you can
height of the inner unit and layered views.
For example, you can adjust
height of the inner single view specification to adjust the size of a faceted plot.
Note: If you use the
column channel to create a faceted plot,
height will be applied to the inner single-view plot.
For example, this specification is equivalent to the specification above.