OverlappingStackedValueAxes

• Name: Overlapping Stacked Value Axes

• Description:

  • Draws two value axes (left Y-axis and right Y-axis) in the same plotting area, corresponding to the first two grid data by default. The first Y-axis is used for stacked data charts (currently MultiStackedBar), corresponding to the first grid (data$ index [0]); the second Y-axis is used for non-stacked data charts (e.g., MultiLines), corresponding to the second grid (data$ index [1]).
  • Unlike MultiValueAxis, dataFormatter$'s separateGrid must be false to correctly draw in the same plotting area.

• Playground Example

params$

• Type: DeepPartial<OverlappingStackedValueAxesParams>

• Fields:

  Name	Description	Type
  firstAxis	Settings for the first (left) Y-axis	Object
  secondAxis	Settings for the second (right) Y-axis	Object
  gridIndexes	Indexes of the corresponding data$ grid data, can correspond to one or more grid data	number[] | 'all'

• params.firstAxis and params.secondAxis

  Name	Description	Type
  labelOffset	Position offset	[number, number]
  labelColorType	Color type for the label	ColorType
  axisLineVisible	Visibility of the axis line	boolean
  axisLineColorType	Color type for the axis line	ColorType
  ticks	Number of ticks	number | null
  tickFormat	Format for the ticks	string | ((text: d3.NumberValue) => string | d3.NumberValue
  tickLineVisible	Visibility of the tick lines	boolean
  tickPadding	Padding for the ticks	number
  tickFullLine	Full line for the ticks	boolean
  tickFullLineDasharray	Dash array for the full line ticks	string
  tickColorType	Color type for the ticks	ColorType
  tickTextRotate	Rotation for the tick text	number
  tickTextColorType	Color type for the tick text	ColorType

Detailed Types

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

• Default values:

{
  firstAxis: {
    labelOffset: [0, 0],
    labelColorType: 'primary',
    axisLineVisible: false,
    axisLineColorType: 'primary',
    ticks: 4,
    tickFormat: ',.0f',
    tickLineVisible: true,
    tickPadding: 20,
    tickFullLine: true,
    tickFullLineDasharray: 'none',
    tickColorType: 'secondary',
    tickTextRotate: 0,
    tickTextColorType: 'primary',
  },
  secondAxis: {
    labelOffset: [0, 0],
    labelColorType: 'primary',
    axisLineVisible: false,
    axisLineColorType: 'primary',
    ticks: 4,
    tickFormat: ',.0f',
    tickLineVisible: true,
    tickPadding: 20,
    tickFullLine: true,
    tickFullLineDasharray: 'none',
    tickColorType: 'secondary',
    tickTextRotate: 0,
    tickTextColorType: 'primary',
  },
  gridIndexes: [0, 1]
}