Charts

Last modified: October 26, 2023

1 Introduction

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

Basic Charts are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see Charts). Basic charts are based on version 1.47.4 of plotly.js.

Any Chart gives much more control and allows more flexible use of the features of plotly.js. The Any Chart widget can be included in your app. See the widget description in the Marketplace to see what version of plotly.js is supported.

2 Basic Charts

With Mendix Charts you can quickly create beautiful charts. The following charts are included:

  • Area chart – a line chart with a fill to the X-axis
    Sample Area Chart
    Sample Area Chart
    Sample Area Chart
    Sample Area Chart
    Sample Area Chart
    Sample Area Chart
    Sample Area Chart
    Sample Area Chart
  • Bar chart – horizontal bars, grouped or stacked
    Sample Bar Chart
  • Bubble chart – add a size dimension to your chart
    Sample Bubble Chart
  • Column chart – vertical bars, grouped or stacked
    Sample Column Chart
  • Heat map – show data values by color in a 2D matrix
    Sample Heat Map
  • Line chart – straight or curved lines, with or without markers
    Sample Line Chart
  • Pie chart – a pie or a doughnut chart
    Sample Pie Chart
  • Time series – show data ordered by time
    Sample Time Series

The widgets contain several settings which can be changed in Studio Pro to customize the look and feel and also offer support for on click events and custom tooltips. See Chart Configuration to learn how to configure Mendix charts.

If the standard chart settings are not sufficient for your purposes, see Chart Advanced Cheat Sheet for information on advanced configuration of your basic charts.

Note that only features up to version 1.47.4 of plotly.js can be used when configuring charts.

Dynamic Series Chart

From version 1.4 of the basic charts you can create charts with a variable number of data series. For instructions on how to do this, see How to Create a Dynamic Series Chart.

3 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.

Sample Contour Chart made with Any Chart

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.

See Any Chart Widgets to learn how to configure Any charts widgets.

The Any Chart Cheat Sheet lists the most common chart types and the JSON required to create them in Any Chart.

4 Performing Basic Functions

For more information on how to add widgets to a page, view their properties, and arrange them, see Adding Elements on a Page, Viewing Element Properties, and Arranging Elements on a Page sections in Page.

5 Documents in This Section

  • Any Chart Widgets
  • A reference for the configuration of the Any Chart widget to pass the correct values to plotly. This enables you to draw a wide variety of charts

  • Any Chart Cheat Sheet
  • Shows, with examples, how the most common types of chart can be configured using the Any Chart Widget