[SOLVED]ApexCharts.js: How to set fixed value for axis label in Line Chart

2
votes

I'm currently using ApexChart to display a Line Chart.

Question:
I was wondering if there is a way to set fixed axis label values.

Solution:
Solved by setting x-axis to type: category and setting tickAmount. (Note that solution does not allow you to directly set your x-axis labels in any way you desire, but will allow you to set an array of x-axis labels and adjust which to show with tickAmount.)

Things to watch out for

  • Make sure your apexcharts version is up to date. Setting tickAmount with type: 'category' is a recent update(as of this post).(https://github.com/apexcharts/apexcharts.js/releases/tag/v3.20.1)
  • series data had to be type number[]; all other data types ([number, number][] or { x: number, y: number}[]) did not work with tickAmount.
const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    // data as type number[], number is count.
    // 24 data points, one for every hour
    data, 
  },
  xaxis: {
    type: 'category', // set type to category
    categories, // ['00:00', '01:00', '02:00', ..., '23:00'], set array of categories
    tickAmount, // set tickAmount to split x-axis
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}

My research effort

For example:
Let's say I want a Line Chart that displays some count per hour in a 24 hour period with ticks at the [00:00, 06:00, 12:00, 18:00] hour mark on the x-axis(this part is what I want).

So our graph will have 24 data points [00:00, 01:00, ..., 23:00]. One for every hour.
In the x-axis we have the time(hh:mm).
In the y-axis we have the count.

If I just simply insert the dataset, I get the graph shown below.
As you can see, ApexCharts automatically sets the x-axis tick values.

graph without tickAmount

This sadly isn't what I want... also setting tickAmount doesn't get me my desired result as ApexChart just equally divides the range(in this case 0-23) by tickAmount to get its ticks. Sadly, there are no way to divide the axis to get my desired result.

I also thought I can set the x-axis type to be category and only show every nth label but that option doesn't seem to exist either.

The following is the option I'm passing to apexcharts

const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    data, // data as type [number, number][], first number is date, second number is count. 24 data points. one for every hour.
  },
  xaxis: {
    tickAmount, // setting this didn't help
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}

Update 1: I tried with the following changes, but to no avail I just got 24 xaxis labels...

  • changing xaxis type to category
  • adding categories
  • changing tickAmount
  • changing data type([number, number][], { x: number, y: number}[], number[])
const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    // data as...
    // type [number, number][], first number is date, second number is count.
    // type { x: number, y: number }[], x is date, y is count.
    // type number[], number is count.
    // 24 data points, one for every hour
    // I tried all data formats and nothing changed
    data, 
  },
  xaxis: {
    type: 'category',
    categories, // ['00:00', '01:00', '02:00', ..., '23:00'],
    tickAmount, // setting this didn't help
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}
2
javascriptchartsapexcharts

2 Answers

2
votes

If you know what the x-axis labels should be, you can include them as an array in the categories property:

var options = {
  series: [{
    data: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120]
  }],
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
    tickAmount: 10  // optional tickAmount value
  }
};

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

Even if the labels aren't always 00:00 - 23:00, you could do your hour calculations from your data, push them to array, and assign that to the categories property.

For example:

let timestamps = [1599675360368, 1599678960368, 1599682560368]; // using only 3 timestamps for this, but in your data you may have up to 24
let hours = timestamps.map(i => new Date(i).getHours().toString() + ":00"); // this would become your categories array
console.log(hours);
1
votes

if the xaxis has timeseries data, of type datetime, you can try the following:

xaxis: {
    type: 'datetime',
    min: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), // start date
    max: new Date(new Date().setHours(24, 0, 0, 0)).getTime(), // end date
    tickAmount: 4, // interval you want
    labels: {
        show: true,
        formatter: function(val, timestamp) {
            return moment(new Date(timestamp)).format("HH:mm"); // formats to hours:minutes
        }        
    }
}