Skip to main content

Axis

Axis is a component that allows you to add different personalised axes in your Plot

Restriction​

In a Plot, we cannot have two Axis in the same position

Example: Adding two bottom axes in the same plot will throw the following error :
Plot can only have one bottom axis

Props​

1. Axis Positon​

  • position: a mandatory prop that allows you to choose axis position
    type: 'top' | 'bottom' | 'left' | 'right'

2. Axis Range​

  • min: axis minimum domain value
    type: number
    default: calculated automatically based on series data

  • max: axis maximum domain value
    type: number
    default: calculated automatically based on series data

  • paddingStart: added value to range in the beginning of domain
    type: ScalarValue
    default: 0

  • paddingEnd: added value to range in the end of domain
    type: ScalarValue
    default: 0

3. Identify Axis​

  • id: value used to identify an axis using a string
    type: string
    default:"x" for horizontal axis,"y" for vertical axis

  • scale: Axis scale type
    type: 'linear' | 'log' | 'time'
    default:'linear'

4. Choose Axis Behaviour​

  • flip: used to flip axis
    type: boolean
    default: false

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

5. Customize Axis​

a. Line​

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

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

b. Label​

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

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

c. Grid​

  • displayPrimaryGridLines: adds simple grid lines to the plot
    type: boolean
    default: false

  • primaryGridLineStyle: customises grid lines style
    type: CSSProperties
    default: {}

  • displaySecondaryGridLines: adds secondary grid lines to the plot
    type: boolean
    default: false

  • secondaryGridLineStyle: changes secondary style of grid lines
    type: CSSProperties
    default: {}

d. 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: {}

e. Ticks labels​

  • tickLabelFormat: personalises 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: {}