ApexChart - How to change X-Axis

Configuration
1

Hi All,
I’m struggling to change the X-axis of a chart to weekdays [Mo Tu We Th Fr Sa Su]. Cannot find it in the documentation. Any help is appreciated.
PPee

2

It’s done like this. Since it’s in apex_config, it’s just passing straight through to apex charts, and the documentation is here. So you would have something like:

            apex_config:
              xaxis:
                labels:
                  formatter: |
                    EVAL:function(value) {
                      return new Date(value).toLocaleDateString("en-AU", { weekday: 'short' });
                    }

Note that this will give you “Mon” rather than “Mo”, so if you want you could chop off the last letter. And change “en-AU” to your region settings.

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.

You can alternatively use datetimeFormatter like below. 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 equidistant, so it’s pretty useless. Hopefully you have better luck.

              xaxis:
                labels:
                  hideOverlappingLabels: false
                  rotate: -90
                  rotateAlways: true
                  showDuplicates: true
                  datetimeFormatter:
                    year: 'ddd'
                    month: 'ddd'
                    day: 'ddd'
3 Likes