Custom Axis ^9.8.0

Chart support custom axis, which can be achieved through the chart api registerXAxis(axis) and registerYAxis(axis).

Input params introduction

{
  // axis name
  name: string
  // implementation of create ticks
  createTicks: (params: {
    // range info
    range: {
      from: number
      to: number
      range: number
      realFrom: number
      realTo: number
      realRange: number
    }
    // viewport
    bounding: {
      width: number
      height: number
      left: number
      right: number
      top: number
      bottom: number
    }
    // default ticks info
    defaultTicks: Array<{
      coord: number
      value: number | string
      text: string
    }>
  }) => Array<{
    coord: number
    value: number | string
    text: string
  }>
}

Usage

After register completed, you can use the sub item options.axisOptions.name in the options.layout parameter of the chart api init(ds, options) to specify the coordinate axis, or use the instance api createIndicator(value, isStack, paneOptions, callback) and setPaneOptions(paneOptions) parameter paneOptions.axisOptions.name to specify it.

Using init of chart api

init(
  // The domId here uses its own defined container ID instead
  `${domId}`,
  {
    layout: [
      {
        type: 'candle',
        options: {
          axisOptions: {
            // The customYAxisName here uses the name used when customizing the y-axis instead
            name: `${customYAxisName}`
          }
        }
      },
      {
        type: 'xAxis',
        options: {
          position: 'bottom',
          axisOptions: {
            // The customXAxisName here uses the name used when customizing the x-axis instead
            name: `${customXAxisName}`
          }
        }
      }
    ]
  }
)

Using createIndicator of instance api

createIndicator(
  'MA',
  false,
  {
    axisOptions: {
      // The customYAxisName here uses the name used when customizing the y-axis instead
      name: `${customYAxisName}`
    }
  }
)

Using setPaneOptions of instance api

setPaneOptions({
  id: 'candle_pane',
  axisOptions: {
    // The customYAxisName here uses the name used when customizing the y-axis instead
    name: `${customYAxisName}`
  }
})