# Tutorials

## Guides

- [Customization](https://tradingview.github.io/lightweight-charts/tutorials/customization/intro.md) - Customizing appearance & features
- [Accessibility](https://tradingview.github.io/lightweight-charts/tutorials/a11y/intro.md) - How to improve A11y support

## Framework integrations

This section contains some tutorials how to use Lightweight Charts™ with some popular frameworks.

- [React](https://tradingview.github.io/lightweight-charts/tutorials/react/simple.md) - Integration guide for React
- [Vue.js](https://tradingview.github.io/lightweight-charts/tutorials/vuejs/wrapper.md) - Integration guide for Vue.js
- [Web Components](https://tradingview.github.io/lightweight-charts/tutorials/webcomponents/custom-element.md) - Web components custom element

:::info

If you think that a tutorial is missing feel free to ask [in the discussions](https://github.com/tradingview/lightweight-charts/discussions)
or submit your own.

:::

## How To

A collection of code examples showcasing the various capabilities of the library, and how to implement common additional features.

## Examples / Demos

A collection of demos showcasing the various capabilities of the library.

## Analysis indicators

The [analysis indicator](https://tradingview.github.io/lightweight-charts/tutorials/analysis-indicators.md) examples below serve as a starting point for creating your own indicators.
You can use them directly in your projects.
Follow the links to see the indicators' source code on GitHub.

To run them locally, follow the [setup instructions](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/) in the repository.
You can also explore each indicator in action on a [live demo page](https://tradingview.github.io/lightweight-charts/indicator-examples).

- [Average Price](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/average-price) - Calculates the average of prices (e.g., open, high, low, close)
- [Correlation](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/correlation) - Measures the statistical relationship between two data series
- [Median Price](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/median-price) - Returns the median (middle) value between high and low prices
- [Momentum](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/momentum) - Measures the rate of change in price over time
- [Simple Moving Average](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/moving-average) - Smooths data by averaging values over a fixed period
- [Percent Change](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/percent-change) - Shows the relative change between two values as a percentage
- [Product](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/product) - Multiplies a series of values
- [Ratio](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/ratio) - Divides one value by another
- [Spread](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/spread) - Calculates the difference between two values
- [Sum](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/sum) - Adds up a series of values
- [Weighted Close](https://github.com/tradingview/lightweight-charts/tree/master/indicator-examples/src/indicators/weighted-close) - Calculates a weighted average of high, low, and close prices

---

## Sitemap

- [All documentation pages](https://tradingview.github.io/lightweight-charts/llms.txt)
- [Full page map with headings](https://tradingview.github.io/lightweight-charts/docs_map.md)