Wrong x-axis labels and ticks with `type="numeric"`

[bklingen]

The placement (and/or labels) of the x-axis ticks are somewhat off in this plot of a normal distribution with mean 0 and standard deviation 0.1:

x <- seq(-0.3, 0.3, 0.01)
df <- data.frame(x=x, y=dnorm(x, mean=0, sd=0.1))
apex(data=df, aes(x,y), type='spline') %>% 
  ax_xaxis(type='numeric', 
           max=0.3,
           range=0.6, 
           tickAmount=6, 
           labels=list(formatter=format_num(".2f"))
  )

I can't quite figure out what's wrong in the code. I expect the upper bound to be 0.3, and ticks at (-0.3, -0.2, -0.1, 0.0, 0.1, 0.2, 0.3), with the plot centered over 0.0. The funny thing is that the x-value in the hover information is correct.

[pvictor]

Seems like a bug with float, it doesn't occur if we use x*100 or without tickAmount option. I'll open an issue in Apexcharts.js repo.

Victor

[artofstat]

Great, thanks. Here is a minimal reproducible example to reproduce the bug with type="numeric", where the x-axis labels are off (the x-value in the hover information is correct, though):

df <- data.frame(x=c(1, 2, 3), y=c(0, 1, 0))
apex(data=df, mapping=aes(x=x, y=y), type="line") %>%
  ax_xaxis(type="numeric")

[bklingen]

I tried in a codepen that had version 3.4.1 of apexchart, and it did give the expected result:

[pvictor]

Thanks,

Here you used categories to set x values, in apex I use numeric paired values:

"data": [
        {
          "x": 1,
          "y": 0
        },
        {
          "x": 2,
          "y": 1
        },
        {
          "x": 3,
          "y": 0
        }
      ]

The bug here seems to appear if option tickAmount is not set.

https://codepen.io/pvictor-r/pen/abBLyBX

[bklingen]

Sorry if this is not the right lead (I understand very little about these things), but when you change to version 3.4.1 in your codepen (at least this is what I think I'm doing in settings), the graph does render correctly, i.e., the bug goes away. I don't know how easy it is to update to this version.

[pvictor]

3.4.1 is actually an old version (17 Feb 2019)

Last version released is 3.23.1, and is the one used in {apexcharter} GitHub (CRAN use 3.22.2)

[bklingen]

I believe the issue was fixed on Apex's gihub a few weeks ago. Any chance this will be rolled over soon, so that code like this gives correct results:

df <- data.frame(x=c(1, 2, 3), y=c(0, 1, 0))
apex(data=df, mapping=aes(x=x, y=y), type="line") %>%
  ax_xaxis(type="numeric")

Many thanks! Bernhard

[pvictor]

Yes I openned an issue (https://github.com/apexcharts/apexcharts.js/issues/2249) ;)

I was waiting for an official release, however I build manually the JS bundle from Apexcharts repo so you can try. You may experience some bugs ^^, let me know.

Victor

[bklingen]

Thanks, seems to work just fine for the toy example:

And if you want to have "nice" ticks, using tickAmount works:

df <- data.frame(x=c(1, 2, 3), y=c(0, 1, 0))
apex(data=df, mapping=aes(x=x, y=y), type="line") %>%
  ax_xaxis(type="numeric", tickAmount=2)

Only tickAmount='dataPoints' doesn't work as advertises on the Apex help: If you have a numeric xaxis xaxis.type = 'numeric', you can specify tickAmount: 'dataPoints' which would make the number of ticks equal to the number of dataPoints in the chart. But I don't have a use case for it.

[bklingen]

...and the initial example now also shows correct x-axis labels:

x <- seq(-0.3, 0.3, 0.01)
df <- data.frame(x=x, y=dnorm(x, mean=0, sd=0.1))
apex(data=df, aes(x,y), type='line') %>% 
  ax_xaxis(type='numeric', 
           max=0.3,
           range=0.6, 
           tickAmount=6, 
           labels=list(formatter=format_num(".2f"))
  )

[bklingen]

There is still a small issue, though, if one wants to set a custom x-axis range: It has to do with the precision of the tick labels. Out of the box, the plot is pretty confusing:

x <- seq(-4, 4, 0.01)
df <- data.frame(x=x, y=dnorm(x))
apex(data=df, aes(x,y), type='line') %>% 
  ax_xaxis(type='numeric', 
           max=5,
           range=10, 
           tickAmount=8
           #labels=list(formatter=format_num(".2f"))
  )

One needs to specify the formatting of the tick labels to get a meaningful x-axis:

x <- seq(-4, 4, 0.01)
df <- data.frame(x=x, y=dnorm(x))
apex(data=df, aes(x,y), type='line') %>% 
  ax_xaxis(type='numeric', 
           max=5,
           range=10, 
           tickAmount=8,
           labels=list(formatter=format_num(".2f"))
  )

I.e., the -1.25 is rounded and displayed as -1, and the -2.50 is rounded and displayed as -3 in the first chart. However, if you set tickAmount=10 to begin with, everything is fine. So, overall, this is a limitation of the Apex library, not the r implementation.

[pvictor]

Thanks for the tests! ApexCharts 3.26.0 has been released and included in apexcharter. I will push to CRAN soon.