Prevent Plotly from Indenting First X Axis Tick and label?

plotly.js
,
1

I have been struggling with this chart, and trying various settings to get the first X Axis tick at 00:00:00 to align with the Y Axis line so it is not indented, but to no avail. Nothing seems to work.

Is this a bug? Ideas?

2

Hi @EricB ,

Have you tried adding fixed value in your xaxis range?
You can set range values from "2014-01-15 00:00:00" to "2014-01-15 00:14:46".

...

"xaxis": {
    "ticklabeloverflow": "allow",
    "ticklabelposition": "outside",
    "zeroline": true,
    "rangemode": "nonnegative",
    "ticktext": "%H:%M:%S",
    "color": "#7f7f7f",
    "title": "",
    "type": "date",
    "tickformat": "%H:%M:%S",
    // set fixed value for x axis range
    "range": ["2014-01-15 00:00:00", "2014-01-15 00:14:46"],
  },

...

image
image1816×787 55.8 KB

Hope this help.

3

Thanks @farispriadi!

I tried that, and it does indeed work! This at least means some sort of workaround is possible, which is significant!!!

Is there any setting to automatically do that? The data will be refreshing using plotly react all the time, so the range will be extending continually.

4

Hi @EricB ,

I wonder why your first x data is "2014-01-15 -1:59:57", and not "2014-01-15 00:00:00" ?

If your first x data is what you want to display, I think there is a way to set automatically by calling "range": [data[0]['x'][0], data[0]['x'][data[0]['x'].length-1]],
And to do that, you need to move data variable assignment above the layout.

I try to change your first data to 2014-01-15 00:00:00.

...
 {
    "x": [
      // "2014-01-15 -1:59:57",
      "2014-01-15 00:00:00",
      "2014-01-15 00:00:06",
      "2014-01-15 00:00:16",
      "2014-01-15 00:00:26",
...

And set range by getting first element and last element of x data.

"xaxis": {
    "ticklabeloverflow": "allow",
    "ticklabelposition": "outside",
    "zeroline": false,
    "rangemode": "nonnegative",
    "ticktext": "%H:%M:%S",
    "color": "#7f7f7f",
    "title": "",
    "type": "date",
    "tickformat": "%H:%M:%S",
    // set fixed range for x axis
    "range": [data[0]['x'][0], data[0]['x'][data[0]['x'].length-1]],
  },

image
image1780×744 55.8 KB

Cheers.