ParallelAxis

ParallelAxis is a component used to create a parallel axis to an existed Axis, we must fix base axis id

Props

1. Identify Axis

• id: mandatory prop that specifies the base axis
  type: string
  

2. Choose Axis Behaviour

• hidden: Hides all axis elements
  type: boolean
  default: false

3. Personlise Axis

a. Line

• hiddenLine: Hides axis line
  type: boolean
  default: false

• lineStyle: changes line style
  type: CSSProperties
  default: {}

b. Label

• label: labels Axis
  type: ReactNode
  default: ""

• labelStyle: changes label style
  type: CSSProperties
  default: {}

c. Ticks

• hiddenTicks: Hides axis ticks
  type: boolean
  default: false

• tickPosition: changes ticks position
  type: 'inner' | 'outer' | 'center'
  default: 'center'

• primaryTickLength: changes primary ticks length
  type: number
  default: 5

• primaryTickStyle: customises primary ticks style
  type: CSSProperties
  default: {}

• secondaryTickLength: changes secondary ticks length
  type: number
  default: 3

• secondaryTickStyle: customises secondary ticks style
  type: CSSProperties
  default: {}

d. Ticks labels

• tickLabelFormat: personnalises the format of tick labels
  type: (x: number)=>string
  default: d3's smart tickFormat for time scale, String for others

• tickLabelStyle: changes tick labels style
  type: CSSProperties
  default: {}