Stock toolbar

Stock toolbar is a tool bundled with our Stock chart that can hold a number of chart-related controls, built-in or custom.

Creating

A toolbar will need to be placed into its own container <div>, separate from the chart's container.

<div id="chartcontrols"></div>
<div id="chartdiv"></div>

NOTEThe container for toolbar should not be constricted with specific height using CSS, as its content is adjusted dynamically, thus the height might change based on user's interactions.

To create a toolbar we will need to instantiate a StockToolbar class, using its new() method.

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

To work properly it needs three settings to be set:

  • container - a reference to a <div> element to place toolbar elements in.
  • stockChart - a reference to our stock chart.
  • controls - a list of controls to put into toolbar (more about it later).

Controls

Adding controls

A toolbar is just a shell. To add actual functionality, we need to add controls designed for it.

Stock chart comes with a number of controls:

ClassComment
ComparisonControlA control designed to add additional series to compare against main series.Info
DataSaveControlAllows saving/restoring current annotations, as well as enabling auto-saving.Info
DateRangeSelectorAllows selecting date range the chart to zoom to, using date picker.Info
DrawingControlToggles drawing tools on and off. Puts chart into "annotation mode".Info
IndicatorControlAllows adding technical indicators.Info
IntervalControlAllows switching data granularity.Info
PeriodSelectorDisplays a pre-defined list of periods for quick zoom of the chart.Info
ResetControlRemoves all annotations and indicators added by user.Info
SeriesTypeControlAllows switching type of the main series.Info
SettingsControlAllows changing some settings of the chart, such as Y-axis scale and axis fills.Info

Besides these functional controls, stock chart offers generic controls that we can use to add custom functionality:

ClassComment
DropdownListControlA control that can be used to add searchable list of any item for selection.Info
StockControlA simple clickable or togglable button.Info

Some controls are completely automated, while some will require custom code attached to its events for proper implementation.

All controls require stockChart set to an instance of the stock chart they are used for.

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

The above code will add three controls: drawing control which toggles annotation tools, as well as reset and settings controls.

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

Configuring controls

As we mentioned before, some controls work without any configuration out-of-the-box, whereas others require additional custom code or configuration.

As an example, SeriesTypeControl control cannot change type of the series itself. It will rely on developer configuring an event handler which, when user selects new series type, destroys the old series, creates a new one, and sets it on the stock chart.

let seriesSwitcher = am5stock.SeriesTypeControl.new(root, {
  stockChart: stockChart
});

seriesSwitcher.events.on("selected", function(ev) {
  setSeriesType(am5.type.isString(ev.item) ? ev.item : ev.item.id);
});

function setSeriesType(seriesType) {
  // Remove previous series
  let currentSeries = stockChart.get("stockSeries");
  let data = currentSeries.data.values;
  mainPanel.series.removeValue(currentSeries);

  // Create new series
  let series;
  switch (seriesType) {
    case "line":
      series = mainPanel.series.push(am5xy.LineSeries.new(root, {
        // ...
      }));
      break;
    case "candlestick":
    case "procandlestick":
      series = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
        // ...
      }));
      if (seriesType == "procandlestick") {
        series.columns.template.get("themeTags").push("pro");
      }
      break;
    case "ohlc":
      series = mainPanel.series.push(am5xy.OHLCSeries.new(root, {
        // ...
      }));
      break;
  }

  // Set new series as stockSeries
  if (series) {
    valueLegend.data.removeValue(currentSeries);
    series.data.setAll(data);
    stockChart.set("stockSeries", series);
    const cursor = mainPanel.get("cursor");
    if (cursor) {
      cursor.set("snapToSeries", [series]);
    }
    valueLegend.data.insertIndex(0, series);
  }
}
var seriesSwitcher = am5stock.SeriesTypeControl.new(root, {
  stockChart: stockChart
});

seriesSwitcher.events.on("selected", function(ev) {
  setSeriesType(am5.type.isString(ev.item) ? ev.item : ev.item.id);
});

function setSeriesType(seriesType) {
  // Remove previous series
  var currentSeries = stockChart.get("stockSeries");
  var data = currentSeries.data.values;
  mainPanel.series.removeValue(currentSeries);

  // Create new series
  var series;
  switch (seriesType) {
    case "line":
      series = mainPanel.series.push(am5xy.LineSeries.new(root, {
        // ...
      }));
      break;
    case "candlestick":
    case "procandlestick":
      series = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
        // ...
      }));
      if (seriesType == "procandlestick") {
        series.columns.template.get("themeTags").push("pro");
      }
      break;
    case "ohlc":
      series = mainPanel.series.push(am5xy.OHLCSeries.new(root, {
        // ...
      }));
      break;
  }

  // Set new series as stockSeries
  if (series) {
    valueLegend.data.removeValue(currentSeries);
    series.data.setAll(data);
    stockChart.set("stockSeries", series);
    const cursor = mainPanel.get("cursor");
    if (cursor) {
      cursor.set("snapToSeries", [series]);
    }
    valueLegend.data.insertIndex(0, series);
  }
}

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

MIRE INFOFor more information about each control follow links on the table earlier in this chapter, or in navigation menu on the left.

Accessibility

To enable accessibility of the toolbar (make it controllable via keyboard), simply set focusable: true:

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

Styling controls

The toolbar controls are all DOM elements, that can be targeted via CSS to override their look.

The following CSS will make toolbar's button dark green:

#chartcontrols .am5stock-control-button {
  background: #171c1c;
  color: #fff;
}

#chartcontrols .am5stock-control-button:hover {
  background: #98AEAB;
  color: #171c1c;
}

#chartcontrols .am5stock-control-icon path {
  stroke: #fff;
}

#chartcontrols .am5stock-control-button:hover .am5stock-control-icon path {
  stroke: #171c1c!important;
}

As you can see, various elements can be targeted using built-in class names.

NOTENotice the #charttools prefix in the CSS queries above. Since Stock Toolbar adds own CSS dynamically, simple targeting like .am5stock-control-button might not work, since default CSS might get loaded after your own custom CSS. More precise targeting like prefixing with the id of your toolbar container ensures that your queries will take precedence.

The following table lists a few of those.

Class nameComment
am5stock-controlWrapper for any control.
am5stock-control-buttonButton wrapper.
am5stock-control-dropdownDropdown wrapper.
am5stock-control-iconIcon in the button.
am5stock-control-labelLabel.

There are more. We suggest right-clicking on any toolbar element, and selecting "Inspect element" item, which would open up browser's DOM tool.

You can use it to explore actual structure of the toolbar's elements, their assigned class names, and built-in CSS that affects it.

Here's an example:

See the Pen
Customizing colors of a StockToolbar
by amCharts team (@amcharts)
on CodePen.0

Related tutorials