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

// 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 Any
aspect Boolean

Whether to keep aspect ratio of image marks.

align String

The horizontal alignment of the text or ranged marks (area, bar, image, rect, rule). One of "left", "right", "center".

baseline String

The vertical alignment of the text or ranged marks (area, bar, image, rect, rule). One of "top", "middle", "bottom".

Default value: "middle"

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).