How to set text value along axis in apex chart

1k views Asked by At

We are new to apex chart usage, currently apex chart along y-axis showing integer values, but we want to display values which could be in millions, so we want labels of axis to be as 1m, 2m etc.

1

There are 1 answers

0
Badacadabra On

You can use a formatter. It is documented here: Options (Reference) > yaxis – ApexCharts.js

If you want to display values in millions, do something like that:

let options = {
  series: [{
    name: 'Series',
    data: [1000000, 2000000, 1500000]
  }],
  chart: {
    height: 350,
    type: 'line'
  },
  xaxis: {
    categories: ['Category 1', 'Category 2', 'Category 3']
  },
  yaxis: {
    labels: {
      formatter: val => `${val / 1000000}M` // <--- HERE
    }
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>