MultiValueAxis

• Name: Multi Value Axis

• Description: Functions similarly to the ValueAxis in the Grid data category, corresponding to each grid data by default, and drawing axes for each grid data separately. Note that dataFormatter$'s separateGrid must be true to correctly display multiple axes (otherwise they will overlap).

• Usage: The axis format will be set using the dataFormatter's gridList[].valueAxis field. For detailed API, refer to the documentation (in most cases, if using Preset, you don't need to set dataFormatter manually, and it's more common to set axis labels).

• Axis label settings: Use dataFormatter's gridList[].valueAxis.label to set the label text, as shown in the example below:

chart.dataFormatter$.next({
  gridList: [
    {
      valueAxis: {
        label: 'Quantity'
      }
    }
  ]
})

• Playground Example

params$

• Type: Partial<MultiValueAxisParams>

• Fields:

  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	Tick text format * string: annotated with d3-format format * Function: custom function returning display text	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
  tickTextRotate	Tick text rotation	number
  tickTextColorType	Tick text color type	ColorType
  gridIndexes	Indexes of the corresponding data$ grid data, can correspond to one or more grid data	number[] | 'all'

Detailed Types

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

• Default values:

{
  labelOffset: [0, 0],
  labelColorType: 'primary',
  axisLineVisible: false,
  axisLineColorType: 'primary',
  ticks: 4,
  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',
  tickTextRotate: 0,
  tickTextColorType: 'primary',
  gridIndexes: 'all'
}