Set range on xaxis with dates

plotly.js
1

I have a chart with a large number of dates on the x axis, I have to set an initial “zoom” running from one month before the current date, up to one month after the current date.
I tried:

var fig = PlotlyFinance.createCandlestick(
{
open: Wopen,
high: Whigh,
low: Wlow,
close: Wclose,
dates: Wdates.map(function(d) { return new Date(d[0], d[1]-1, d[2]); })
});

var today = new Date();
var onemonback = new Date(new Date(today).setMonth(today.getMonth()-1));
var onemonafter = new Date(new Date(today).setMonth(today.getMonth()+1));

fig.layout.xaxis = {range: [new Date(onemonback.getFullYear, onemonback.getMonth()-1, onemonback.getDay()),new Date(onemonafter.getFullYear, onemonafter.getMonth()-1, onemonafter.getDay())]};

Plotly.newPlot(‘myDiv’, fig.data, fig.layout, {scrollZoom: true, modeBarButtonsToRemove: [‘hoverCompareCartesian’]});

It doesn’t work, how can I do?

2

You’ll need to set the layout.xaxis.range values using new Date(/* /*).getTime().

See example: http://codepen.io/etpinard/pen/xZPVzp

1 Like
3

At least with the current version, it seems sufficient to specify the axis range as ISO date strings, but autorange should be set to false, e.g.

{ 
  "autorange": false, 
  "range": ["2020-01-01", "2020-12-31"], ...
 }