# Customizing Chart with Advanced Editor Panel

The **Advanced Editor** provides additional customization and control over chart settings. 

#### **How to Access the Advanced Editor**

1. Click on the **Advanced Editor** button on the chart.
2. Navigate through the four sections to customize settings.
3. Make changes as needed and click **Apply** to save modifications.
4. For JavaScript customizations, ensure code is correctly formatted before applying changes.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2F94cuo2s11qCk7VGq4cjG%2Fimage.png?alt=media&#x26;token=10d859b5-6ea6-4a2f-b79c-f55c1daf7063" alt=""><figcaption></figcaption></figure>

It is divided into four main sections:

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2F4iEjTJuccdTpnPWx2Fxb%2Fimage.png?alt=media&#x26;token=a2c2f68e-0040-43ea-b697-bcfc27a33c70" alt=""><figcaption></figcaption></figure>

#### 1. **Styles**

* Allows users to customize chart styles.
* Various customization options are available depending on the chart type.
* Users can modify elements such as **background, titles, legends, grid, axes, and series styles**.
* This menu dynamically adapts based on the selected chart type.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2Fivm7ch9oJPvOfESZRynb%2Fimage.png?alt=media&#x26;token=a9413c8b-a8de-4b56-83af-652c14c48baf" alt=""><figcaption></figcaption></figure>

#### 2. **Sharing**

* Enables setting permissions for different users.
* Users can define **who can view and who can edit** the chart.
* Permission settings can be applied at an **individual, role-based, or organizational level**.
* A modal appears where users can select **read-only or edit access** for different users.<br>

  <figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FxjHLzEpYNDJ8HP0bYWCH%2Fimage.png?alt=media&#x26;token=95f146fc-2ce8-4d7e-a4b6-a90b67e2a23c" alt=""><figcaption></figcaption></figure>

  <figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FLH6dNsUzjphf5JkfL1Pg%2Fimage.png?alt=media&#x26;token=332e294e-4440-4b72-ad1d-ab0e0acd24e5" alt=""><figcaption></figcaption></figure>

#### 3. **Prompts**

* This section allows users to define **custom AI prompts** specific to the chart.
* It consists of **three subsections**:
  1. **Chatbot Prompt**: Users can add background details and necessary information that AI can use to answer user questions more effectively.
  2. **Summary Prompt**: Provides AI with background information to generate narrative or summary-type responses.
  3. **Delta-Feed**: Defines **what changes AI should track in the chart**. Users can add conditions, and AI will monitor them for **material changes**, triggering notifications or updates in the feed.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FO7y56WleNBW7xhsEtpGI%2Fimage.png?alt=media&#x26;token=c710e668-c7c9-4fcd-803c-df95ecd614db" alt=""><figcaption></figcaption></figure>

#### 4. **JS (JavaScript) Mode**

* Designed for **developers and technical users** who need advanced control over chart rendering.
* Allows users to **edit and modify JavaScript code** related to the chart.
* Users can customize chart behavior, tooltips, legends, and interactions.
* Changes can be saved and applied via the **"Apply" button**.
* **Note**: The system **does not have the capability to dynamically fix JavaScript errors**. Users should refer to the [**separate section on JavaScript tips** f](#id-4.-js-javascript-mode)or guidance on debugging and best practices.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FinuyenBrLSPRwpkjeumw%2Fimage.png?alt=media&#x26;token=76e45b33-7656-4d47-8eff-5ceff6e5425a" alt=""><figcaption></figcaption></figure>

The **Advanced Editor** is a powerful tool for users who require deeper customization, permissions control, AI-driven insights, and developer-level modifications to charts.