OrbCharts Docs
Docs
Home
Github
  • English
  • 繁體中文
Docs
Home
Github
  • English
  • 繁體中文
  • Guide
  • Basic Concepts

    • 6 Data Formats
    • Core Technologies
  • Get Started !

    • Installation
    • Examples
  • Basic Usage

    • Creating Charts
    • Using Presets
    • Drawing Charts
    • Data Labels
  • Chart API

    • plugins$
    • data$
    • chartParams$
    • dataFormatter$
    • event$
    • destroy()
  • Plugins

    • Create Plugin
    • Series

      • Bubbles
      • Pie
      • PieEventTexts
      • PieLabels
      • Rose
      • RoseLabels
      • SeriesLegend
      • SeriesTooltip
    • Grid

      • Bars
      • BarsPN
      • BarsTriangle
      • Dots
      • GridLegend
      • GridTooltip
      • GroupAux
      • GroupAxis
      • GroupZoom
      • Lines
      • LineAreas
      • StackedBars
      • StackedValueAxis
      • ValueAxis
    • MultiGrid

      • MultiBars
      • MultiBarsTriangle
      • MultiDots
      • MultiGridLegend
      • MultiGridTooltip
      • MultiGroupAxis
      • MultiStackedBars
      • MultiStackedValueAxis
      • MultiValueAxis
      • OverlappingValueAxes
      • OverlappingStackedValueAxes
    • MultiValue

      • MultiValueLegend
      • MultiValueTooltip
      • OrdinalAux
      • OrdinalAxis
      • OrdinalBubbles
      • OrdinalZoom
      • RacingBars
      • RacingCounterTexts
      • RacingValueAxis
      • Scatter
      • ScatterBubbles
      • XYAux
      • XYAxes
      • XYZoom
    • Relationship

      • ForceDirected
      • ForceDirectedBubbles
      • RelationshipLegend
      • RelationshipTooltip
    • Tree

      • TreeLegend
      • TreeMap
      • TreeTooltip

RacingValueAxis

  • Name: Racing Value Axis

  • Description: Mainly used with RacingBars to correspond to the xAxis setting in dataFormatter.

  • Playground Example

params$

  • Type: Partial<RacingValueAxisParams>

  • Fields:

    NameDescriptionType
    labelOffsetAxis label offset[number, number]
    labelColorTypeAxis label color typeColorType
    axisLineVisibleShow axis lineboolean
    axisLineColorTypeAxis line color typeColorType
    ticksNumber of ticks
    * number: appropriate number
    * null: auto-detect
    number | null
    tickFormatTick text format
    * string: annotated with d3-format format
    * Function: custom function returning display text
    string | ((text: d3.NumberValue) => string | d3.NumberValue)
    tickLineVisibleShow tick lineboolean
    tickPaddingDistance between tick and textnumber
    tickFullLineShow tick line across the entire sceneboolean
    tickFullLineDasharraySet tick line dash format (used with tickFullLine as true)string
    tickColorTypeTick color typeColorType
    tickTextColorTypeTick text color typeColorType
Detailed Types
type ColorType = 'none' | 'label' | 'labelContrast' | 'primary' | 'secondary' | 'background'
  • Default values:
{
  labelOffset: [0, 0],
  labelColorType: 'primary',
  axisLineVisible: false,
  axisLineColorType: 'secondary',
  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'
}