Question

192

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

rated 0 times [ 199] [ 7] / answers: 1 / hits: 27961 / 4 Years ago, wed, september 9, 2020, 12:00:00

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.

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.

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

    },

  },

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zoiel

Add To Favorites

Follow

Total Points: 692

Total Questions: 90

Total Answers: 89

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

answered 4 Years ago travion · Accepted Answer

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);