Overview

The Custom Column Chart pluggable widget is designed to bring rich, interactive column charting capabilities to your Mendix applications. Built using Highcharts, this widget allows you to visualize dynamic data from Mendix entities in a clean, responsive, and fully interactive chart.

With support for JSON data input, click-driven actions, and optional parameter updates, the widget is perfect for dashboards, reporting pages, and analytical applications. It provides developers with an easy-to-use solution to display data effectively, while giving end-users an engaging and interactive experience.

Key advantages include:

• Dynamic Data Handling – Parse JSON arrays directly from Mendix attributes.
• Interactive Charts – Trigger microflows or nanoflows on column clicks.
• Responsive & Flexible – Works seamlessly across devices and screen sizes.
• Customizable Styling – Control colors, labels, padding, and grid lines.
• High Performance – Optimized for large datasets without breaking the layout.

Whether you’re building dashboards or analytical tools in Mendix, the Custom Column Chart Widget simplifies data visualization, increases interactivity, and enhances user engagement.

Documentation

Typical Usage Scenario

The Custom Column Chart Widget is ideal for Mendix applications that require interactive data visualization. Customers can use it to:

• Display dynamic data from Mendix entities in a visually appealing column chart.
• Create dashboards where clicking on a column triggers a microflow/nanoflow for drill-downs, filtering, or parameter updates.
• Visualize sales, inventory, performance metrics, survey results, or any numeric dataset dynamically.
• Handle large datasets in a responsive layout without breaking the user interface.

It is particularly useful in analytical apps, management dashboards, KPI monitoring, and reporting pages where interactivity and dynamic updates enhance user decision-making.

Features and Limitations

Features:

• Supports dynamic JSON input from Mendix string attributes.
• Fully responsive and adapts to container size and screen resolution.
• Displays interactive data labels for each column.
• Optional click actions to trigger Mendix microflows/nanoflows.
• Stores clicked bar details in helper attributes for further use.
• Handles large datasets without performance degradation.
• Robust error handling for invalid JSON input.

Limitations:

• Only numeric values are supported for column heights (y).
• JSON must strictly follow the { "name": "Category", "y": number } structure.
• Custom styling beyond Mendix properties requires CSS knowledge.

Dependencies [Optional]

• Mendix 9.x or higher
• Highcharts (bundled with the widget; no separate installation required)

Installation [Optional]

1. Download the widget package from Mendix Marketplace.
2. Import the .mpk file into your Mendix project via App Store > Import Module Package.
3. Restart the Mendix Studio Pro for the widget to appear in the toolbox.

Configuration 

1. Place the widget inside a Data View bound to a helper entity.
2. Map the following attributes:
   • chartData → String attribute containing JSON array.
   • paramBarName and paramBarValue → Attributes for storing click details (optional).
3. Configure On Bar Click action (Microflow/Nanoflow) if required.
4. Adjust styling using Mendix properties or custom CSS.

Frequently Asked Questions [Optional]

Q: Can I use this widget with non-numeric values?

A: No, only numeric values (y) are supported for chart columns.

Q: Can I customize the chart’s colors?

A: Yes, basic styling is configurable via Mendix properties. Advanced styling can be done using CSS.

Q: How does the widget handle large datasets?

A: The widget is optimized for large datasets, but extremely large arrays may have slight rendering delays depending on the browser.

Q: Do I need High charts license separately?

A: No, the widget includes Highcharts for usage within Mendix applications.