Use the Charts Theme

Last modified: October 12, 2023

1 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

2 Prerequisites

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

3 Creating a Chart Theme

This is how the original chart looks:

chart

3.1 Creating an Advanced Custom Configuration

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

  1. Open the app with the chart(s).

  2. Open a page with a chart.

  3. Open the chart widget settings.

  4. Go to the tab Advanced.

  5. Set the Mode to Developer.

    chart widget properties
  6. Run the app.

  7. Open the page with the chart in the browser.

  8. Click the Toggle Editor button.

  9. In the Layout section add the Custom settings.

    1
    2
    3
    4
    5
    6
    7
    
    {
      "font": {
        "family": "Open Sans",
        "size": 14,
        "color": "#555"
      }
    }
    
  10. Change the font settings, till the chart shows the required font.

    chart editor
  11. In Studio Pro, set Mode in the chart widget to Advanced, to remove the Toggle Editor button.

3.2 Adding a Theme Configuration

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

  1. From Studio Pro, go to the menu Project > Show Project Directory in Explorer.

  2. Open the theme folder.

  3. Create a new file: com.mendix.charts.json

3.3 Changing the Font Globally

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    {
      "layout": {
        "font": {
          "family": "Impact",
          "size": 20,
          "color": "#4682B4"
        }
      }
    }
    
  3. Restart the Mendix app.

  4. Validate the expected result.

    chart updated

4 Read More