Axes

ApexCharts axis charts (line, bar, area, scatter, candlestick, and others) have two axis types: x-axis and y-axis. Each axis controls its own scale, label formatting, range, and appearance.

X-axis

The x-axis runs horizontally. Its type determines how ApexCharts interprets and spaces your data.

xaxis.type	When to use
'category'	String labels — months, names, product codes
'datetime'	Timestamps in milliseconds — time-series data
'numeric'	Plain numbers — scientific or ratio data

When type is omitted, ApexCharts defaults to 'category' for most chart types and 'numeric' for scatter and bubble.

Full configuration reference: xaxis options

Category x-axis

Supply labels either in xaxis.categories or as the x property of each data point.

// Labels in xaxis.categories
{
  series: [{ name: 'Sales', data: [44, 55, 41, 67, 22] }],
  xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }
}

// Labels in series data (equivalent output)
{
  series: [{
    name: 'Sales',
    data: [
      { x: 'Jan', y: 44 },
      { x: 'Feb', y: 55 },
      { x: 'Mar', y: 41 }
    ]
  }]
}

Datetime x-axis

Pass x values as JavaScript timestamps (milliseconds since Unix epoch). ApexCharts spaces points by actual time distance and formats labels automatically.

{
  series: [{
    name: 'Sessions',
    data: [
      { x: new Date('2024-01-01').getTime(), y: 120 },
      { x: new Date('2024-01-08').getTime(), y: 145 },
      { x: new Date('2024-01-15').getTime(), y: 98 }
    ]
  }],
  xaxis: { type: 'datetime' }
}

For detailed datetime formatting and locale configuration, see Working with datetime axes.

Numeric x-axis

When both x and y are numbers, set type: 'numeric'. This is the default for scatter and bubble charts.

{
  chart: { type: 'line' },
  series: [{ name: 'Trend', data: [[1, 4], [2, 8], [3, 15], [5, 22]] }],
  xaxis: { type: 'numeric' }
}

Y-axis

The y-axis runs vertically. For most charts one y-axis is sufficient. When your series have significantly different value ranges, add a second y-axis.

Full configuration reference: yaxis options

Controlling the y-axis range

{
  yaxis: {
    min: 0,
    max: 100,
    tickAmount: 5   // number of ticks between min and max
  }
}

Omitting min and max lets ApexCharts calculate them from your data with automatic padding. Set min: 0 explicitly when you want the axis to start at zero regardless of your data values.

Multiple y-axes

Assign each series to a y-axis by matching seriesName to the series name. The second y-axis renders on the right side with opposite: true.

{
  series: [
    { name: 'Revenue', data: [44000, 55000, 41000, 67000] },
    { name: 'Conversion rate', data: [2.4, 3.1, 1.9, 4.2] }
  ],
  yaxis: [
    {
      title: { text: 'Revenue ($)' },
      seriesName: 'Revenue'
    },
    {
      opposite: true,
      title: { text: 'Conversion (%)' },
      seriesName: 'Conversion rate',
      min: 0,
      max: 10
    }
  ]
}

For a full guide on dual-axis charts, see Multiple Y-Axis Scales.

Axis labels

Both axes accept a labels.formatter function that receives the raw value and returns a formatted string.

{
  yaxis: {
    labels: {
      formatter: (value) => '$' + value.toLocaleString()
    }
  },
  xaxis: {
    labels: {
      formatter: (value) => value + 'ms'
    }
  }
}

For multi-line labels and word wrapping, see Word-wrap and Multi-line text in axes labels.

Hiding an axis

{
  xaxis: { labels: { show: false }, axisBorder: { show: false }, axisTicks: { show: false } },
  yaxis: { show: false }
}