Skip to main content
Version: latest

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:

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:

Trading primitives​

info

These methods will be removed from the Advanced Charts library in the next major version. However, they will still be 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");