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.
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.
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.