# 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.**