Date range selector

Date range selector control allows picking out start and end dates for the chart zoom to. It can either use interactive calendar widget or date input fields.

Adding

Like any other control, it should be instantiated using new() syntax, and pushed into toolbar's controls list:

let toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DateRangeSelector.new(root, {
      stockChart: stockChart
    })
  ]
});

var toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DateRangeSelector.new(root, {
      stockChart: stockChart
    })
  ]
});

See the Pen
Stock chart controls by amCharts team (@amcharts)
on CodePen.0

Date format

Date range selector will automatically use global date format specified in the root element's date formatter.

The format will be used both to format dates displayed in the input fields, as well as parse user-typed dates.

Should we need to, we can override it using control's dateFormat setting:

let toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DateRangeSelector.new(root, {
      stockChart: stockChart,
      dateFormat: "yyyy-MM-dd"
    })
  ]
});

var toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DateRangeSelector.new(root, {
      stockChart: stockChart,
      dateFormat: "yyyy-MM-dd"
    })
  ]
});

Please refer to "Formatting dates" for syntax reference.

Restricting date range

By default, the range selector will allow selecting dates within actual scope of data on the chart.

We can use its settings minDate and maxDate to change that behavior.

Both settings can accept either Date object, "auto" (default), or null.

Date object means specific date. Setting it to on minDate for example will allow selecting dates only on or after that timestamp.

"auto" (default) means actual start or end of data.

null - no restrictions.

let toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DateRangeSelector.new(root, {
      stockChart: stockChart,
      minDate: new Date(2023, 2, 1),
      maxDate: null
    })
  ]
});

var toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DateRangeSelector.new(root, {
      stockChart: stockChart,
      minDate: new Date(2023, 2, 1),
      maxDate: null
    })
  ]
});

Period selector

Date range selector works well with period selector control.