charts-theme.md

title	url	weight	description	tags
Use the Charts Theme	/howto8/front-end/charts-theme/	40	How to set up a theme which will be applied to all the charts created with charts widgets in an app	Charts Theme Widget Studio Pro

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:

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

3 Creating a Chart Theme

This is how the original chart looks:

{{< figure src="/attachments/howto8/front-end/charts-tutorials/charts-advanced-tuning/charts-toggle-editor.png" alt="chart" class="no-border" >}}

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.

   {{< figure src="/attachments/howto8/front-end/charts-tutorials/charts-advanced-tuning/charts-widget-properties-advanced.png" alt="chart widget properties" class="no-border" >}}

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.

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

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

    {{< figure src="/attachments/howto8/front-end/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-open.png" alt="chart editor" class="no-border" >}}

    {{% alert color="warning" %}}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.{{% /alert %}}

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

    {{% alert color="warning" %}}Please note that the theme settings only apply to charts in Advanced or Developer mode.{{% /alert %}}

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

   {{% alert color="info" %}}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 { } {{% /alert %}}

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.

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

3. Restart the Mendix app.

4. Validate the expected result.

   {{< figure src="/attachments/howto8/front-end/charts-tutorials/charts-theme/charts-toggle-editor-changed.png" alt="chart updated" class="no-border" >}}

4 Read More

• Charts
• Layout samples
• Configuration samples