# How to create a custom indicator

In this tutorial we will create a [custom indicator](https://charting-library-docs.xstaging.tv/latest/custom_studies.md) that displays a [Simple Moving Average (SMA)] and a Smoothing Line.
The line represents either SMA, [Exponential Moving Average (EMA)], or [Weighted Moving Average (WMA)] calculated based on the existing SMA.

See the Pen 
  Chart customization order by TradingView (@tradingview)
  on CodePen.

After completing the tutorial, you will learn how to add a custom indicator to the library, specify the indicator look and feel, and implement data calculations.

## Before you start

Consider taking the following steps before proceeding with the tutorial:

1. Set up the [Widget Constructor](https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md) and run the library. Refer to the [Quick start](https://charting-library-docs.xstaging.tv/latest/quick-start.md) for more information.
2. Connect data to the library. Refer to the [Connecting data](https://charting-library-docs.xstaging.tv/latest/tutorials/tutorials/implement_datafeed_tutorial.md) tutorial for more information.

## Tutorial structure

The tutorial is divided into three parts:

1. [Add a custom indicator to the library](#add-a-custom-indicator-to-the-library)
2. [Implement metainfo](https://charting-library-docs.xstaging.tv/latest/tutorials/how-to-guides/create-custom-indicator/metainfo-implementation.md)
3. [Implement constructor](https://charting-library-docs.xstaging.tv/latest/tutorials/how-to-guides/create-custom-indicator/constructor-implementation.md)

:::tip Tips

- At the end of each part, you will find the complete code blocks related to a specific step.
- Refer to the CodePen example above to see the complete tutorial code right away.

:::

## Add a custom indicator to the library

To add a custom indicator to the library, specify a function that returns a Promise object and assign this function to the [`custom_indicators_getter`](../../../api/interfaces/Charting_Library.ChartingLibraryWidgetOptions.md#custom_indicators_getter) property in the [Widget Constructor](https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md).
The Promise object should be resolved with an array of [`CustomIndicator`](../../../api/interfaces/Charting_Library.CustomIndicator.md) instances.
In this tutorial, only one custom indicator will be created, therefore, the array contains one element.

`CustomIndicator` is an interface that you should implement to provide information on the indicator. The interface contains the following required fields:

- `name`: an indicator's internal name that is not visible in the UI. This name should be unique.
- `metainfo`: the field that describes how the indicator looks like.
- `constructor`: the field that contains data calculations.

At this stage of the tutorial, you should adjust the `name` filed only.

```javascript
var widget = window.tvWidget = new TradingView.widget({
    // ...
    custom_indicators_getter: function(PineJS) {
        return Promise.resolve([
            // Indicator object
            {
                name: 'Custom Moving Average',
                metainfo: {
                    // ...
                },
                constructor: function() {
                    // ...
                }
            }
        ]);
    },
});
```

In the next steps, you will specify the `metainfo` and `constructor` fields.

[Simple Moving Average (SMA)]: https://www.tradingview.com/support/solutions/43000696841-simple-moving-average/
[Exponential Moving Average (EMA)]: https://www.tradingview.com/support/solutions/43000592270-exponential-moving-average/
[Weighted Moving Average (WMA)]: https://www.tradingview.com/support/solutions/43000594680-weighted-moving-average/

---

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