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 chart colors.
• CSS Color Themes: specify colors of UI elements outside the chart like dialogs and widgets.
• Toolbars: change colors of 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 }
)

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:

• getSeries returns ISeriesApi that allows you to interact with a series.
• selection returns ISelectionApi that allows you to select drawings and indicators.
• getTimezoneApi returns ITimezoneApi that allows you to manage the chart's time zone.

Trading primitives

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");