Plotly.js - multilayer time axis

Question

Is there a way to create time axis using Plotly.js similar to Plottable.js' solution?

Example here.

I plan to move to Plotly.js but really fell in love with this presentation of a time axis and as I have to plot lots of time series, it would be great to achieve something similar to it with plotly.

Did you try plotting multiple x-axes with different time formats? — Maximilian Peters, Feb 05 '19 at 22:25

score 0 · Answer 1 · answered Nov 05 '19 at 03:58

I can't find how to draw multilayer time axis in plotly.js. But here is one of workaround.

Set your layout as below.

xaxis: {
    showline: true,
    showgrid: true,
    showticklabels: true,
    type : 'category',          //this will allow set 'tickson '
    tickson : 'boundaries',     //this will show lable in middle.
    ticklen : 22,               //this will show line as grid
    linecolor: 'rgb(204,204,204)',
    linewidth: 2,
    autotick: false,
    ticks: 'outside',
    tickcolor: 'rgb(204,204,204)',
    tickwidth: 1,
    tickfont: {
      family: 'Arial',
      size: 12,
      color: 'rgb(82, 82, 82)'
    }
  },

Here is demo for you. Code pen

Plotly.js - multilayer time axis

1 Answers1