xaxis

Configuration Structure

xaxis: {
  type: 'category' | 'datetime' | ...,
  categories: any,
  overwriteCategories: number[] | string[] | ...,
  offsetX: number,
  offsetY: number,
  sorted: boolean,
  labels: { ... },
    show: boolean,
    rotate: number,
    rotateAlways: boolean,
    hideOverlappingLabels: boolean,
    showDuplicates: boolean,
    trim: boolean,
    minHeight: number,
    maxHeight: number,
    style: { ... },
      colors: string | string[],
      fontSize: string,
      fontFamily: string,
      fontWeight: string | number,
      cssClass: string,
    offsetX: number,
    offsetY: number,
    format: string,
    formatter: Function,
    datetimeUTC: boolean,
    datetimeFormatter: { ... },
      year: string,
      month: string,
      day: string,
      hour: string,
      minute: string,
      second: string,
  group: { ... },
    groups: Array,
      title: string,
      cols: number,
    style: { ... },
      colors: string | string[],
      fontSize: string,
      fontFamily: string,
      fontWeight: string | number,
      cssClass: string,
  axisBorder: { ... },
    show: boolean,
    color: string,
    height: number,
    offsetX: number,
    offsetY: number,
  axisTicks: { ... },
    show: boolean,
    borderType: string,
    color: string,
    height: number,
    offsetX: number,
    offsetY: number,
  tickPlacement: string,
  tickAmount: number | 'dataPoints',
  stepSize: number,
  min: number,
  max: number,
  range: number,
  floating: boolean,
  decimalsInFloat: number,
  position: string,
  title: { ... },
    text: string,
    offsetX: number,
    offsetY: number,
    style: { ... },
      color: string,
      fontFamily: string,
      fontWeight: string | number,
      fontSize: string,
      cssClass: string,
  crosshairs: { ... },
    show: boolean,
    width: number | string,
    position: string,
    opacity: number,
    stroke: { ... },
      color: string,
      width: number,
      dashArray: number,
    fill: { ... },
      type: string,
      color: string,
      gradient: { ... },
        colorFrom: string,
        colorTo: string,
        stops: number[],
        opacityFrom: number,
        opacityTo: number,
    dropShadow: ApexDropShadow,
      enabled: boolean,
      top: number,
      left: number,
      blur: number,
      opacity: number,
      color: string,
  tooltip: { ... },
    enabled: boolean,
    offsetY: number,
    formatter: Function,
    style: { ... },
      fontSize: string,
      fontFamily: string,
}

type

Default: 'category'

Available Options: category, datetime, numeric

categories

Labels which are displayed on the x-axis.

tickAmount

Default: undefined

Number of Tick Intervals to show. Note: tickAmount doesn't affect datetime xaxis types. For numeric axes, use tickAmount: 'dataPoints' to match dataPoint counts.

tickPlacement

Default: 'on'

Whether to draw the ticks in between the data-points or on the data-points. Options: between or on. Note: applies only to category type charts.

min

Default: undefined

The lowest number to be set for the x-axis. The graph drawing beyond this number will be clipped off.

max

Default: undefined

The highest number to be set for the x-axis. The graph drawing beyond this number will be clipped off.

stepSize

Default: undefined

The interval between consecutive values on an x-axis. It determines how the values on the axis are spaced or displayed.

range

Default: undefined

Takes the max value of x-axis, subtracts the provided range value and gets the min value based on that. So, technically it helps to keep the same range when min and max values gets updated dynamically.

floating

Default: false

Setting this options takes the y-axis out of the plotting area. Much behaves like position: absolute property of CSS.

decimalsInFloat

Default: undefined

The number of fractions to display when there are floating values on the x-axis numbers. Applicable only for numeric type.

overwriteCategories

Default: undefined

Allows you to overwrite all the labels of the x-axis with these labels. Accepts an array of string values.

position

Default: 'bottom'

Change the x-axis position. Available options: bottom, top.

show

xaxis.labels.show
Default: true

Show labels on x-axis.

rotate

xaxis.labels.rotate
Default: -45

Rotate angle for the x-axis labels.

rotateAlways

xaxis.labels.rotateAlways
Default: false

Whether to rotate the labels always or to rotate only when the texts don't fit the available width.

hideOverlappingLabels

xaxis.labels.hideOverlappingLabels
Default: true

When labels are too close and start to overlap on one another, this option prevents overlapping of the labels.

showDuplicates

xaxis.labels.showDuplicates
Default: true

By default, duplicate labels are not printed to prevent congested values in a datetime series. If you intentionally want to display the same values in x-axis labels, turn on this option.

trim

xaxis.labels.trim
Default: false

Append ... to the text when it can't fit the available space and rotate is turned off.

minHeight

xaxis.labels.minHeight
Default: undefined

Minimum height for the labels.

maxHeight

xaxis.labels.maxHeight
Default: 120

Maximum height for the labels when they are rotated.

colors

xaxis.labels.style.colors
Default: []

ForeColor for the x-axis label. Accepts an array for distributed charts or accepts a single color string.

fontSize

xaxis.labels.style.fontSize
Default: '12px'

FontSize for the x-axis label.

fontFamily

xaxis.labels.style.fontFamily
Default: undefined

FontFamily for the x-axis label.

fontWeight

xaxis.labels.style.fontWeight
Default: 400

Font-weight for the x-axis label.

cssClass

xaxis.labels.style.cssClass
Default: ''

A custom Css Class to give to the label elements.

offsetX

xaxis.labels.offsetX
Default: 0

Sets the left offset for label.

offsetY

xaxis.labels.offsetY
Default: 0

Sets the top offset for label.

format

xaxis.labels.format
Default: undefined

Formats the datetime value based on the format specifier.

formatter

xaxis.labels.formatter
Default: undefined

Overrides everything and applies a custom function for the xaxis value. The function accepts 3 arguments. The first one is the default formatted value and the second one as the raw timestamp which you can pass to any datetime handling function to suit your needs. The 3rd argument is present in date-time xaxis which includes a dateFormatter.

xaxis: {
  labels: {
    formatter: function(value, timestamp, opts) {
      return opts.dateFormatter(new Date(timestamp)).format("dd MMM")
    }
  }
}

datetimeUTC

xaxis.labels.datetimeUTC
Default: true

When turned on, local DateTime is converted into UTC. Turn it off if you supply date with timezone info and want to preserve it.

year

xaxis.labels.datetimeFormatter.year
Default: 'yyyy'

Format specifier for the year.

month

xaxis.labels.datetimeFormatter.month
Default: "MMM 'yy"

Format specifier for the month.

day

xaxis.labels.datetimeFormatter.day
Default: 'dd MMM'

Format specifier for the day of month.

hour

xaxis.labels.datetimeFormatter.hour
Default: 'HH:mm'

Format specifier for the hour of day.

minute

xaxis.labels.datetimeFormatter.minute
Default: 'HH:mm:ss'

Format specifier for minutes.

second

xaxis.labels.datetimeFormatter.second
Default: 'HH:mm:ss'

Format specifier for seconds.

groups

xaxis.group.groups
groups: [{
  title: "ABC",
  cols: 3
}, {
  title: "XYZ",
  cols: 4
}]

colors

xaxis.group.style.colors

ForeColor for the x-axis groups label.

fontSize

xaxis.group.style.fontSize

FontSize for the x-axis group label.

fontWeight

xaxis.group.style.fontWeight

Font-weight for the x-axis group label.

fontFamily

xaxis.group.style.fontFamily

FontFamily for the x-axis group label.

cssClass

xaxis.group.style.cssClass

A custom Css Class to give to the label elements.

show

xaxis.axisBorder.show
Default: true

Draw a horizontal border on the x-axis.

color

xaxis.axisBorder.color
Default: '#e0e0e0'

Color of the horizontal axis border.

height

xaxis.axisBorder.height
Default: 1

Sets the border height of the xaxis line.

offsetX

xaxis.axisBorder.offsetX
Default: 0

Sets the left offset of the axis border.

offsetY

xaxis.axisBorder.offsetY
Default: 0

Sets the top offset of the axis border.

show

xaxis.axisTicks.show
Default: true

Draw ticks on the x-axis to specify intervals.

borderType

xaxis.axisTicks.borderType

Available Options: solid, dotted.

color

xaxis.axisTicks.color
Default: '#e0e0e0'

Color of the ticks.

height

xaxis.axisTicks.height
Default: 6

Height of the ticks.

offsetX

xaxis.axisTicks.offsetX
Default: 0

Sets the left offset of the ticks.

offsetY

xaxis.axisTicks.offsetY
Default: 0

Sets the top offset of the ticks.

text

xaxis.title.text
Default: undefined

Give the x-axis a title which will be displayed below the axis labels by default.

offsetX

xaxis.title.offsetX
Default: 0

Sets the left offset for xaxis title.

offsetY

xaxis.title.offsetY
Default: 0

Sets the top offset for the xaxis title.

color

xaxis.title.style.color
Default: undefined

ForeColor of the x-axis title.

fontSize

xaxis.title.style.fontSize
Default: '12px'

FontSize for the x-axis title.

fontFamily

xaxis.title.style.fontFamily
Default: undefined

FontFamily for the x-axis title.

fontWeight

xaxis.title.style.fontWeight
Default: 900

Font-weight for the x-axis title.

cssClass

xaxis.title.style.cssClass
Default: ''

A custom Css Class to give to the x-axis title.

show

xaxis.crosshairs.show
Default: true

Show crosshairs on x-axis when user moves the mouse over chart area.

width

xaxis.crosshairs.width
Default: 1

Possible Options: Any number, tickWidth (uses tick intervals), barWidth (vertical bar charts only).

position

xaxis.crosshairs.position
Default: 'back'

Possible Options: back, front.

opacity

xaxis.crosshairs.opacity
Default: 0.9

Opacity of the crosshairs.

color

xaxis.crosshairs.stroke.color
Default: '#b6b6b6'

Border Color of crosshairs.

width

xaxis.crosshairs.stroke.width
Default: 1

Border Width of crosshairs.

dashArray

xaxis.crosshairs.stroke.dashArray
Default: 3

Creates dashes in borders of crosshairs. A higher number creates more space between dashes in the border.

type

xaxis.crosshairs.fill.type
Default: 'solid'

Possible Options: solid, gradient.

color

xaxis.crosshairs.fill.color
Default: '#B1B9C4'

Fill color of crosshairs.

colorFrom

xaxis.crosshairs.fill.gradient.colorFrom
Default: '#D8E3F0'

Crosshairs Gradient Color from.

colorTo

xaxis.crosshairs.fill.gradient.colorTo
Default: '#BED1E6'

Crosshairs Gradient Color to.

stops

xaxis.crosshairs.fill.gradient.stops
Default: [0, 100]

Stops defines the ramp of colors to use on a gradient.

opacityFrom

xaxis.crosshairs.fill.gradient.opacityFrom
Default: 0.4

Crosshairs fill opacity from.

opacityTo

xaxis.crosshairs.fill.gradient.opacityTo
Default: 0.5

Crosshairs fill opacity to.

enabled

xaxis.crosshairs.dropShadow.enabled
Default: false

Enable a dropshadow for crosshairs.

top

xaxis.crosshairs.dropShadow.top
Default: 0

Set top offset for shadow.

left

xaxis.crosshairs.dropShadow.left
Default: 0

Set left offset for shadow.

blur

xaxis.crosshairs.dropShadow.blur
Default: 1

Set blur distance for shadow.

opacity

xaxis.crosshairs.dropShadow.opacity
Default: 0.8

Set the opacity of shadow.

enabled

xaxis.tooltip.enabled
Default: true

Show tooltip on x-axis or not.

formatter

xaxis.tooltip.formatter
Default: undefined

A custom formatter function for the x-axis tooltip label. If undefined, the xaxis tooltip uses the default "X" value used in general tooltip.

xaxis: {
  tooltip: {
    formatter: function(val, opts) {
      return val + "..."
    }
  }
}

offsetY

xaxis.tooltip.offsetY
Default: 0

Sets the top offset for x-axis tooltip.

fontSize

xaxis.tooltip.style.fontSize
Default: '12px'

FontSize for the x-axis tooltip text.

fontFamily

xaxis.tooltip.style.fontFamily
Default: undefined

FontFamily for the x-axis tooltip text.