Charts

Introduction

Charts allow you to display data series visually on your app pages in a wide range of charts.

The chart widgets are part of the Charts module, which you can download from the Mendix Marketplace. The widgets are based on the Plotly JavaScript library. For the configuration of the chart widgets, see Charts in the Marketplace Guide.

Chart Types

The Charts module contains these chart widgets:

• Area chart – a line chart with a fill to the X-axis

  

• Bar chart – horizontal bars, grouped or stacked

  

• Bubble chart – add a size dimension to your chart

  

• Column chart – vertical bars, grouped or stacked

  

• Heat map – show data values by color in a 2D matrix

  

• Line chart – straight or curved lines, with or without markers

  

• Pie chart – a pie or a doughnut chart

  

• Time series – show data ordered by time

  

The widgets have settings in Studio Pro to customize the look and feel, and support on click actions and custom tooltips. For details on each chart type, see Charts.

If the standard chart settings are not sufficient for your purposes, see Chart Advanced Cheat Sheet for information on the advanced configuration of your charts. To change settings live in the running app, use the Chart Playground.

Only plotly.js features available in the version bundled with your Charts widget release can be used when configuring charts.

To create a chart with a variable number of data series, see Create a Dynamic Series Chart.

Custom Chart

With the Custom chart widget, you can build all chart types that are possible with Plotly by configuring the chart with JSON. Use it when the standard chart widgets do not support the chart you need. For more information, see Use Custom Chart.

Any Chart

With Any Chart you can build all the chart types that are possible with Plotly.js up to the version supported by the widget (see the widget description in the Marketplace for more details). If you want to build a chart which is not available in the Basic charts, Any Chart is your friend.

The plotly charts require a configuration based on JSON, therefore Any Chart has JSON as input parameters. You can create this JSON dynamically in your microflow via a JSON Structure document and use this in the Any Chart configuration. It is also possible to define static JSON configuration which is combined with the dynamic JSON.

This module also contains several building blocks for inspiration and as starting point. If you want to create a new chart, Mendix suggests checking out the plotly.js website.

For the legacy Any Chart documentation, see Any Chart Widgets and Any Chart Cheat Sheet.

For the legacy chart widgets below version 3.0.0, see Chart Configuration.

Performing Basic Functions

Documents in This Section