Apply Zoom to the plot with Range and Relayout

[maguilleng]

Hi, I'm trying to replicate a plotly.js behavior but I cannot find out how to do that in Plotly.Blazor. In angular, I can apply a zoom to the plot with these lines:
let range = {'xaxis.range': ['2022-02-01 00:00:00', '2022-04-10 00:00:00']}; const graph = this.plotly.getInstanceByDivId(this.idPlot); Plotly.relayout(graph, range );

After applying that range, it makes a Zoom to that (like when we select a plot area with the mouse and it zooms that data) and I can reset that applied zoom later using the "reset axes" button.

In Blazor I'm trying to do the same zoom with XAxis.Range and then chart.Update() or chart.Relayout() but no changes are applied.

Is there an example or post about how to use the PlotlyChart.Relayout() or how to apply a Zoom or filter to the axes range? Thanks in advance, appreciate any suggestion on how to do that.

[maguilleng]

Hi, I was able to apply that Zoom, I was passing a wrong date string format. This is the working format:
plot.layout.XAxis = new List<XAxis>() { new XAxis { Range = new List<object>() { dateFrom.ToString("yyyy-MM-dd hh:mm:ss"), dateTo.ToString("yyyy-MM-dd hh:mm:ss") } } }; plot.chart.Relayout();
Thanks, hope it can help to othet people with the same question.

[sean-mcl]

I think you can also use DateTime directly, I wrote a converter for that.

Thanks for posting your solution directly.

[maguilleng]

Gotcha, Thanks for your help! I tried and it works with Dates. I was confused by the intellisense part that says "if the axis type is date, it should be date strings". After your comment I just realized the intellisense also says "Date objects and unix milliseconds will be accepted and converted to strings". Thanks so much for your great work at Plotly.Blazor guys.