# 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](https://charting-library-docs.xstaging.tv/latest/ui_elements/Resolution.md), [time zone](https://charting-library-docs.xstaging.tv/latest/ui_elements/timezones.md), [locale](https://charting-library-docs.xstaging.tv/latest/configuration/Localization.md), [size](https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md#chart-size), and others. Refer to the [Widget Constructor](https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md#chart-configuration) article for more information. ## Customization :::tip Refer to the [Customization](https://charting-library-docs.xstaging.tv/latest/customization.md) 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](https://charting-library-docs.xstaging.tv/latest/customization/overrides/chart-overrides.md): specify default color of UI elements on the chart like scales and panes. - [Custom themes API](https://charting-library-docs.xstaging.tv/latest/customization/styles/custom-themes.md): 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](https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md). If there is no featureset for an element you want to hide, you can do it by adding your custom [CSS file](https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#custom_css_url). ### Show/hide gaps on the chart By default, the library hides periods with no trading activity to keep the chart continuous. In certain cases, such as analyzing low-liquidity instruments, it might be useful to represent these periods with whitespace gaps on the chart. To do this, use the [`inactivity_gaps`](../customization/Featuresets.md#inactivity_gaps) featureset. Note that inactivity gaps are displayed **only within the trading session** of the instrument. For example, for a U.S. stock with a trading session from 09:00 to 16:00, inactivity outside of the session will not be displayed. When [`inactivity_gaps`](../customization/Featuresets.md#inactivity_gaps) is enabled, the corresponding checkbox appears in the *Chart settings* dialog, allowing users to toggle inactivity gaps on or off. The checkbox is disabled by default. You can also use the [`inactivityGaps`](../api/interfaces/Charting_Library.IChartWidgetApi.md#inactivitygaps) method to control the gaps visibility through the API. ```javascript // Access the watched value for inactivity gaps visibility const inactivityGaps = widget.chart().inactivityGaps(); // Enable inactivity gaps display inactivityGaps.set(true); // Listen for changes inactivityGaps.subscribe((isVisible) => { console.log('Inactivity gaps visibility changed by the user:', isVisible); }); ``` ## 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](https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi). ### Subscribe to events You can subscribe to the chart events using methods like [`onDataLoaded`], [`onSymbolChanged`], [`onChartTypeChanged`], and others. For a complete list of all available chart events and how to use them, refer to the [Events and subscriptions] article. For example, the code sample below specifies a time frame when an interval is changed using the [`onIntervalChanged`](../api/interfaces/Charting_Library.IChartWidgetApi.md#onintervalchanged) method. ```javascript 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](https://charting-library-docs.xstaging.tv/latest/resources/glossary.md#date-range) using the [`setVisibleRange`] method. ```javascript widget.activeChart().setVisibleRange( { from: Date.UTC(2023, 6, 12, 13, 30) / 1000 }, { applyDefaultRightMargin: true } ) ``` ### Apply overrides You can use the [`applyOverrides`] method to change the properties of a specific chart on the fly. This is particularly useful in [multiple-chart layouts] when you want to apply settings to one chart without affecting others. For example, the code sample below hides the legend on the first chart only: ```js // Access the first chart in the layout const firstChart = widget.chart(0); // Apply overrides specifically to this chart firstChart.applyOverrides({ "paneProperties.legendProperties.showLegend": false }); ``` For a full list of available properties, refer to the [Chart overrides] article. [multiple-chart layouts]: https://charting-library-docs.xstaging.tv/latest/trading_terminal.md#multiple-chart-layout [`applyOverrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#applyoverrides [Chart overrides]: https://charting-library-docs.xstaging.tv/latest/customization/overrides/chart-overrides.md ### 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. ```js widget.activeChart().executeActionById("chartReset"); ``` Click to reveal the list of the ChartActionId types. | Action ID | Purpose | |-|-| | `"addPlusButton"` | Enables or disables the *Plus* button on the price scale for [quick trading]. | | `"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][indicator-link]. | | `"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][indicator-link] on the chart. | | `"lineToggleLock"` | Enables or disables the *Lock/Unlock* button in the floating toolbar of the selected [drawing][drawing-link]. | | `"lineHide"` | Hides the selected [drawing][drawing-link] 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][indicator-link] and [drawings][drawing-link] 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. ```javascript widget.activeChart().createShape( { time: 1514764800 }, { shape: 'vertical_line' } ); ``` ### Enable drag-to-export feature The drag-to-export feature allows users to drag the chart area to export data to external applications. For example, a user can drag the chart into a text editor to paste JSON data. To implement this feature: 1. Enable the [`chart_drag_export`] featureset. 2. Call the [`setDragExportEnabled(true)`] method on the active chart. 3. Subscribe to the [`dragstart`] event. 4. Define the event handler. The handler receives a [`DragStartParams`] object. You can use its properties to define the drag behavior: - [`keys`] to trigger the export only when specific modifier keys are pressed. - [`setData`] to attach data to the drag event. If you do not call this method, the drag is ignored, and normal chart interaction continues. - [`setDragImage`] to set a custom visual element for the drag operation. The example below enables the feature and exports chart data as JSON. The drag is only triggered if the user presses the Meta (Command) key. See the Pen Drag-to-export feature by TradingView (@tradingview) on CodePen. ### 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. ```javascript 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](https://charting-library-docs.xstaging.tv/latest/resources/glossary.md#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. [`onDataLoaded`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#ondataloaded [`onSymbolChanged`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#onsymbolchanged [`onChartTypeChanged`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#oncharttypechanged [`setSymbol`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#setsymbol [`setResolution`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#setresolution [`resetData`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#resetdata [`clearMarks`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#clearmarks [`setVisibleRange`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#setvisiblerange [`createStudy`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#createstudy [`getAllShapes`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#getallshapes [`getShapeById`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#getshapebyid [`removeAllStudies`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#removeallstudies [`createShape`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#createshape [`symbol`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#symbol [`chartType`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#charttype [`resolution`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#resolution [`getVisibleRange`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#getvisiblerange [`getSeries`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#getseries [`ISeriesApi`]: api/interfaces/Charting_Library.ISeriesApi.md [`selection`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#selection [`ISelectionApi`]: api/interfaces/Charting_Library.ISelectionApi.md [`getTimezoneApi`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#gettimezoneapi [`ITimezoneApi`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ITimezoneApi [`executeActionById`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#executeactionbyid [top toolbar]: https://charting-library-docs.xstaging.tv/latest/ui_elements.md#top-toolbar [chart]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Chart.md [*Compare symbol*]: https://charting-library-docs.xstaging.tv/latest/ui_elements/indicators.md#add-and-compare-new-series [drawing-link]: https://charting-library-docs.xstaging.tv/latest/ui_elements/drawings.md [drawing toolbar]: https://charting-library-docs.xstaging.tv/latest/ui_elements.md#drawing-toolbar [Events and subscriptions]: https://charting-library-docs.xstaging.tv/latest/configuration/events-and-subscriptions.md [indicator-link]: https://charting-library-docs.xstaging.tv/latest/ui_elements/indicators.md [marks]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Marks.md [price scale]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Price-Scale.md [resolution]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Resolution.md [*Symbol Search*]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Symbol-Search.md [time scale]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Time-Scale.md [widget bar]: https://charting-library-docs.xstaging.tv/latest/ui_elements.md#widget-bar [quick trading]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Price-Scale.md#quick-trading [`chart_drag_export`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#chart_drag_export [`dragstart`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.SubscribeEventsMap#dragstart [`DragStartParams`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.DragStartParams [`keys`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.DragStartParams#keys [`setData`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.DragStartParams#setdata [`setDragExportEnabled(true)`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#setdragexportenabled [`setDragImage`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.DragStartParams#setdragimage --- ## Sitemap - [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt) - [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)