Modifying series/indicator settings modal

This tutorial will show how we can modify items listed in a settings modal that opens when you click series/indicator gear icon in its legend.

Setting up an event

To modify the list of settings, we will use SettingsModal event: initstarted. It kicks in when settings modal is invoked, just before its contents are generated.

TypeScript

stockChart.getPrivate("settingsModal").events.on("initstarted", function(ev) {
  // Do our stuff here
});

JavaScript

stockChart.getPrivate("settingsModal").events.on("initstarted", function(ev) {
  // Do our stuff here
});

The event object contains most of the stuff that we need:

• settings - a list of settings items that we can modify.
• settingsTarget - a series or an indicator that settings modal is being opened for.

Identifying the target

The event will kick in for all targets. Unless we want to add a super universal setting that applies to all types of series and indicators, we will need to constrain our code to specific type of target:

TypeScript

stockChart.getPrivate("settingsModal").events.on("initstarted", function(ev) {
  if (ev.settingsTarget.isType("LineSeries")) {
    // Only show for LineSeries
  }
});

JavaScript

stockChart.getPrivate("settingsModal").events.on("initstarted", function(ev) {
  if (ev.settingsTarget.isType("LineSeries")) {
    // Only show for LineSeries
  }
});

The above will ensure that we’re adding a custom setting for LineSeries only, ignoring all the rest.

Adding settings

Now, to add a setting we will need to push an object into settings array of the event object.

TypeScript

stockChart.getPrivate("settingsModal").events.on("initstarted", function(ev) {
  if (ev.settingsTarget.isType("LineSeries")) {
    let series = ev.settingsTarget;
    ev.settings.push({
      key: "fillOpacity",
      name: "Fill opacity",
      type: "dropdown",
      options: ["0", "0.5", "1"],
      currentValue: series.fills.template.get("fillOpacity", 0),
      target: series.fills.template,
      invalidateTarget: series
    });
  }
});

JavaScript

stockChart.getPrivate("settingsModal").events.on("initstarted", function(ev) {
  if (ev.settingsTarget.isType("LineSeries")) {
    var series = ev.settingsTarget;
    ev.settings.push({
      key: "fillOpacity",
      name: "Fill opacity",
      type: "dropdown",
      options: ["0", "0.5", "1"],
      currentValue: series.fills.template.get("fillOpacity", 0),
      target: series.fills.template,
      invalidateTarget: series
    });
  }
});

The settings object can have the following items:

Key	Comment
key	The setting key to be set.
name	Label to be displayed next to the setting.
type	Available options: "text", "checkbox", "color", "number", "dropdown".
options	An array of options in case type: "dropdown"
currentValue	Current value.
target	The target the new value will bet set on.
invalidateTarget	A target that needs to be invalidated after change, in case it should be different than the target.

Example

Open in CodePen