Display a simple donut chart with smooth hover effect. The input data is based on listview-style input. The item type is configurable.
The size of the donut chart is relative to it's parent container. Place the donut chart inside a layoutgrid, for example, to set it's width. Relative widths work better in combination with responsive screens.
Set listview context within the app and configure chart value (
Integer) and value names (
Both the chart legend and the donut chart segments can be hovered to see some additional information inside a tooltip.
Sorting options: The results can be sorted by name, value or even via custom attribute (
Configure the colors that will be used for each item in the list. The widget uses an array of 6 default colors.
Display unit type (
Unit type position:
after the value.
Display the total (
Display values inside the legend and tooltip (
Display percentages inside the donut chart (
Expression): Title for the legend, can be used as prefix for the totals.
Set an onClick action.
- Install NPM package dependencies by using:
npm install. If you use NPM v7.x.x, which can be checked by executing
npm -v, execute:
npm install --legacy-peer-deps.
npm startto watch for code changes. On every change:
- the widget will be bundled;
- the bundle will be included in a
distfolder in the root directory of the project;
- the bundle will be included in the
widgetsfolder of the Mendix test project.