Create a Basic Chart

Last modified: October 22, 2026

Introduction

The Charts module provides widgets for different types of charts (for example, area, line, bar, column, and pie) in a Mendix application.

This how-to teaches you how to do the following:

  • Create a chart with basic sample data
  • Configure the chart display options

Prerequisites

Before starting this how-to, make sure you have completed the following prerequisites:

  • Download the latest Charts module from the Mendix Marketplace

Implementing the Charts Widget in an Existing App

In this section, you will create a chart with basic sample data.

Setting up the Domain Model

To use the Charts widget, a specific data structure is set up. This is defined by entities and attributes in the domain model.

  1. Create a new module called charts.

  2. Configure your domain model to contain an entity Value with a string attribute xValue and a decimal attribute yValue:

    Value entity

Creating a Data Entry Page

To create a basic data entry page from which the Charts widget will fetch data, follow these steps:

  1. Right-click the Value entity.

  2. Select Generate overview pages:

    Generate overview pages for Value entity

  3. Add the Value_Overview page to user navigation.

Adding the Charts Widget to a New Page

  1. Create a page named ShowChart.

  2. Add it to the user navigation.

  3. On the ShowChart page, add the widget Area chart:

    Select widget

  4. The final page should look like this:

    Area chart widget on the ShowChart page in Studio Pro, showing sample data for three series

Configuring the Charts Widget

To configure a Charts widget, follow these steps:

  1. Open the page with the Charts widget.
  2. Double-click the Area chart widget to open its properties.
  3. On the General tab, in the Data source section, click New in the Series list. The Edit Series Item dialog box opens.
  4. On the General tab of the dialog box, leave Data set set to Single series.
  5. Set Data source to Database and select the Value entity.
  6. Select xValue as the X axis attribute and yValue as the Y axis attribute.

Viewing the Chart

To view the chart, follow these steps:

  1. Run the app.

  2. In your browser, open the data entry page.

  3. Enter data values for x value and y value:

    Enter Data

  4. Click the Save button.

  5. Open the ShowChart page to view the chart you just created:

    Show Chart

Read More