XYAxis #

The XYAxis widget generates the x-axis and y-axis for the following widgets: Area, Bar, Column, Contour, Gantt, HexBin, Line, Scatter and Step.

The x and y axis extend a core 'Axis' widget and share all of the same properties (with the exception of xAxisFocus and xAxisFocusHeight). This means that the 'xAxis' and 'yAxis' prefixes can be used interchangeably to affect the corresponding axis.

xAxisType is likely the most significant property as it determines the expected data shape. This is the breakdown of the different axis types:

• "ordinal" - displays categorical data
• "linear" - displays numerical data
• "time" - displays time data
• "pow" - displays numerical data skewed by a power of 2 to emphasize disproportionately large or small values.
• "log" - displays numerical data skewed by a log of base 10 to de-emphasize disproportionately large or small values.

The following two properties only apply to an axis while its type is 'ordinal':

• xAxisOrdinalPaddingInner sets the ratio of the width of a category and the white space between categories.
• xAxisOrdinalPaddingOuter sets the ratio of the width of a category and the white space between the edges of the chart and the first (and/or last) category.

NOTE: Column is used below as the two padding properties require data in order to observe their effect.

xAxisGuideLines displays lines across the background corresponding to each axis tick and perpendicular to their axis.

xAxisDomainLow and xAxisDomainHigh set the axis' lower and upper values (only while the axis type is not ordinal).

xAxisTickCount sets the target number of ticks to display along the axis. The tick count may be slightly lower or higher than the provided number as the axis attempts to place the ticks in sensible intervals.

xAxisTickFormat sets the number format rule for axis tick text (only while the axis type is not ordinal).

xAxisOverlapMode specifies the behavior when tick labels would overlap.

xAxisLabelRotation sets the degree angle of rotation for labels while overlap mode is 'rotate'.

While working with time data the following properties should be used:

• xAxisType should be set to "time"
• xAxisTypeTimePattern should be set to match the string format of your time data.
  • In other words: this property tells the widget how to ingest the time strings in your data
• xAxisTickFormat should be set to match the desired time format of the axis ticks.
  • In other words: this property tells the widget what you want the tick text to look like
• xAxisDomainLow and xAxisDomainHigh are optional, but should you choose to use them, then they should match the format specified xAxisTypeTimePattern.

API #

Published Properties #