EChart¶
Creates advanced charts using the ECharts library with JavaScript callback functions for complex and non-standard visualizations.
Chart components · element type echart · binds through a data source, via the chart definition
Related: Generic Chart · Pie Chart
Options¶
Configure the EChart component with these options:
| Option | Description |
|---|---|
| Data Sources | Configure data sources to pass data to the chart via $data |
| Parameters | Set parameters accessible in the callback via $params |
| Iterators | Data sources the chart iterates over, producing one chart per record |
| Edit Chart Configuration | Write the option callback function that defines the chart configuration |
| Add File | Upload SVG files (for maps) or JSON files (for data/geoJSON) accessible via $files |
The Edit Chart Configuration window allows you to write JavaScript code using ECharts options. Available variables in the callback:
| Variable | Description |
|---|---|
$data |
Data from configured data sources |
$params |
Parameters passed to the chart |
$dict |
Dictionary values for translations or dynamic text |
$theme |
Theme settings for consistent styling |
$it |
Iteration context for repeating scenarios |
$files |
Uploaded files (SVG strings for maps, JSON data) |
Theming is configured in Themes > ECharts section to set default appearance for all charts, which can be further customized for each individual chart. For detailed configuration options, see the ECharts documentation.
Notes¶
- Use regular charts for simple visualizations - they offer better UI configuration and theme integration
- ECharts requires JavaScript/programming knowledge to configure the callback function
- Upload SVG files for map visualizations and JSON files for complex data structures