Skip to main content
Version: v27

Chart Overrides

This article describes Overrides API properties that affect elements on the chart. You can find a full list of properties on the ChartPropertiesOverrides page.

All properties are divided into four groups:

paneProperties

These properties affect elements located on the chart's pane (inside the highlighted area).

Main pane

Chart background color

You can specify a background color using the following properties:

PropertyDescription
paneProperties.backgroundTypePane background type.
paneProperties.backgroundPane background color.
paneProperties.backgroundGradientStartColorPane background gradient start color.
paneProperties.backgroundGradientEndColorPane background gradient end color.

Background color can be either solid or gradient. Note that the default background type is gradient in the dark theme. The following code samples demonstrate how to specify background in the dark theme:

Gradient color
var widget = (window.tvWidget = new TradingView.widget({
// ...
theme: "dark",
overrides: {
"paneProperties.backgroundGradientStartColor": "#020024",
"paneProperties.backgroundGradientEndColor": "#4f485e",
},
}));

Gradient color

Solid color
var widget = (window.tvWidget = new TradingView.widget({
// ...
theme: "dark",
overrides: {
"paneProperties.background": "#020024",
"paneProperties.backgroundType": "solid"
},
}));

Solid color

Grid lines

You can specify grid lines using the following properties:

PropertyDescription
paneProperties.vertGridProperties.colorPane vertical grid color.
paneProperties.vertGridProperties.stylePane vertical grid line style.
paneProperties.horzGridProperties.colorPane horizontal grid color.
paneProperties.horzGridProperties.stylePane horizontal grid line style.

The code sample below specifies a dotted grid line.

Dotted grid line
var widget = (window.tvWidget = new TradingView.widget({
// ...
overrides: {
"paneProperties.horzGridProperties.style": "1"
},
}));

Pane separator

You can change the color of the pane separator using the following property (it's also available in Chart settings but you'll have to at least have a pane in addition to main series to see it):

PropertyDescription
paneProperties.separatorColorPane separator color.

Here's a code sample:

Pane separator color
var widget = (window.tvWidget = new TradingView.widget({
// ...
overrides: {
"paneProperties.separatorColor": "#9598a1"
},
}));

Legend

You can specify a legend using the following properties:

PropertyDescription
paneProperties.legendProperties.showStudyArgumentsStudy legend input values visibility.
paneProperties.legendProperties.showStudyTitlesStudies legend title visibility.
paneProperties.legendProperties.showStudyValuesStudies legend value visibility.
paneProperties.legendProperties.showSeriesTitleSeries legend title visibility.
paneProperties.legendProperties.showSeriesOHLCStudy legend OHLC values visibility.
paneProperties.legendProperties.showBarChangeSeries legend change value visibility.
paneProperties.legendProperties.showVolumeSeries legend volume value visibility.
paneProperties.legendProperties.showBackgroundLegend background visibility.
paneProperties.legendProperties.backgroundTransparencyLegend background transparency percentage.

Some properties that relate to the mainSeriesProperties group also affect the chart's legend.

PropertyDescription
mainSeriesProperties.statusViewStyle.fontSizeMain series legend font size.
mainSeriesProperties.statusViewStyle.showExchangeMain series legend exchange visibility.
mainSeriesProperties.statusViewStyle.showIntervalMain series legend interval visibility.
mainSeriesProperties.statusViewStyle.symbolTextSourceMain series legend text style.

The code sample below removes OHLCV values and chart resolution from the legend. It also specifies the "long-description" text style in the legend.

Legend
var widget = (window.tvWidget = new TradingView.widget({
// ...
overrides: {
"paneProperties.legendProperties.showVolume": false,
"paneProperties.legendProperties.showSeriesOHLC": false,

"mainSeriesProperties.statusViewStyle.showInterval": false,
"mainSeriesProperties.statusViewStyle.symbolTextSource": "long-description",
},
}));

Overrides legend

Margin

Use the following properties to specify a margin applied when users scale the chart:

PropertyDescription
paneProperties.topMarginPane auto scaling top margin percentage.
paneProperties.bottomMarginPane auto scaling bottom margin percentage.

crossHairProperties

You can specify a crosshair using the following properties:

PropertyDescription
crossHairProperties.colorCrosshair color.
crossHairProperties.styleCrosshair style.
crossHairProperties.transparencyCrosshair transparency.
crossHairProperties.widthCrosshair width.

You can display values focused in the crosshair in labels on the scales. To do this, specify the following properties:

PropertyDescription
scalesProperties.showPriceScaleCrosshairLabelPrice scale crosshair label visibility.
scalesProperties.showTimeScaleCrosshairLabelTime scale crosshair label visibility.
scalesProperties.crosshairLabelBgColorLightCrosshair label light theme background color.
scalesProperties.crosshairLabelBgColorDarkCrosshair label dark theme background color.

scalesProperties

These properties affect appearance of the time and price scales.

Price scale position

You can use the priceScaleSelectionStrategyName property to specify a price scale position. If you want to change the price scale position on the fly, you should use the changePriceScale method.

widget.activeChart().getSeries().changePriceScale('new-left');

Scale colors and fonts

You can specify scale colors and fonts using the following properties:

PropertyDescription
scalesProperties.lineColorScales (axis) border line color.
scalesProperties.textColorScales (axis) text color.
scalesProperties.fontSizeScales (axis) font size.
scalesProperties.axisHighlightColorSets the highlight color of the scales when adding a drawing.

Labels on the scale

Advanced Charts and Trading Platform include labels that allow you to display additional information on the price scale like a symbol name, bid/ask prices, indicators, and more. You can use the properties below to enable these labels:

PropertyDescription
scalesProperties.showSeriesLastValueSeries last value label visibility.
scalesProperties.showStudyLastValueStudy label value label visibility.
scalesProperties.showSymbolLabelsSymbol name label visibility.
scalesProperties.showStudyPlotLabelsStudy plot labels visibility.
scalesProperties.showBidAskLabelsBid/ask labels visibility.
scalesProperties.showPrePostMarketPriceLabelPre/post market price labels visibility.
mainSeriesProperties.highLowAvgPrice.highLowPriceLabelsVisibleHigh/low price labels visibility.
mainSeriesProperties.highLowAvgPrice.averageClosePriceLabelVisibleAverage close price lines label visibility.
tip

Properties that affect crosshair labels are described in the crossHairProperties section.

You can specify label colors and display mode using the properties below:

PropertyDescription
mainSeriesProperties.priceAxisProperties.alignLabelsMain series price axis label alignment behavior.
scalesProperties.axisLineToolLabelBackgroundColorActiveDynamically changes the background color of all labels on the price scale when a drawing is in motion.
scalesProperties.axisLineToolLabelBackgroundColorCommonConfigures the background color of a label shown on an axis scale when a drawing is selected.
scalesProperties.seriesLastValueModeSeries last value label display mode.

Price scale mode

You can specify a price scale mode using the following properties:

PropertyDescription
mainSeriesProperties.priceAxisProperties.percentageMain series price axis percentage mode.
mainSeriesProperties.priceAxisProperties.indexedTo100Main series price axis indexed to 100 mode.
mainSeriesProperties.priceAxisProperties.logMain series price axis log mode.
mainSeriesProperties.priceAxisProperties.isInvertedMain series price axis inverted mode.

Note that you cannot change the price scale mode using the applyOverrides method. If you want to change the mode on the fly, you should use the Price Scale API. Consider the code sample below that enables Logarithmic mode:

const priceScale = widget.activeChart().getPanes()[0].getRightPriceScales()[0];
priceScale.setMode(1);

mainSeriesProperties

These properties affect the main series and UI elements related to its values. A series is a collection of data points that represents a specific metric over time.

Series visibility

If you want to hide the main series, set the mainSeriesProperties.visible property to false. You can also use the setVisible method to change the visibility of the series on the fly.

widget.activeChart().getSeries().setVisible(true);

To check if the series is currently visible or not, use the isVisible method:

widget.activeChart().getSeries().isVisible();

Chart styles

Advanced Charts and Trading Platform support multiple chart styles including Bars, Candles, Line, Area, and more. You can specify the style using the mainSeriesProperties.style property.

For each style, there is a group of properties that you can specify to adjust the main series. Properties of one group have the same name pattern. You can use these patterns to find properties for a certain style on the ChartPropertiesOverrides page. The table below contains styles and the corresponding patterns.

StyleName patterns
LinemainSeriesProperties.lineStyle
BaselinemainSeriesProperties.baselineStyle
BarsmainSeriesProperties.barStyle
CandlesmainSeriesProperties.candleStyle
AreamainSeriesProperties.areaStyle
HLC AreamainSeriesProperties.hlcAreaStyle
Line With MarkersmainSeriesProperties.lineWithMarkersStyle
Hollow CandlesmainSeriesProperties.hollowCandleStyle
Heikin AshimainSeriesProperties.haStyle
ColumnsmainSeriesProperties.columnStyle
High-lowmainSeriesProperties.hiloStyle
RenkomainSeriesProperties.renkoStyle
Line BreakmainSeriesProperties.pbStyle
KagimainSeriesProperties.kagiStyle
Point-and-FiguremainSeriesProperties.pnfStyle

You can also change the chart style properties on the fly. To do this, use the setChartStyleProperties method. For example, the code sample changes the properties of the Candles style.

widget.chart().getSeries().setChartStyleProperties(1, {
upColor: '#10F9E0',
downColor: '#1029F9',
borderUpColor: '#10F9E0',
borderDownColor: '#1029F9'
});

Change Candle style on the fly

Properties that can be changed using setChartStyleProperties are listed in interfaces like BarStylePreferences, RenkoStylePreferences, and AreaStylePreferences. Refer to the SeriesPreferencesMap page to see the list of such interfaces.

Session

Advanced Charts and Trading Platform support pre-market and post-market sessions. To enable them, you should set the mainSeriesProperties.sessionId to "extended". For more information about the sessions, refer to Trading Sessions and Extended Sessions.

Countdown

On the price scale, you can display a countdown to the bar close. To do this, set the mainSeriesProperties.showCountdown property to true. Note that you should also implement the getServerTime method to display the countdown.

Price line

You can specify a price line using the following properties:

PropertyDescription
mainSeriesProperties.showPriceLineMain series price line visibility.
mainSeriesProperties.priceLineWidthMain series price line width.
mainSeriesProperties.priceLineColorMain series price line color.

Additional lines

Advanced Charts and Trading Platform include additional lines that can be displayed on the chart. You can enable them using the toggle properties in the table below. For each line, there is a group of properties that you can specify to adjust this line. Properties of one group have the same name pattern. You can use these patterns to find properties for a certain line on the ChartPropertiesOverrides page.

LineToggleName patterns
Bid/askmainSeriesProperties.bidAsk.visiblemainSeriesProperties.bidAsk
High/low pricehighLowAvgPrice.highLowPriceLinesVisiblemainSeriesProperties.highLowAvgPrice
Previous close pricemainSeriesProperties.showPrevClosePriceLinemainSeriesProperties.prevClosePrice

minTick

The minTick property allows you to change the pricescale, minmov, and fractional properties for the current symbol at once. For more information about these properties, refer to Price Format. All minTick possible values are represented below as objects for better readability:

{ priceScale: 1, minMove: 1, frac: false },
{ priceScale: 10, minMove: 1, frac: false },
{ priceScale: 100, minMove: 1, frac: false },
{ priceScale: 1000, minMove: 1, frac: false },
{ priceScale: 10000, minMove: 1, frac: false },
{ priceScale: 100000, minMove: 1, frac: false },
{ priceScale: 1000000, minMove: 1, frac: false },
{ priceScale: 10000000, minMove: 1, frac: false },
{ priceScale: 100000000, minMove: 1, frac: false },
{ priceScale: 2, minMove: 1, frac: true },
{ priceScale: 4, minMove: 1, frac: true },
{ priceScale: 8, minMove: 1, frac: true },
{ priceScale: 16, minMove: 1, frac: true },
{ priceScale: 32, minMove: 1, frac: true },
{ priceScale: 64, minMove: 1, frac: true },
{ priceScale: 128, minMove: 1, frac: true },
{ priceScale: 320, minMove: 1, frac: true },

If you want to reset the pricescale, minmov, and fractional properties to their values initialized in LibrarySymbolInfo, set minTick to "default".

Specify the mainSeriesProperties.minTick property as demonstrated below:

// Set minTick to "default"
tvWidget.applyOverrides({ "mainSeriesProperties.minTick": "default" });

// Set series' minTick to { priceScale: 10000, minMove: 1, frac: false }
tvWidget.applyOverrides({ "mainSeriesProperties.minTick": "10000,1,false" });

// Set minTick for overlay studies to { priceScale: 10000, minMove: 1, frac: false }
tvWidget.applyStudiesOverrides({ "overlay.minTick": "10000,1,false" });

Time zone

If you want to change a time zone that is set in Widget Constructor, you should use the timezone property.

tvWidget.applyOverrides({ "timezone": "Europe/Belgrade"});