Apex chart xaxis . labels. Setting this option allows you to change the x-axis position. Floating takes x-axis is taken out of normal flow and places x-axis on svg element directly, similar to an absolutely positioned element. I’ve also included some other options to try to maximise the x-axis labels, but in a 90 day chart, I’m only getting 9 x-labels that are not May 2, 2021 · For some reason (the calculation of the number of ticks and their labels in a datetime chart is not fully documented), for the above example I get a chart with hour-based ticks: I want the x-axis to show labels of days if the range is up to X months, of months if there are more than X months etc. formatter: function. The first one is the default formatted value and the second one as the raw timestamp which you can pass to any datetime handling function to suit your needs. 24 Sep 5, 2022 · The main problem I’ve had formatting the x-axis is there doesn’t seem to be any control over the interval when it is datetime based. The function accepts 3 arguments. xaxis: { labels: { datetimeFormatter: { year: 'yyyy', month: 'MMM 'yy', day: 'dd MMM', hour: 'HH:mm' } } } Based on the difference between minX (leftmost datetime) and maxX (rightmost datetime), xaxis labels are generated. Sep 9, 2020 · 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. Check out how you can update the date range on x-axis easily on each user interaction. Set the offsetX and offsetY then to adjust the position manually. Overrides everything and applies a custom function for the xaxis value. xaxis. You can alternatively use datetimeFormatter like below. a). position. A list of View the sample code for creating an area chart with datetime x-axis. 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. Available options: "top" and "bottom". If the difference is > […] Logical. title. datetimeFormatter This is the default settings for x-axis labels generation in a time series.