Skip to main content

Chart

This article contains general information on how to customize and control the chart. For more information about certain chart elements, refer to the rest of the articles in the UI Elements section.

Default chart settings​

You should use the Widget Constructor to set up default chart settings like symbol, resolution, time zone, locale, size, and others. Refer to the Widget Constructor article for more information.

Customization​

tip

Refer to the Customization section for detailed information on how to customize the chart and its elements.

Change colors​

You can customize the colors of the chart to implement your corporate colors. The articles listed below explain how to change colors in certain cases:

  • Chart Overrides: specify default color of UI elements on the chart like scales and panes.
  • Custom themes API: specify default color of UI elements outside the chart like dialogs and toolbars.

Show/hide chart elements​

You can show/hide chart elements using featuresets. If there is no featureset for an element you want to hide, you can do it by adding your custom CSS file.

Chart methods​

You can use the Chart API to interact with the chart after it is initialized. For example, you can subscribe to chart events, manage drawings and indicators, get information about a current configuration, perform Z-order operations, and more. All methods are listed in IChartWidgetApi.

Subscribe to events​

You can subscribe to the chart events using methods like onDataLoaded, onSymbolChanged, onChartTypeChanged, and others. For example, the code sample below specifies a time frame when an interval is changed using the onIntervalChanged method.

widget.activeChart().onIntervalChanged().subscribe(null, (interval, timeframeObj) =>
    timeframeObj.timeframe = {
        value: '12M',
        type: 'period-back'
});

Manage chart​

You can manage chart settings using methods like setSymbol, setResolution, resetData, clearMarks, and others. For example, the code sample below specifies a new range using the setVisibleRange method.

widget.activeChart().setVisibleRange(
    { from: Date.UTC(2023, 6, 12, 13, 30) / 1000 },
    { applyDefaultRightMargin: true }
)

Execute action by ID​

The executeActionById method allows you to trigger specific actions programmatically through the API. This is useful for customizing UI or replicating built-in functionality with custom components. For example, you can replace built-in top toolbar buttons with custom ones or trigger actions for hidden UI elements.

widget.activeChart().executeActionById("chartReset");

Click to reveal the list of the ChartActionId types.

Action IDPurpose
"chartProperties"Opens the Chart settings dialog.
"compareOrAdd"Opens or hides the Compare symbol dialog.
"scalesProperties"Opens or hides the Chart settings dialog.
"paneObjectTree"Opens the Object tree on the widget bar.
"insertIndicator"Opens or hides a dialog for adding indicators.
"symbolSearch"Opens the Symbol Search dialog.
"changeInterval"Opens a dialog for changing resolution.
"timeScaleReset"Resets the time scale to its default state.
"chartReset"Resets the chart view to its default state.
"seriesHide"Hides the selected series on the chart.
"studyHide"Hides the selected indicator on the chart.
"lineToggleLock"Enables or disables the Lock/Unlock button in the floating toolbar of the selected drawing.
"lineHide"Hides the selected drawing on the chart.
"scaleSeriesOnly"Enables or disables the Scale price chart only option for the price scale.
"drawingToolbarAction"Opens or hides the drawing toolbar.
"stayInDrawingModeAction"Enables or disables the Stay in drawing mode.
"hideAllMarks"Shows or hides all marks on the chart.
"showCountdown"Enables or disables Countdown to bar close option for the price scale.
"showSeriesLastValue"Shows or hides the series's last value on the price scale.
"showSymbolLabelsAction"Shows or hides the symbol's label on the price scale.
"showStudyLastValue"Shows or hides the indicator's last value on the price scale.
"showStudyPlotNamesAction"Shows or hides the indicator's label on the price scale.
"undo"Undoes the last applied action.
"redo"Redoes the last undone action.
"paneRemoveAllStudiesDrawingTools"Removes all indicators and drawings from the chart.
"showSymbolInfoDialog"Opens the Security info dialog.

Manage drawings and indicators​

You can create and manage drawings/indicators using methods like createStudy, getAllShapes, getShapeById, removeAllStudies, and others. For example, the code sample below adds the Vertical line drawing on the chart using the createShape method.

widget.activeChart().createShape(
    { time: 1514764800 },
    { shape: 'vertical_line' }
);

Getters​

You can get information about the current chart settings using methods like symbol, chartType, getVisibleRange, and others. For example, the code sample below gets the current resolution using the resolution method.

console.log(widget.activeChart().resolution());

You can also use chart methods to get objects that provide API to perform certain operations. For example:

Trading primitives​

caution

Starting from version 29, the methods for creating trading primitives are only available in [Trading Platform].

You can create an order/position line and trade execution using the corresponding createOrderLine, createPositionLine, createExecutionShape methods. Refer to Trading Primitives for more information.

For example, the code sample below adds a new order line on the chart using the createOrderLine method.

widget.activeChart().createOrderLine()
    .setTooltip("Additional order information")
    .setModifyTooltip("Modify order")
    .setCancelTooltip("Cancel order")
    .onMove(function() {
        this.setText("onMove called");
    })
    .onModify("onModify called", function(text) {
        this.setText(text);
    })
    .onCancel("onCancel called", function(text) {
        this.setText(text);
    })
    .setText("STOP: 73.5 (5,64%)")
    .setQuantity("2");