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:

  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:

  "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.