javascriptplotlyplotly.js

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

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.

Edit: Here is a live example. When you click on intervals such as 1 year, or 5 years, there will be a gap on the left side of the chart. I want to remove this space.

let x = ['2023-09-21', '2023-09-22', '2023-09-25', '2023-09-26', '2023-09-27', '2023-09-28', '2023-09-29', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05', '2023-10-06', '2023-10-09', '2023-10-10', '2023-10-11', '2023-10-12', '2023-10-13', '2023-10-16', '2023-10-17', '2023-10-18', '2023-10-19', '2023-10-20', '2023-10-23', '2023-10-24', '2023-10-25', '2023-10-26', '2023-10-27', '2023-10-30', '2023-10-31', '2023-11-01', '2023-11-02', '2023-11-03', '2023-11-06', '2023-11-07', '2023-11-08', '2023-11-09', '2023-11-10', '2023-11-13', '2023-11-14', '2023-11-15', '2023-11-16', '2023-11-17', '2023-11-20', '2023-11-21', '2023-11-22', '2023-11-24', '2023-11-27', '2023-11-28', '2023-11-29', '2023-11-30', '2023-12-01', '2023-12-04', '2023-12-05', '2023-12-06', '2023-12-07', '2023-12-08', '2023-12-11', '2023-12-12', '2023-12-13', '2023-12-14', '2023-12-15', '2023-12-18', '2023-12-19', '2023-12-20', '2023-12-21', '2023-12-22', '2023-12-26', '2023-12-27', '2023-12-28', '2023-12-29', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-08', '2024-01-09', '2024-01-10', '2024-01-11', '2024-01-12', '2024-01-16', '2024-01-17', '2024-01-18', '2024-01-19', '2024-01-22', '2024-01-23', '2024-01-24', '2024-01-25', '2024-01-26', '2024-01-29', '2024-01-30', '2024-01-31', '2024-02-01', '2024-02-02', '2024-02-05', '2024-02-06', '2024-02-07']
let y = [0, 0, 0, -0.02, -0.03, -0.03, -0.03, -0.02, -0.03, -0.02, -0.01, -0, 0, 0, 0, 0, -0.01, -0.01, -0.02, -0.03, -0.03, -0.04, -0.04, -0.04, -0.05, -0.07, -0.06, -0.05, -0.05, -0.03, -0.01, -0.02, -0.01, -0, 0, 0, 0, -0.01, -0, -0, 0, 0, 0, 0, 0, -0.01, -0.01, -0.01, -0.02, -0.02, -0.01, -0.02, -0, -0.01, -0, 0, -0.01, -0, 0, 0, 0, -0.01, -0, -0.01, -0.01, -0.02, -0.02, -0.02, -0.02, -0.03, -0.07, -0.08, -0.09, -0.09, -0.07, -0.07, -0.06, -0.06, -0.06, -0.07, -0.08, -0.05, -0.03, -0.02, -0.01, -0.01, -0.01, -0.02, -0.02, -0.04, -0.06, -0.05, -0.06, -0.05, -0.04, -0.04]

let historicalButtons = [{
    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'
  }
]

var data = {
  type: "scatter",
  x: x,
  y: y,
}

var layout = {
  xaxis: {

    rangeselector: {
      buttons: historicalButtons
    },
    type: 'date',
    linecolor: '#D8D8D8',
    linewidth: 1,
    mirror: true,
    tickfont: {
      color: '#8f8f8f'
    },
    tickformat: '%B %Y',
    hoverformat: '%d %B %Y',
  },

};

Plotly.newPlot('chart', [data], layout);
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<div id="chart"></div>

Solution

  • Here is a working version.

    As you can see:

    1. You have to specify a rangeslider: {} in the xaxis definition
    2. I made it work with an old plotly-1.8.0.min.js. Not a newer one, don't ask me why... Plotly still uses this old version too in its CodePen-generated demos.

    let x = ['2023-09-21', '2023-09-22', '2023-09-25', '2023-09-26', '2023-09-27', '2023-09-28', '2023-09-29', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05', '2023-10-06', '2023-10-09', '2023-10-10', '2023-10-11', '2023-10-12', '2023-10-13', '2023-10-16', '2023-10-17', '2023-10-18', '2023-10-19', '2023-10-20', '2023-10-23', '2023-10-24', '2023-10-25', '2023-10-26', '2023-10-27', '2023-10-30', '2023-10-31', '2023-11-01', '2023-11-02', '2023-11-03', '2023-11-06', '2023-11-07', '2023-11-08', '2023-11-09', '2023-11-10', '2023-11-13', '2023-11-14', '2023-11-15', '2023-11-16', '2023-11-17', '2023-11-20', '2023-11-21', '2023-11-22', '2023-11-24', '2023-11-27', '2023-11-28', '2023-11-29', '2023-11-30', '2023-12-01', '2023-12-04', '2023-12-05', '2023-12-06', '2023-12-07', '2023-12-08', '2023-12-11', '2023-12-12', '2023-12-13', '2023-12-14', '2023-12-15', '2023-12-18', '2023-12-19', '2023-12-20', '2023-12-21', '2023-12-22', '2023-12-26', '2023-12-27', '2023-12-28', '2023-12-29', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-08', '2024-01-09', '2024-01-10', '2024-01-11', '2024-01-12', '2024-01-16', '2024-01-17', '2024-01-18', '2024-01-19', '2024-01-22', '2024-01-23', '2024-01-24', '2024-01-25', '2024-01-26', '2024-01-29', '2024-01-30', '2024-01-31', '2024-02-01', '2024-02-02', '2024-02-05', '2024-02-06', '2024-02-07'];
let y = [0, 0, 0, -0.02, -0.03, -0.03, -0.03, -0.02, -0.03, -0.02, -0.01, -0, 0, 0, 0, 0, -0.01, -0.01, -0.02, -0.03, -0.03, -0.04, -0.04, -0.04, -0.05, -0.07, -0.06, -0.05, -0.05, -0.03, -0.01, -0.02, -0.01, -0, 0, 0, 0, -0.01, -0, -0, 0, 0, 0, 0, 0, -0.01, -0.01, -0.01, -0.02, -0.02, -0.01, -0.02, -0, -0.01, -0, 0, -0.01, -0, 0, 0, 0, -0.01, -0, -0.01, -0.01, -0.02, -0.02, -0.02, -0.02, -0.03, -0.07, -0.08, -0.09, -0.09, -0.07, -0.07, -0.06, -0.06, -0.06, -0.07, -0.08, -0.05, -0.03, -0.02, -0.01, -0.01, -0.01, -0.02, -0.02, -0.04, -0.06, -0.05, -0.06, -0.05, -0.04, -0.04];

var selectorOptions = {
  buttons: [{
    step: 'month',
    stepmode: 'backward',
    count: 1,
    label: '1m'
  }, {
    step: 'month',
    stepmode: 'backward',
    count: 6,
    label: '6m'
  }, {
    step: 'year',
    stepmode: 'todate',
    count: 1,
    label: 'YTD'
  }, {
    step: 'year',
    stepmode: 'backward',
    count: 5,
    label: '5y'
  }, {
    step: 'all',
  }],
};

var data = [{
  mode: 'lines',
  x: x,
  y: y
}];

var layout = {
  xaxis: {
    rangeselector: selectorOptions,
    rangeslider: {},
  },
};

Plotly.newPlot('chart', data, layout);
    <script src="https://cdn.plot.ly/plotly-1.8.0.min.js"></script>
<div id="chart"></div>

    Same result in JSFiddle: https://jsfiddle.net/v41anqcf/2/