Formatting Axes Labels

ApexCharts provides formatter functions at multiple points: axis labels, data labels, and tooltips. Each formatter receives the raw value and returns the string to display.

Many times, you will find yourself in situations to change the actual text whether it be in dataLabels or in axes.

Formatting Axes Labels

Axes labels formatting can be controlled by yaxis.labels.formatter and xaxis.labels.formatter.

yaxis: {
  labels: {
    formatter: function (value) {
      return value + "$";
    }
  },
},
xaxis: {
  labels: {
    formatter: function (value) {
      return value;
    }
  }
}

Thousands separator

Use toLocaleString to format large numbers with locale-aware thousands separators:

var options = {
  chart: { type: 'bar' },
  series: [{ name: 'Revenue', data: [1200000, 2500000, 1800000, 3100000] }],
  xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yaxis: {
    labels: {
      formatter: function (value) {
        return value.toLocaleString()
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Currency (abbreviated)

Divide large values and append a unit suffix to keep labels compact:

var options = {
  chart: { type: 'bar' },
  series: [{ name: 'Sales', data: [4400, 5500, 8100, 9800, 6100] }],
  xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
  yaxis: {
    labels: {
      formatter: function (value) {
        return '$' + (value / 1000).toFixed(1) + 'k'
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Percentage

var options = {
  chart: { type: 'line' },
  series: [{ name: 'Conversion', data: [12.4, 18.7, 15.2, 22.1, 19.8] }],
  xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
  yaxis: {
    labels: {
      formatter: function (value) {
        return value.toFixed(1) + '%'
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Datetime x-axis formatter

When xaxis.type is 'datetime', ApexCharts passes a Unix timestamp (milliseconds) to the formatter. Wrap it in new Date() to produce any format you need:

var options = {
  chart: { type: 'area' },
  series: [{
    name: 'Visitors',
    data: [
      [new Date('2024-01-01').getTime(), 820],
      [new Date('2024-04-01').getTime(), 1140],
      [new Date('2024-07-01').getTime(), 970],
      [new Date('2024-10-01').getTime(), 1320]
    ]
  }],
  xaxis: {
    type: 'datetime',
    labels: {
      formatter: function (value) {
        var d = new Date(value)
        return d.toLocaleDateString('en-US', { month: 'short', year: '2-digit' })
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

The formatter runs on each visible tick. For anything beyond toLocaleDateString, pass the timestamp to a library such as day.js:

xaxis: {
  type: 'datetime',
  labels: {
    formatter: function (value) {
      return dayjs(value).format('MMM YY')
    }
  }
}

Label rotation

When x-axis labels are long and overlap, set rotate to tilt them. By default, rotation only kicks in when labels would collide (rotateAlways: false). Set rotateAlways: true to force rotation regardless of fit.

var options = {
  chart: { type: 'bar' },
  series: [{ name: 'Orders', data: [44, 55, 57, 56, 61, 58, 63] }],
  xaxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    labels: {
      rotate: -45,
      rotateAlways: false  // only rotate when labels would overlap (default)
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

dataLabels formatter

The same formatter pattern applies to the value labels rendered directly on bars, points, or slices. The function receives the value plus a context object with seriesIndex, dataPointIndex, and the chart config w:

var options = {
  chart: { type: 'bar' },
  dataLabels: {
    enabled: true,
    formatter: function (value, { seriesIndex, dataPointIndex, w }) {
      return '$' + value.toFixed(0)
    }
  },
  series: [{ name: 'Revenue', data: [1200, 3400, 2800, 4100] }],
  xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'] }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

tooltip.y formatter

Format the value shown inside the tooltip independently from axis labels. This is useful when you want abbreviated axis labels but a full number in the tooltip:

var options = {
  chart: { type: 'line' },
  series: [{ name: 'Revenue', data: [1200000, 2500000, 1800000, 3100000] }],
  xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yaxis: {
    labels: {
      formatter: function (value) {
        return '$' + (value / 1000000).toFixed(1) + 'M'
      }
    }
  },
  tooltip: {
    y: {
      formatter: function (value) {
        return '$' + value.toLocaleString()
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()