Settings control can be added to stock toolbar which provides several bult-in configuration controls that user can use to modify chart behavior. It can also be enhanced with custom items.
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.DrawingControl.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.SettingsControl.new(root, { stockChart: stockChart }) ] });
See the Pen
Stock chart controls by amCharts team (@amcharts)
on CodePen.0
Alignment
Reset control is aligned to right by default.
If we'd like it to go left - with the rest of the controls - we can set its align: "left"
setting.
let toolbar = am5stock.StockToolbar.new(root, { container: document.getElementById("chartcontrols"), stockChart: stockChart, controls: [ am5stock.DrawingControl.new(root, { stockChart: stockChart }), am5stock.SettingsControl.new(root, { stockChart: stockChart, align: "left" }) ] });
var toolbar = am5stock.StockToolbar.new(root, { container: document.getElementById("chartcontrols"), stockChart: stockChart, controls: [ am5stock.DrawingControl.new(root, { stockChart: stockChart }), am5stock.SettingsControl.new(root, { stockChart: stockChart, align: "left" }) ] });
Modifying
Getting default items
A settings control is essentially a regular dropdown list control with pre-filled item list.
To grab the default list of items from a newly-created settings control, use its items
setting:
let settingsControl = am5stock.SettingsControl.new(root, { stockChart: stockChart }); let settings = settingsControl.get("items");
var settingsControl = am5stock.SettingsControl.new(root, { stockChart: stockChart }); var settings = settingsControl.get("items");
If we look at what's inside settings
variable now, we'll see an array of objects, identifying each item in the list.
Each item has an id
property, which is required.
At this moment, settings control comes with two default settings:
Setting id | Comment |
---|---|
fills | Toggles X axis fills. |
y-scale | Switches between percent, logarithmic, and regular scale, on an Y axis of main panel. |
Removing items
We can use item ids, to selectively remove them from the item list, then set it back to the settings control's items
setting.
let settingsControl = am5stock.SettingsControl.new(root, { stockChart: stockChart }); let settings = settingsControl.get("items"); let newSettings = []; am5.array.each(newSettings, function(setting) { if (setting.id != "fills") { newSettings.push(setting); } }); settingsControl.set("items", newSettings);
var settingsControl = am5stock.SettingsControl.new(root, { stockChart: stockChart }); var settings = settingsControl.get("items"); var newSettings = []; am5.array.each(newSettings, function(setting) { if (setting.id != "fills") { newSettings.push(setting); } }); settingsControl.set("items", newSettings);
The above will remove the "Fills" setting from the settings control.
Adding items
We can add new items to the settings list, too.
let settingsControl = am5stock.SettingsControl.new(root, { stockChart: stockChart }); let newSettings = settingsControl.get("items"); newSettings.unshift({ form: "checkbox", id: "mySetting", label: "My custom setting" }, { form: "checkbox", id: "mySetting2", label: "Another setting", checked: true }); settingsControl.set("items", newSettings);
var settingsControl = am5stock.SettingsControl.new(root, { stockChart: stockChart }); var newSettings = settingsControl.get("items"); newSettings.unshift({ form: "checkbox", id: "mySetting", label: "My custom setting" }, { form: "checkbox", id: "mySetting2", label: "Another setting", checked: true }); settingsControl.set("items", newSettings);
The list items can be forms, headings, or regular labels. Refer to "Dropdown list control" tutorial for more information.
Events
Before custom settings can be useful, we also need to attach a changed
event to our settings control's dropdown sub-element, which would get invoked when setting is changed:
settingsControl.getPrivate("dropdown").events.on("changed", function(ev) { console.log(ev.item.label, ev.checked); });
settingsControl.getPrivate("dropdown").events.on("changed", function(ev) { console.log(ev.item.label, ev.checked); });
Example
See the Pen
Stock chart with custom settings control by amCharts team (@amcharts)
on CodePen.0