# JS (Code Mode)

### JS Tab (JavaScript)

The **JS** tab provides advanced users and developers direct access to the underlying JavaScript code used to generate and render charts. This is intended for users who have a solid understanding of JavaScript and familiarity with **Google Charts** or **Apache ECharts**.

#### ⚠️ **Warning:**

* Editing the JavaScript code is an **advanced operation**. Only proceed if you're experienced with JavaScript and clearly understand charting libraries such as Google Charts or Apache ECharts.
* Once you edit and apply changes through the **JS** tab, the visual styling options in the **Styles** tab will become inactive.

#### Important Notes:

* **Do NOT modify** the top initialization section:

  ```javascript
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);

  var option = {
    "dataset": {
      "source": [
        [
          "OrderDate",
          "Sales",
          "Discount"
        ],
        ...
      ]
    },
  ```

  Altering this could prevent your chart from rendering properly.
* **Data Source Definition:**\
  Ensure your data remains within the structure defined by:

  ```javascript
  "dataset": {
      "source": [ ... ]
  }
  ```

  This section should remain untouched for correct functionality.
* **Google Charts:**\
  If you're using Google Charts, customization should only be done within the `"options": {}` block.

#### Recommended Usage:

* Adjust or add complex chart features that cannot be configured through the visual interface.
* Implement custom event handlers, tooltips, or dynamic data behavior.

#### Caution:

* There is currently **no dynamic error checking or correction** within the editor. Verify your JavaScript code externally or carefully test it to prevent errors.
* If you're uncertain about JavaScript edits, consult documentation or experienced developers to avoid breaking the chart.

**Always make a backup or copy of your original JS before applying major changes.**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.getinfinity.app/user-guide/comprehensive-user-guide/2.-charts/chart-customization/customizing-chart-with-advanced-editor-panel/js-code-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.