> ## Documentation Index
> Fetch the complete documentation index at: https://takeprofit.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart Settings

To customize your chart appearance and behavior, open **Chart Settings** from the widget menu.\
Click the **three dots** in the top-right corner of the chart and select **Settings**.

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.2.1_Chart_Settings.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=a8589b86fa57e9e9e4282bb797d099a5"
  data-path="images/guide/platform/chart-widget/2.8.2.1_Chart_Settings.mp4"
/>

Once opened, the settings panel contains **five expandable categories**:

### 1. Style

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.2.2_Chart_Candles.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=b9bc87e0531092955a1116cc42cd242d"
  data-path="images/guide/platform/chart-widget/2.8.2.2_Chart_Candles.mp4"
/>

Choose how price data is displayed on the chart: **Candles**, **Line**, or **Bars**.

You can customize colors for key chart elements:

* **Candle body**
* **Candle border**
* **Candle wick**
* **Last visible price** — highlights the price of the most recent bar currently visible within the chart viewport
* **Last price**  — displays the real-time market price, independent of the visible range
* **Volume bars**

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/RlUXWQgU8OI9Aefh/images/guide/platform/chart-widget/2.8.3_Price_Labels.mp4?fit=max&auto=format&n=RlUXWQgU8OI9Aefh&q=85&s=8f3ad082f5a672f35961f5939e9012de"
  data-path="images/guide/platform/chart-widget/2.8.3_Price_Labels.mp4"
/>

Each color setting includes a **visibility toggle**, allowing you to show or hide specific elements of the chart.

**Color Customization**

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/qKdfvQkqWpXfVn3T/images/guide/platform/2.3.2_Color_Picker.mp4?fit=max&auto=format&n=qKdfvQkqWpXfVn3T&q=85&s=ddca51e352c222db736362933d9f3b57"
  data-path="images/guide/platform/2.3.2_Color_Picker.mp4"
/>

All color settings use an advanced **color picker** that allows you to precisely configure visual styles.

Available options include:

* Selecting colors from a **preset palette**
* Choosing any color using the **gradient picker**
* Adjusting hue using the **color spectrum slider**
* Entering a **HEX color value manually**
* Saving frequently used colors using the **Add button**

This allows you to match chart colors with your workspace theme, templates, or preferred visual style.

### 2. Canvas

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.2.4_Chart_Canvas.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=0039fa20749fde00327f9495541f573b"
  data-path="images/guide/platform/chart-widget/2.8.2.4_Chart_Canvas.mp4"
/>

Configure the visual layout of your chart background, grid, and chart spacing.

Options include:

* **Background** and **Text color** adjustments
* **Grid** styles with visibility control
* **Crosshair** customization, including line style selection (**solid**, **dashed**, or **dotted**) for more precise data reading
* **Margins** controls to adjust the chart spacing:
  * **Right margin** — adds space between the latest price bars and the price scale
  * **Top margin** — adjusts the empty space above the visible price range
  * **Bottom margin** — adjusts the empty space below the visible price range

Use margins to keep price action visually centered, create more room for drawings or labels, and avoid chart elements being too close to the widget edges.

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.3_Chart_Crosshair.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=d48fe3e77aee1c650ba184517a5e8ee5"
  data-path="images/guide/platform/chart-widget/2.8.3_Chart_Crosshair.mp4"
/>

### 3. Security Label

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.2.5_Chart_Security_Label.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=a452aed4e748a50d7e3e0c88558c4b06"
  data-path="images/guide/platform/chart-widget/2.8.2.5_Chart_Security_Label.mp4"
/>

Manage the header display above your chart.\
You can toggle:

* **Symbol information** — logo, full name, exchange, and market status
* **Status values** — bar change data, OHLC values, and volume value

### 4. Scales

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.2.6_Chart_Scales.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=f73fc3969149e0b004f5e03c69ae6acb"
  data-path="images/guide/platform/chart-widget/2.8.2.6_Chart_Scales.mp4"
/>

Control how price and time data are represented.

* **Scale type:** choose between *Regular*, *Logarithmic*, *Percent*, or *Index to 100*
* **Price labels:** show the last price label or overlapping labels
* Enable **Extended Hours** view  to see afterhours trading data
* Adjust the **Timezone** display mode

### 5. Alerts

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.2.7_Chart_Alerts.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=aee8a30a304f05da20f53c91f3609d0d"
  data-path="images/guide/platform/chart-widget/2.8.2.7_Chart_Alerts.mp4"
/>

Manage visibility for chart alerts.\
Toggle **Alert lines**, **Inactive alerts**, and **Ticker labels** to control how alert data appears on the chart.

At the bottom of the panel, you can:

* Click **Use as default** to apply your preferences globally
* Click **Reset Settings** to restore defaults

### 6. Templates

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.3_Chart_Templates.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=7c6b962db561067394deb530836f6d35"
  data-path="images/guide/platform/chart-widget/2.8.3_Chart_Templates.mp4"
/>

Chart templates allow you to save the current chart configuration and reuse it across layouts.\
Templates include visual settings, grid and crosshair styles, and general chart appearance, making it easy to maintain a consistent setup or quickly switch between preferred configurations.

## Drawing Tools

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/67XMQdOAlONNWB1u/images/guide/platform/chart-widget/2.8.2.11_Drawing_Tools.mp4?fit=max&auto=format&n=67XMQdOAlONNWB1u&q=85&s=52279197b66c0aaa552bbac6fbb62ccc"
  data-path="images/guide/platform/chart-widget/2.8.2.11_Drawing_Tools.mp4"
/>

* Located in the lower third of the chart (left side)
* Visible on chart interaction
* Contains technical analysis and drawing instruments. [Learn more about drawing tools](/guide/platform/chart-widget/Measurement-tools)

## Bottom Timeline Panel

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full rounded-2xl"
  style={{
border: "1.9px solid rgba(179, 200, 224, 0.08)",
objectFit: "fill",
display: "block"
}}
  src="https://mintcdn.com/takeprofit-a5dc0462/woVtZR6M8syJd88k/images/guide/platform/chart-widget/2.8.2.7_Widget_Chart_Bottom_Panel.mp4?fit=max&auto=format&n=woVtZR6M8syJd88k&q=85&s=545ef3303d3a9ebd6383b5d946ff94ef"
  data-path="images/guide/platform/chart-widget/2.8.2.7_Widget_Chart_Bottom_Panel.mp4"
/>

* Default timeframe display
* Interactive elements appear on hover:
  * Current time (adjustable timezone)
  * Range selector (1 day to full history)
  * Scale controls:
    * Percentage mode
    * Logarithmic scale
    * Regular (auto) scale
    * Index to 100
    * Reset to default
    * Timezone selection