PostsDemoVisualsVegaSize And Placement
Copied copy path!

vega

Size and placementURL copied

Charts fill their column and sit centred. A spec that sizes itself — a projection, an hconcat, a repeat — is centred too, rather than hanging off the left margin.

Set width when a chart should be narrower than the column:

width takes any plain CSS length, so a chart can be sized against the browser window rather than the column:

55% of the viewport width

The same chart at a third of the viewport:

33vw

vw, vh, %, px, rem, em and ch are accepted; a bare number means pixels. A value with any other unit, or anything that is not a number and a unit, is dropped — the string reaches a style attribute, so the filter is strict rather than escaped.

A width is capped at the column, so width=90vw inside a narrow column will not force the page to scroll sideways. It is also floored at 24rem, so a small width never collapses into an unreadable sliver — the floor reacts to the column the chart is in rather than to the size of the window.

No !important is used anywhere in the chart stylesheet, so a width= you write always wins.

Set width in the spec itself (as the map on vega-remote does) when the chart needs fixed pixels — a projection cannot be fluid.