Class pv.Area

Extends pv.Mark.
Represents an area mark: the solid area between two series of connected line segments. Unsurprisingly, areas are used most frequently for area charts.

Just as a line represents a polyline, the Area mark type represents a polygon. However, an area is not an arbitrary polygon; vertices are paired either horizontally or vertically into parallel spans, and each span corresponds to an associated datum. Either the width or the height must be specified, but not both; this determines whether the area is horizontally-oriented or vertically-oriented. Like lines, areas can be stroked and filled with arbitrary colors.

See also the Area guide.
Defined in: Area.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	pv.Area() Constructs a new area mark with default properties.

Field Summary
Field Attributes	Field Name and Description
	defaults Default properties for areas.
	fillStyle The area fill style; if non-null, the interior of the polygon forming the area is filled with the specified color.
	height The height of a given span, in pixels; used for vertical spans.
	interpolate How to interpolate between values.
	lineWidth The width of stroked lines, in pixels; used in conjunction with `strokeStyle` to stroke the perimeter of the area.
	segmented Whether the area is segmented; whether variations in fill style, stroke style, and the other properties are treated as fixed.
	strokeStyle The style of stroked lines; used in conjunction with `lineWidth` to stroke the perimeter of the area.
	tension The tension of cardinal splines; used in conjunction with interpolate("cardinal").
	width The width of a given span, in pixels; used for horizontal spans.

Fields borrowed from class pv.Mark:: bottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible

Method Summary
Method Attributes	Method Name and Description
	anchor(name) Constructs a new area anchor with default properties.

Methods borrowed from class pv.Mark:: add, anchorTarget, def, event, extend, margin, mouse, render

Class Detail

pv.Area()

Constructs a new area mark with default properties. Areas are not typically constructed directly, but by adding to a panel or an existing mark via pv.Mark#add.

Field Detail

{pv.Area} defaults

Default properties for areas. By default, there is no stroke and the fill style is a categorical color.

{string} fillStyle

The area fill style; if non-null, the interior of the polygon forming the area is filled with the specified color. The default value of this property is a categorical color.

This property is fixed for non-segmented areas. See pv.Mark.

See:: pv.color

{number} height

The height of a given span, in pixels; used for vertical spans. If the height is specified, the width property should be 0 (the default). Either the left or right property should be used to space the spans horizontally, typically as a multiple of the index.

{string} interpolate

How to interpolate between values. Linear interpolation ("linear") is the default, producing a straight line between points. For piecewise constant functions (i.e., step functions), either "step-before" or "step-after" can be specified. To draw open uniform b-splines, specify "basis". To draw cardinal splines, specify "cardinal"; see also #tension.

This property is fixed. See pv.Mark.

{number} lineWidth

The width of stroked lines, in pixels; used in conjunction with strokeStyle to stroke the perimeter of the area. Unlike the Line mark type, the entire perimeter is stroked, rather than just one edge. The default value of this property is 1.5, but since the default stroke style is null, area marks are not stroked by default.

This property is fixed for non-segmented areas. See pv.Mark.

{boolean} segmented

Whether the area is segmented; whether variations in fill style, stroke style, and the other properties are treated as fixed. Rendering segmented areas is noticeably slower than non-segmented areas.

This property is fixed. See pv.Mark.

{string} strokeStyle

The style of stroked lines; used in conjunction with lineWidth to stroke the perimeter of the area. Unlike the Line mark type, the entire perimeter is stroked, rather than just one edge. The default value of this property is null, meaning areas are not stroked by default.

This property is fixed for non-segmented areas. See pv.Mark.

See:: pv.color

{number} tension

The tension of cardinal splines; used in conjunction with interpolate("cardinal"). A value between 0 and 1 draws cardinal splines with the given tension. In some sense, the tension can be interpreted as the "length" of the tangent; a tension of 1 will yield all zero tangents (i.e., linear interpolation), and a tension of 0 yields a Catmull-Rom spline. The default value is 0.7.

This property is fixed. See pv.Mark.

{number} width

The width of a given span, in pixels; used for horizontal spans. If the width is specified, the height property should be 0 (the default). Either the top or bottom property should be used to space the spans vertically, typically as a multiple of the index.

Method Detail

{pv.Anchor} anchor(name)

Constructs a new area anchor with default properties. Areas support five different anchors:

top
left
center
bottom
right

In addition to positioning properties (left, right, top bottom), the anchors support text rendering properties (text-align, text-baseline). Text is rendered to appear inside the area. The area anchor also propagates the interpolate, eccentricity, and tension properties such that an anchored area or line will match positions between control points.

For consistency with the other mark types, the anchor positions are defined in terms of their opposite edge. For example, the top anchor defines the bottom property, such that an area added to the top anchor grows upward.

Parameters:
{string} name: the anchor name; either a string or a property function.

Returns:: {pv.Anchor}

Classes

Class pv.Area