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
Examples
- Pie and Donut Charts
Arc Config

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