# Drawing overrides

The [Overrides API](https://charting-library-docs.xstaging.tv/latest/customization/overrides.md) includes properties that can be used to customize [drawing] parameters such as colors, width, size, and more.
This article describes ways to customize drawings and contains a [list of overrides](#list-of-overrides) for each drawing.

## Customize drawings

This section describes ways to customize drawings.

### Specify default properties

You should use the [`overrides`] property of the [Widget Constructor] to specify the drawing's default properties.
For example, the following code sample specifies that all _Horizontal Lines_ should be green and dashed.

```js
var widget = window.tvWidget = new TradingView.widget({
    // ...
    overrides: {
        "linetoolhorzline.linecolor": "rgba(48, 164, 22, 0.8)",
        "linetoolhorzline.linestyle": 2,
    }
});
```

### Change default properties on the fly

To change the drawing's default properties after the chart is initialized, use the [`applyOverrides`] method.
All drawings created after the `applyOverrides` call have new properties. For example, the following code sample specifies that all newly created _Horizontal Lines_ should be purple.

```js
widget.applyOverrides({ "linetoolhorzline.linecolor": "#7f11e0" });
```

### Change the existing drawing

If you want to change a drawing that is already on the chart, use the [`setProperties`] method in [`ILineDataSourceApi`](../../api/interfaces/Charting_Library.ILineDataSourceApi.md). For example, the code sample below specifies new properties for the existing _Icon_.

```javascript
const iconId = widget.activeChart().getAllShapes().find(x => x.name === "icon").id;
const icon = widget.activeChart().getShapeById(iconId);
icon.setProperties({ size: 60, color: "#7f11e0" });
```

### Customize a single drawing

If you need to change a style of only one drawing, create the drawing using the [Drawings API] and pass overrides properties as a parameter. These properties are applied above the [default ones](#specify-default-properties) that are specified in `overrides`.

For example, the code sample below specifies that the default _Horizontal Line_ color is green and creates one red  _Horizontal Line_.

```javascript
var widget = window.tvWidget = new TradingView.widget({
    // ...
    overrides: {
        "linetoolhorzline.linecolor": "rgba(48, 164, 22, 0.8)",
    }
});

widget.onChartReady(() => {
    widget.chart().createShape(
        { price: 180 },
        {
            shape: "horizontal_line",
            overrides: { linecolor: "#FF0000" },
        }
    )
});
```

### Customize icons, stickers, and emojis

Note that you cannot customize icons, stickers, or emojis using [`overrides`] in the Widget Constructor or the [`applyOverrides`] method.
To customize such drawings, create a new drawing using the [Drawings API] and specify the drawing properties in the `overrides` parameter. Consider the examples below.

#### Icons

```javascript
widget.chart().createShape(
    { time: 1514796562, price: 180 },
    {
        shape: "icon",
        overrides: {
            color: "#5eeb34",
            size: 50,
        },
        icon: 0xf004, // Heart
    }
);
```

Refer to [Drawings list](https://charting-library-docs.xstaging.tv/latest/ui_elements/drawings/Drawings-List.md#icons) for a list of icons.

#### Stickers

```javascript
widget.chart().createShape(
    { time: 1514796562, price: 160 },
    {
        shape: "sticker",
        overrides: {
            sticker: "dislike",
            size: 90,
        },
    }
);
```

Refer to [Drawings list](https://charting-library-docs.xstaging.tv/latest/ui_elements/drawings/Drawings-List.md#stickers) for a list of stickers.

#### Emojis

```javascript
widget.activeChart().createMultipointShape(
    [{ time: 1712158200, price: 170 }],
    {
        shape: "emoji",
        overrides: {
            size: 30,
        },
        emoji: "u/1F602" // Grinning face
    }
);
```

Note that the emoji code requires `u/` before it.

Refer to [Drawings list](https://charting-library-docs.xstaging.tv/latest/ui_elements/drawings/Drawings-List.md#emojis) for a list of emojis.

## List of overrides

Refer to [DrawingOverrides](https://charting-library-docs.xstaging.tv/latest/api/modules/Charting_Library#drawingoverrides) for a list of overrides.

[drawing]: https://charting-library-docs.xstaging.tv/latest/ui_elements/drawings.md
[`overrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#overrides
[Widget Constructor]: https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md
[`applyOverrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#applyoverrides
[`setProperties`]: api/interfaces/Charting_Library.ILineDataSourceApi.md#setproperties
[Drawings API]: https://charting-library-docs.xstaging.tv/latest/ui_elements/drawings/drawings-api.md#create-drawings

---

## 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)