Skip to content

EChart

The EChart component is a powerful and versatile tool in CxReports that enables rendering various types of charts using the ECharts library. This component provides advanced charting capabilities with extensive customization options, making it suitable for complex and non-standard visualization requirements.

Differences from Regular Charts

EChart differs from regular charts in CxReports in several key ways:

  • Advanced Customization: ECharts offers more options and greater control for non-standard charting requirements, providing unparalleled flexibility in chart design.
  • Programming Knowledge Required: Unlike regular charts, configuring ECharts typically requires programming knowledge, as it involves writing code within a callback function to define the chart's options.
  • Theming: While regular charts are better integrated with built-in theming and offer a dedicated UI for configuration, ECharts can be themed through the Themes > ECharts section, allowing for consistent branding across your advanced visualizations.

Configuration

To configure your EChart:

  • Data and Parameters:

  • Set up Data Sources to pass data to the chart.

  • Configure Parameters for additional chart parameters.

  • Use the Edit Chart Configuration window to write the option callback function, where you define the chart's behavior and appearance using ECharts options.

  • Available Variables in Callback: Within the callback function, you can use the following variables to build your chart dynamically:

  • $data: Access data from configured data sources

  • $params: Access parameters passed to the chart
  • $dict: Access dictionary values for translations or dynamic text
  • $theme: Access theme settings for consistent styling.
  • $it: Access iteration context, useful in repeating scenarios.

  • $files: Access uploaded files, such as SVG or JSON.

  • File Support: You can enhance your charts by adding files:

  • SVG Files: Passed as strings suitable for registering maps or custom shapes.
  • JSON Files: Can be used as data, geoJSON, or any other JSON-based configuration.

Best Practices

When working with ECharts, it's important to consider the specific requirements of your visualization:

  • For simple, theme-integrated visualizations, regular charts are often the better choice as they provide a more straightforward configuration process.
  • However, when you need advanced customization or non-standard chart types, ECharts becomes the preferred option due to its extensive capabilities.
  • To maintain consistency across your visualizations, make use of the theme settings available in Themes > ECharts.
  • The callback function is particularly powerful for creating dynamic charts that respond to your data and parameters, allowing for sophisticated and interactive visualizations.