Image

Edit this page

// Single View Specification
{
  "data": ... ,
  "mark": "image",
  "encoding": ... ,
  ...
}

Image marks allow external images, such as icons or photographs, to be included in Vega-Lite visualizations. Image files such as PNG or JPG images are loaded from provided URLs.

Documentation Overview

Image Mark Properties
Examples
- Scatterplot with Image Marks
Image Config

Image Mark Properties

// Single View Specification
{
  ...
  "mark": {
    "type": "image",
    ...
  },
  "encoding": ... ,
  ...
}

An image mark definition can contain any standard mark properties and the following special properties:

Property	Type	Description
url	URI \| ExprRef	The URL of the image file for image marks.
aspect	Boolean \| ExprRef	Whether to keep aspect ratio of image marks.
align	String \| ExprRef	The horizontal alignment of the text or ranged marks (area, bar, image, rect, rule). One of `"left"`, `"right"`, `"center"`. Note: Expression reference is not supported for range marks.
baseline	String \| ExprRef	For text marks, the vertical text baseline. One of `"alphabetic"` (default), `"top"`, `"middle"`, `"bottom"`, `"line-top"`, `"line-bottom"`, or an expression reference that provides one of the valid values. The `"line-top"` and `"line-bottom"` values operate similarly to `"top"` and `"bottom"`, but are calculated relative to the `lineHeight` rather than `fontSize` alone. For range marks, the vertical alignment of the marks. One of `"top"`, `"middle"`, `"bottom"`. Note: Expression reference is not supported for range marks.

Examples

Scatterplot with Image Marks

Image Config

// Top-level View Specification
{
  ...
  "config": {
    "image": ...,
    ...
  }
}

The image property of the top-level config object sets the default properties for all image marks. If mark property encoding channels are specified for marks, these config values will be overridden.

The image config can contain any image mark properties (except type, style, and clip).