Axis

The Axis class represents an axis. To create an Axis object, use the axis method in the Scene class, for example:

let axis = scene.axis("x", "metric", {y: 300, tickValues: [0, 30, 60]});

Properties

propertyexplanationtypedefault value
id the unique id of the axisString
type the type of the axisString“axis”
channel the visual channel of the axis
possible values: “x”, “y”, “width”, “height”, or “radialDistance”
String
field the data field of the axisString
iteman example item for the axis,
useful in cases such as small multiples
Vertex or
Mark or
Group
orientationthe orientation of the axis if its channel is “x” or “y”
possible values: “top”, “bottom”, “left”, or “right”
String
pathXthe x coordinate of the axis path if channel is “y” or “height”,
undefined otherwise
Number
pathYthe y coordinate of the axis path if channel is “x” or “width”,
undefined otherwise
Number
strokeColorthe stroke color of the axis path and ticksColor“#555”
textColorthe text color of the axis labelsColor“#555”
tickOffsetthe distance between the ticks and the path (Figure 1)Number0
tickSizethe size of the axis ticksNumber5
tickValuesthe values of the ticks on the axis
if not provided, Mascot will auto-generate values
Array
tickAnchorthe anchor of the ticks on the axis if the items are in a grid layout
refer to the ridgeline plot for an example usage of this property
String
tickVisiblewhether to show the ticksBooleantrue
pathVisiblewhether to show the axis pathBooleantrue
labelOffsetthe distance between the labels and the path (Figure 1)Number15
labelFormatthe formatter of the axis labelsString
labelRotationthe degrees to rotate the axis labelsNumber0
rotationthe degrees to rotate the entire axis if channel is “radialDistance”Number0
titlethe text for the axis titleString
showTitleshow the axis titleBooleantrue if the axis is created
for an encoding field
titleAnchorthe anchor of the axis titleArray
titleOffsetthe distance between the axis title and the path (Figure 1)Number40
titlePositionthe position of the axis titleArray
rotateTitlerotate the axis title if the channel is “y” or “height”Booleantrue
isFlipped returns true if the axis is created for an encoding field
and the direction goes from right to left or from top to bottom
Boolean
axis components

Figure 1: the components in an axis