Period selector

Period selector is a stock toolbar control that displays buttons for predefined periods. Those can be used to single-click zoom to some useful pre-defined period, such as 1 month, year-to-date, etc.

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.PeriodSelector.new(root, {
      stockChart: stockChart
    })
  ]
});

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

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

Period list

A list of pre-defined periods can be set via control's periods setting.

It accepts a list of objects that holds time unit ("millisecond", "second", "minute", "hour", "day", "week", "month", "year", and two special units: "ytd" and "max"), count, and a name.

Defaults are as follows:

[
  { timeUnit: "day", count: 1, name: "1D" },
  { timeUnit: "day", count: 5, name: "5D" },
  { timeUnit: "month", count: 1, name: "1M" },
  { timeUnit: "month", count: 3, name: "3M" },
  { timeUnit: "month", count: 6, name: "6M" },
  { timeUnit: "ytd", name: "YTD" },
  { timeUnit: "year", count: 1, name: "1Y" },
  { timeUnit: "year", count: 2, name: "2Y" },
  { timeUnit: "year", count: 5, name: "5Y" },
  { timeUnit: "max", name: "Max" },
]

Should we want to, we can modify it to our needs:

let toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.PeriodSelector.new(root, {
      stockChart: stockChart,
      periods: [
        { timeUnit: "month", count: 1, name: "1M" },
        { timeUnit: "ytd", name: "YTD" },
        { timeUnit: "year", count: 1, name: "1Y" },
        { timeUnit: "max", name: "Max" },
      ]
    })
  ]
});

var toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.PeriodSelector.new(root, {
      stockChart: stockChart,
      periods: [
        { timeUnit: "month", count: 1, name: "1M" },
        { timeUnit: "ytd", name: "YTD" },
        { timeUnit: "year", count: 1, name: "1Y" },
        { timeUnit: "max", name: "Max" },
      ]
    })
  ]
});

Pre-selecting a period

If we want the chart to start up with some period pre-selected, we can use period selector's selectPeriod() method.

It accepts a period definition as a parameter, e.g.:

periodSelector.selectPeriod({ timeUnit: "month", count: 6 });

periodSelector.selectPeriod({ timeUnit: "month", count: 6 });

However, since chart starts off without data, and thus no scale on a date axis, we would probably need to call this when data is parsed:

valueSeries.events.once("datavalidated", function() {
  periodSelector.selectPeriod({ timeUnit: "month", count: 6 });
});

valueSeries.events.once("datavalidated", function() {
  periodSelector.selectPeriod({ timeUnit: "month", count: 6 });
});

Date range selector

Period selector works well together with date range selector control.