ECharts components

This article describes components in Components Library > ECharts.

ECharts

The ECharts component renders interactive data visualisation charts. It supports preset chart types (bar, line, pie, scatter) with configuration through the Settings panel, and a custom JavaScript mode for full control over the ECharts option object. In the App Designer, select an ECharts on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the chart data, appearance, and event properties of the ECharts component, organised into groups.

If a property displays the Variable Binding icon , that means it supports variable binding.

Chart data

Property	UI Control	Default	Description
Custom Option	Toggle switch	Off	When enabled, all preset configuration fields are hidden and a Custom JS Function Binding appears, allowing full programmatic control of the ECharts option object. When disabled, the preset Chart type, Extra props, and Chart data fields are used instead.
Custom JS	Function Binding	function e(t){var n={xAxis:{type:"category",data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},yAxis:{type:"value"},series:[{data:[150,230,224,218,135,147,260],type:"line"}]};t.setOption(n)}	Sets a JavaScript function that receives the ECharts instance (myChart) and the ECharts library (echarts), and calls myChart.setOption(option) to configure the chart. Only available when Custom Option is enabled.
Chart type	Dropdown (Bar | Line | Pie | Scatter)	Bar	Selects the preset chart type. Only available when Custom Option is disabled.
Extra props	JSON setter	-	Sets additional ECharts option properties to merge with the preset configuration. Only available when Custom Option is disabled.
Chart data	Data editor	[23, 24, 18, 25, 27, 28, 25]	Sets the data series values for the selected preset chart type. Only available when Custom Option is disabled.

Chart properties

The Chart properties group is only available when Custom Option is disabled. It provides individual JSON setters for standard ECharts option properties:

Property	UI Control	Default	Description
Animation	Toggle switch	Off	Enables or disables the chart's built-in animation.
Item Style	JSON setter	-	Configures the graphical style of the chart items (for example, color, border). Accepts an ECharts itemStyle object.
Title	JSON setter	-	Configures the chart title. Accepts an ECharts title object.
Tooltip	JSON setter	-	Configures the chart tooltip. Accepts an ECharts tooltip object.
Label	JSON setter	-	Configures the data labels on the chart. Accepts an ECharts label object.
Legend	JSON setter	-	Configures the chart legend. Accepts an ECharts legend object.
XAxis	JSON setter	{"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}	Configures the x-axis. Accepts an ECharts xAxis object.
YAxis	JSON setter	-	Configures the y-axis. Accepts an ECharts yAxis object.

Chart events

The Chart events section contains an Events array editor that allows you to configure interaction event handlers directly within the Props tab. Click "Add an item +" to add a new event. Each event item has:

Property	UI Control	Default	Description
EventName	Dropdown (Click | Dblclick | Mousemove)	Click	Selects the ECharts interaction event to listen for.
Query	JSON setter	-	Sets an optional ECharts event query filter to limit the event to specific series or data items.
Handler	Function Binding	-	Binds a function to handle the event. The function receives the ECharts params object containing event data such as seriesName, name, and value.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Custom JS usage

When Custom Option is enabled, the Custom JS function provides direct access to the ECharts instance. Use myChart.setOption(option) to define the full chart configuration:

customJs(myChart, echarts) {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };
  myChart.setOption(option);
}

Best practices

1. Use Preset Types for Simple Charts

   • Use the Chart type and Chart data fields for straightforward bar, line, pie, or scatter charts where the preset configuration covers your needs
   • Use Extra props to extend the preset with additional ECharts options such as axis labels or legend placement

2. Use Custom Option for Complex Charts

   • Enable Custom Option when you need chart types not available in the presets (for example, radar, heatmap, candlestick) or require full control over multiple series and nested configuration

3. Set Width and Height via Styles

   • Always set an explicit height and width (for example, 600px and 100%) in the Styles tab. ECharts requires a container with defined dimensions to render correctly

4. Use Chart Events for Drill-Down Interactions

   • Add a click event handler in the Chart events section to implement drill-down navigation or data filtering when the user clicks a chart element

Last updated on 20 May 2026