XYAxes

• Name: X And Y Axes (X and Y Axes)

• Description: X, Y axes used for MultiValue data type, value index [0], [1] data correspond to X, Y axis coordinates respectively.

• Usage: The format of the axes will be set with the dataFormatter's xAxis, yAxis fields. For detailed API, please refer to the documentation (However, in most cases, if you are using Preset, you do not need to set dataFormatter yourself. More commonly used is the setting of axis labels).

• Axis label settings: Use dataFormatter's xAxis.label, yAxis.label to set the label text, as shown in the example below:

chart.dataFormatter$.next({
  xAxis: {
    label: 'x'
  },
  yAxis: {
    label: 'y'
  }
})

• Playground Example

params$

• Type: DeepPartial<XYAxesParams>

• Fields:

  Name	Description	Type
  xAxis	X axis settings	Object
  yAxis	Y axis settings	Object

• params.xAxis, params.yAxis

  Name	Description	Type
  labelOffset	Axis label offset	[number, number]
  labelColorType	Axis label color type	ColorType
  axisLineVisible	Show axis line	boolean
  axisLineColorType	Axis line color type	ColorType
  ticks	Number of ticks * number: appropriate number * null: auto-detect	number | null
  tickFormat	List icon width	string | ((text: d3.NumberValue) => string | d3.NumberValue)
  tickLineVisible	Show tick line	boolean
  tickPadding	Distance between tick and text	number
  tickFullLine	Show tick line across the entire scene	boolean
  tickFullLineDasharray	Set tick line dash format (used with tickFullLine as true)	string
  tickColorType	Tick color type	ColorType
  tickTextColorType	Tick text color type	ColorType

Detailed Types

type ColorType = 'none' | 'label' | 'labelContrast' | 'primary' | 'secondary' | 'background'

• Default value:

{
  xAxis: {
    labelOffset: [0, 0],
    labelColorType: 'primary',
    axisLineVisible: false,
    axisLineColorType: 'primary',
    ticks: null,
    tickFormat: num => {
      if (num === null || Number.isNaN(num) == true) {
        return num || 0
      }
      var parts = num.toString().split('.')
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return parts.join('.')
    },
    tickLineVisible: true,
    tickPadding: 20,
    tickFullLine: true,
    tickFullLineDasharray: 'none',
    tickColorType: 'secondary',
    tickTextColorType: 'primary'
  },
  yAxis: {
    labelOffset: [0, 0],
    labelColorType: 'primary',
    axisLineVisible: false,
    axisLineColorType: 'primary',
    ticks: null,
    tickFormat: num => {
      if (num === null || Number.isNaN(num) == true) {
        return num || 0
      }
      var parts = num.toString().split('.')
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return parts.join('.')
    },
    tickLineVisible: true,
    tickPadding: 20,
    tickFullLine: true,
    tickFullLineDasharray: 'none',
    tickColorType: 'secondary',
    tickTextColorType: 'primary'
  }
}