ConventECharts

Content Type: Widget
Categories: User Interface,Visualization

Overview

ConventECharts — Mendix Widget Package

 

ConventECharts is a collection of high-quality, data-driven chart widgets for Mendix, built on top of Apache ECharts (https://echarts.apache.org/) v5.

ECharts is a mature, production-ready charting library used worldwide, offering smooth animations, rich interactivity (tooltips, zoom, click events), and exceptional rendering performance via an HTML5 canvas.

 

The package ships five widgets:

 

  • ECharts Line chart                  Trends over time, comparisons between series
  • ECharts Bar chart                   Category comparisons, vertical or horizontal
  • ECharts Pie / Donut chart       Part-to-whole relationships
  • ECharts Gauge chart              Speedometer / multi-needle gauge; up to 3 independent series on one dial
  • ECharts Theme Loader          Registers color theme so all chart widgets on the page use your brand colors

 

All chart widgets share a consistent design: connect a Mendix data source, map attributes, and optionally fine-tune with a JSON override — no custom JavaScript required.

Documentation

ConventECharts is a collection of high-quality, data-driven chart widgets for Mendix, built on top of Apache ECharts (https://echarts.apache.org/) v5.

ECharts is a mature, production-ready charting library used worldwide, offering smooth animations, rich interactivity (tooltips, zoom, click events), and exceptional rendering performance via an HTML5 canvas.

 

The package ships five widgets:

 

  • ECharts Line chart:  Trends over time, comparisons between series 
  • ECharts Bar chart: Category comparisons, vertical or horizontal
  • ECharts Pie / Donut chart: Part-to-whole relationships
  • ECharts Gauge chart: Speedometer / multi-needle gauge; up to 3 independent series on one dial
  • ECharts Theme Loader: Registers an ECharts color theme so all chart widgets on the page use your application's brand colors

 

All widgets share a consistent design: connect a Mendix data source, map attributes, and optionally fine-tune with a JSON override — no custom JavaScript required.

 

Theme support lets every chart pick up the colors, fonts, and axis styles of your Mendix Atlas UI theme automatically. See https://github.com/LuchKlooster/MendixConventECharts/docs/theming.md for a complete guide.

 

Full documentation is available at https://github.com/LuchKlooster/MendixConventECharts.

A demo Mendix project is available at https://github.com/LuchKlooster/MendixConventEChartsDemo.

Demo project is live to be seen at https://echartsdemo100-sandbox.mxapps.io/index.html.

 

 

Releases

Version: 1.2.1
Framework Version: 9.24.30
Release Notes:

New!

  • Theme Loader. Registers an ECharts color theme so all chart widgets on the page use your application's brand colors. 
  • Theme support lets every chart pick up the colors, fonts, and axis styles of your Mendix Atlas UI theme automatically. 
  • All four widgets have a Show toolbox toggle. When enabled, ECharts renders its built-in toolbox in the top-right corner of the chart with three tools: Data viewRestore and Save as image
  • Mixed charts option: Line and Bar, Pie and Donut, etc
Version: 1.2.0
Framework Version: 9.24.30
Release Notes:

New features

Toolbox — All four chart widgets now have a Show toolbox boolean property. When enabled, ECharts renders its built-in toolbox in the top-right corner with three tools: Data view (raw data table), Restore (reset zoom/pan), and Save as image (download as PNG). For a custom toolbox configuration use the existing Custom chart option field.

 

Custom series options — Pie chart — The Custom series options JSON field on each pie/donut ring series is now fully wired through to the ECharts series configuration. Previously the property was visible in Studio Pro but had no effect at runtime. Use it to apply Nightingale rose type, border radius, item styles, and any other ECharts pie series option:

{

"roseType": "area",

"itemStyle": { "borderRadius": 8 }

}

 

Bug fixes

Width not filling available space — Charts configured at 100% width could render narrower than their container in certain Mendix layout contexts. The inner chart container now uses position: absolute; inset: 0 instead of width/height: 100%, which correctly fills the outer container regardless of how its height is computed. Added min-width: 0 to prevent overflow in flex layouts.

Version: 1.1.1
Framework Version: 9.24.30
Release Notes:

## Release notes — v1.1.1 ### New features **Bar chart — Color dimension attribute** Each bar series now has an optional *Color dimension attribute* (numeric). When set, the widget builds an ECharts dataset with a named `colorDim` dimension alongside the category and value. Combined with a `visualMap` in *Custom chart option*, each bar can be individually colored by a separate score — independent of bar length. The visualMap can be placed vertically on the right (`"orient": "vertical", "right": 10`) or horizontally at the bottom (`"orient": "horizontal", "left": "center", "bottom": 0`). Reference the dimension with `"dimension": "colorDim"` in your visualMap config. **Custom chart option — datasource validation relaxed** When *Custom chart option* contains a value, the datasource-required validation on series is skipped. This makes it possible to render a fully custom ECharts chart (e.g. polar, heatmap, scatter with embedded data) without configuring a Mendix datasource on any series entry. **Polar line chart support** The Line chart widget now supports polar coordinate rendering. Set `{"coordinateSystem":"polar","showSymbol":false}` in *Custom series options* and supply the polar axes and axis-hide config via *Custom chart option*. Tested with a Mendix datasource of 361 records (one per degree) to reproduce the *Two Value-Axes in Polar* ECharts example. ### Fixes **ECharts component registration per bundle** `TitleComponent` and `PolarComponent` are now registered in all four widget bundles (Line, Bar, Pie, Gauge). Previously, using `title` or `polar` in a *Custom chart option* on the Pie, Bar, or Gauge chart produced a runtime error: *"Component Title/Polar is used but not imported"*. **Decimal precision on X axis** Decimal attribute values used as X axis / radius values were rounded to 2 decimal places (`toFixed(2)`), causing a staircase / jagged curve effect on smooth polar charts. Values are now passed at full floating-point precision (`toNumber()`). **Gauge chart — deprecated `color: "auto"`** Replaced the deprecated `color: "auto"` value on gauge pointer and detail with `color: "inherit"` to eliminate console warnings on ECharts v5.

Version: 1.1.0
Framework Version: 9.24.30
Release Notes:

Gauge chart — new features: Multi-needle list mode (persistent entity + XPath data source) Use list data source toggle to switch modes cleanly Auto-positioned title/detail labels (evenly spaced across the dial) formatter function strings in Custom options (e.g. hide the 0 label on clock face) Per-series and per-data-point title/detail offset support Gauge chart — fixes: Removed the old "A data source is required" validation error on the clock setOption now only fires when data actually changes — prevents ghost needle trails on rapid value updates Context mode and list mode properties are hidden from Studio Pro when not in use

Version: 1.0.0
Framework Version: 9.24.30
Release Notes:

**ConventECharts** is a collection of high-quality, data-driven chart widgets for Mendix, built on top of [Apache ECharts](https://echarts.apache.org/) v5.

ECharts is a mature, production-ready charting library used worldwide, offering smooth animations, rich interactivity (tooltips, zoom, click events), and exceptional rendering performance via an HTML5 canvas.

The package ships four widgets:

 

| Widget | Use case |

| --- | --- |

| ECharts Line chart | Trends over time, comparisons between series |

| ECharts Bar chart | Category comparisons, vertical or horizontal |

| ECharts Pie / Donut chart | Part-to-whole relationships |

| ECharts Gauge chart | Single KPI against a scale (speedometer) |

 

All widgets share a consistent design: connect a Mendix data source, map attributes, and optionally fine-tune with a JSON override — no custom JavaScript required.