Use the Charts Theme

Last modified: November 19, 2024

Introduction

The look of individual Charts widgets can be fine tuned with advanced settings. A theme allows developers to create global settings that apply to all charts. In this way color, language, font and many more things can be set for all the charts in an app.

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

Change the font style for all charts
Add a theme configuration

Prerequisites

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

Download the latest Chart Widget from the Mendix Marketplace
Set up a chart: see How to create a charts

Creating a Chart Theme

This is how the original chart looks:

Creating an Advanced Custom Configuration

To create the required custom configuration easily, follow these steps:

Open the app with the chart (or charts).
Open a page with a chart.
Open the chart settings.
Go to the tab Advanced.
Set the Mode to Developer.
Run the app.
Open the page with the chart in the browser.
Click the Toggle Editor button.

In the Layout section add the Custom settings.

{
  "font": {
    "family": "Open Sans",
    "size": 14,
    "color": "#555"
  }
}

Change the font settings, till the chart shows the required font.

Please note that the editor changes will not persist. They need to be stored in the advanced settings of the widget or stored in the theme.
In Studio Pro, set Mode in the chart to Advanced, to remove the Toggle Editor button.

Please note that the theme settings only apply to charts in Advanced or Developer mode.

Adding a Theme Configuration

To add a theme file which will apply to all charts in the app, follow these steps:

From Studio Pro, go to the menu App > Show App Directory in Explorer.
Open the theme folder.
Create a new file: com.mendix.charts.json

Please note that
* the file name is case sensitive
* the file extension is json
* the file must contain a json object, even if this is empty — for example { }

Changing the Font Globally

To change the font in all charts in the app, follow these steps:

Edit the [app folder]/theme/com.mendix.charts.json file in a plain text editor.

Replace or update the content. In the layout section, place the style changes that were created in the first section of this how to.

{
  "layout": {
    "font": {
      "family": "Impact",
      "size": 20,
      "color": "#4682B4"
    }
  }
}

Restart the Mendix app.
Validate the expected result.