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.

Period selector

Date range selector works well with period selector control.