This website is for Vega-Lite v4. Go to the main Vega-Lite homepage for the latest release.

Arc

Edit this page
// Single View Specification
{
  "data": ... ,
  "mark": "arc",
  "encoding": ... ,
  ...
}

Arc marks are circular arcs defined by a center point plus angular and radial extents. Arc marks are typically used for radial plots such as pie and donut charts.

Documentation Overview

Arc Mark Properties

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

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

Property Type Description
radius Number | ExprRef

For arc mark, the primary (outer) radius in pixels.

For text marks, polar coordinate radial offset, in pixels, of the text from the origin determined by the x and y properties.

radius2 Number | ExprRef

The secondary (inner) radius in pixels of arc marks.

innerRadius Number | ExprRef

The inner radius in pixels of arc marks. innerRadius is an alias for radius2.

outerRadius Number | ExprRef

The outer radius in pixels of arc marks. outerRadius is an alias for radius.

theta Number | ExprRef
  • For arc marks, the arc length in radians if theta2 is not specified, otherwise the start arc angle. (A value of 0 indicates up or “north”, increasing values proceed clockwise.)

  • For text marks, polar coordinate angle in radians.

theta2 Number | ExprRef

The end angle of arc marks in radians. A value of 0 indicates up or “north”, increasing values proceed clockwise.

cornerRadius Number | ExprRef

The radius in pixels of rounded rectangles or arcs’ corners.

Default value: 0

padAngle Number | ExprRef

The angular padding applied to sides of the arc, in radians.

radiusOffset Number | ExprRef

Offset for radius.

radius2Offset Number | ExprRef

Offset for radius2.

thetaOffset Number | ExprRef

Offset for theta.

theta2Offset Number | ExprRef

Offset for theta2.

Examples

Pie and Donut Charts

We can create a pie chart by encoding theta and color or arc marks.

Setting innerRadius to non-zero values will create a donut chart.

You can also add a text layer to add labels to a pie chart.

Note: For now, you need to add stack: true to theta to force the text to apply the same polar stacking layout.

Arc Config

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

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

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