Axis

1 min read

🏷️ Coordinate axis refers to the axis of statistical chart in two-dimensional space, which is used to define the mapping relationship between direction and value of data in coordinate system.

🎨 Go to AntV Design | 坐标轴 Axis of 墨者学院 to learn more about Design guide.

Axes

axis

Usage

There are two kinds of coordinate axes: xAxis and yAxis, which vary according to the specific Plot.

There are two ways to configure axes:

Method 1, pass in 'Boolean' to set whether to display a legend.

xAxis: false; // hide xAxis

Method 2, pass in AxisCfg to configure the axis as a whole.

xAxis: {
  text: 'title of xAxis'
}

Properties - AxisCfg

top
optional boolean default: false

是否渲染在画布顶层,防止部分图形中,需要将 axis 显示在图形上面,避免被图形遮挡。

position
optional top | bottom | left | right

For Cartesian coordinates, set the position of the coordinate axes.

title
optional object

A configuration item for the title, NULL means not to be displayed.

PropertiesTypeDescription
textstringThe title of axis
positionstringPosition of the axis title, default: 'center'. Options: start, center, end
offsetnumberThe distance of the title from the coordinate axis
spacingnumberThe distance between the title and the text on the coordinate axis
styleshapeStyleTitle text configuration items
autoRotatebooleanWhether to rotate automatically or not, default: true
rotationnumber关闭 autoRotate 后,可以设置自动旋转的角度,如: -Math.PI / 2 (条形图 y 轴标题)

shapeStyle

PropertiesTypeDescription
fillstringFill color of the shape
rnumberused in point, means the radius of geometry
fillOpacitynumberFill opacity of the shape
strokestringStroke color of the shape
lineWidthnumberThe width of the stroke of the shape
lineDash[number,number]Configure dashed line stroke. The first parameter is the length of each segment, and the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect.
lineOpacitynumberOpacity of the stroke
opacitynumberOpacity of the shape
shadowColorstringShadow color of the shape
strokeOpacitynumberStroke opacity of the shape
shadowBlurnumberGaussian blur coefficient of the shadow
shadowOffsetXnumberConfigure horizontal distance between shadow and shape
shadowOffsetYnumberConfigure vertical distance between shadow and shape
cursorstringMouse style, same as the mouse style of CSS, default value : 'default'

Example:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

More documents about ShapeStyle, see Graphic Style.

label

optional object

A configuration item for the text label. NULL indicates that it is not displayed.

PropertiesTypeDescription
typestringWhen a user uses a custom label type, need to declare the specific type, otherwise you will use the default label type rendering (pie chart label support inner | outer | spiders)
offsetnumberlabel offset
offsetXnumberThe offset distance of the label from the data point in the X direction
offsetYnumberThe offset distance of the label from the data point in the Y direction
contentstring | IGroup | IShape | GeometryLabelContentCallbackText content that is displayed, if not declared, is displayed according to the value of the first field participating in the mapping
styleShapeAttrsLabel text graphic property style
autoRotatestringWhether to rotate automatically, default true
rotatenumberText rotation angle, unit is radian, clockwise rotation
labelLinenull | boolean | LabelLineCfgUsed to set the style property of the text connector. NULL indicates that it is not displayed.
labelEmitbooleanOnly applies to text in polar coordinates, indicating whether the text is radially displayed according to the angle. True means on and false means off
layout'overlap' | 'fixedOverlap' | 'limitInShape'Text layout type, support a variety of layout function combination.
position'top' | 'bottom' | 'middle' | 'left' | 'right'Specifies the position of the current Label relative to the current graphic (💡 Attention: Only works for column plot and bar plot, which geometry is interval)
animateboolean | AnimateOptionAnimation configuration.
formatterFunctionFormat function
autoHidebooleanWhether to hide it automatically, default to false

Types of LabelLineCfg are as follow: (Go ShapeAttrs see more details about ShapeAttrs)

type LabelLineCfg = {
  style?: ShapeAttrs;
}

Example code:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    }
  }
}
label
AxisLabelCfg | null optional

Configurations related to axis label. Set this to null to prevent the axis label from appearing. The details of AxisLabelCfg are as follows:

PropertiesType
styleShapeAttrs-Axis label text graphic property style
offsetnumber-Axis label offset
rotatenumber-Axis label text rotation angle
autoRotateboolean |avoidCallbacktrueWhether to rotate automatically, default true
autoHideboolean |avoidCallback | { type:string,cfg?:AxisLabelAutoHideCfg }falseWhether to hide it automatically, default to false
autoEllipsisbooleanfalseWhether to ellipsis label when overflow, default to false
formatter(text: string, item: ListItem, index: number) => anyfalseFormat function

avoidCallback 类型定义如下:

type avoidCallback = (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean;

AxisLabelAutoHideCfg 类型定义如下:

interface AxisLabelAutoHideCfg {
  /** 最小间距配置 */
  minGap?: number;
  type?: string;
}

如果你需要强制最后一个 tick 展示,可以尝试这么设置

{
  scale: {
    [xField 对应的值]: {
      showLast: true,
    }
  },
  xAxis: {
    // 设置默认不自动隐藏,或
    // autoHide: false,
    autoHide: {
      type: 'equidistantceWithReverseBoth'
    }
  }
}
verticalFactor
optional number

Mark the direction of the label on the axis, with 1 to the left and -1 to the right (Only works in vertical axis).

verticalLimitLength
optional number

Configuring the maximum limit length in the vertical direction of the coordinate axis has a significant impact on text adaptation.

grid
optional object

Axis grid line configuration item. NULL means not shown.

PropertiesTypeDescription
linelineStyleThe style of the line
alternateColorstring|string[]The fill color between two grid lines
closedbooleanWhether to close the grid for circle
alignTickbooleanIf the value is false, it will be displayed between the two scales

Then config of grid.line is the same as: line

line
optional object

Coordinate axis configuration item, NULL means not displayed.

Attention: The full configuration of lineStyle is { style: { stroke: '#ddd', ... } }, please check it when your configuration doesn't work.

PropertiesTypeDescription
strokestringcolor of the line
lineWidthnumberwidth of the line
lineDash[number,number]configure dashed line, the first parameter is the length of each segment, the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect.
opacitynumberopacity
shadowColorstringshadow color
shadowBlurnumberGaussian blur coefficient
shadowOffsetXnumberconfigure horizontal distance between shadow and line
shadowOffsetYnumberconfigure vertical distance between shadow and line
cursorstringmouse style, same as the mouse style of CSS, default value : 'default'

Example (config the grid line style of xAxis):

{
  xAxis: {
    grid: {
      line: {
        style: {
          stroke: 'black',
          lineWidth: 2,
          lineDash: [4, 5],
          strokeOpacity: 0.7,
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
          cursor: 'pointer'
        }
      }
    }
  }
}
tickLine
optional object

The configuration item of the coordinate axis scale line. NULL means not displayed.

PropertiesTypeDescription
stylelineStyleThe style of tickLine.
alignTickbooleanWhether aligh tickLine with tick label
lengthnumberThe length of tickLine.

Go ShapeAttrs see more details about ShapeAttrs. The params of ShapeAttrsCallback are as follow:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
subTickLine
optional object

A configuration item for a coordinate subscale. NULL indicates that it is not displayed.

PropertiesTypeDescription
styleShapeAttrs | ShapeAttrsCallbackThe style of subTickLine.
countnumberThe count of subTickLine.
lengthnumberThe length of subTickLine.

Go ShapeAttrs see more details about ShapeAttrs. The params of ShapeAttrsCallback are as follow:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
nice
optional boolean default: true

Whether to nice.

min
optional number default: 0

Minimum axis.

max
optional number

Maximum axis.

minLimit
optional number

Minimal limit.

maxLimit
optional number

Maximum limit.

tickCount
optional number

The expected number of axes, not the final result.

tickInterval
optional number

Interval of axes.

tickMethod
optional string | Function default: false

Specify a tick calculation method, or customize a tick calculation method. Built-in tick calculations include cattime-catwilkinson-extendedr-prettytimetime-prettylogpowquantiled3-linear

animate
optional boolean default: true

Animation switch, default true.

animateOption
optional object

Animation parameter configuration.

interface ComponentAnimateCfg {
  /** Duration of the first animation */
  readonly duration?: number;
  /** Easing method used for the first animation. */
  readonly easing?: string;
  /** Delay before updating the animation */
  readonly delay?: number;
}
// Configure the reference
{
  animateOption: {
    appear: ComponentAnimateCfg;
    update: ComponentAnimateCfg;
    enter: ComponentAnimateCfg;
    leave: ComponentAnimateCfg;
  }
}