How to remove out of dates with large range in range selector buttons in Plotly.JS?

by

I have a line plot with date in x-axis. My data is dynamic, so the range of dates always change. Sometimes it’s 1 year, some time 10 years, etc.

enter image description here

I add this code block for arrange x axis:

xaxis: {
  rangeselector: {buttons:[{step:"all",label:"MAX"},{count:10,label:"10Y",step:"year",stepmode:"backward"},{count:5,label:"5Y",step:"year",stepmode:"backward"},{count:1,label:"1Y",step:"year",stepmode:"backward"},{count:1,label:"YTD",step:"year",stepmode:"todate"},{count:6,label:"6M",step:"month",stepmode:"backward"},{count:1,label:"1M",step:"month",stepmode:"backward"}]},
  type: 'date',
  linecolor: '#D8D8D8',
  linewidth: 1,
  mirror: true,
  tickfont: {color: '#8f8f8f'},
  tickformat: '%B %Y',
  hoverformat: '%d %B %Y',
}

That works great but when I click time range which bigger than my data, there are empty space in the left of the chart.

enter image description here
I know that is expected, but I want to update this chart with minimum date of my data, even when more range selected.

Is there any way to handle this?

Maybe I can set start and end dates in range selector buttons instead of “1 year”, “5 year”. I couldn’t any way to it.

Leave a Comment