If you would like to upgrade to a newer long-term support version of Studio Pro, see Moving from Mendix Studio Pro 8 to 9.
Fine-Tune a Chart with Advanced Settings
Introduction
The individual Charts widgets can be fine-tuned with advanced settings. The settings can affect the layout, configuration and data.
This how-to teaches you how to do the following:
- Change font style (layout)
- Change chart type (data series)
- Enable toolbar (configuration)
Prerequisites
Before starting this how-to, make sure you have completed the following prerequisites:
- Installed the latest version of Mendix Studio Pro
- Downloaded the latest Chart Widget from the Mendix Marketplace
- Set up a chart, see How to Create a Chart
Changing the Layout
This is what the original chart looks like:
To create a custom layout, follow these steps:
-
Open an app containing a chart.
-
Open the page with the charts widget.
-
Open the charts widget settings.
-
Go to the tab Advanced.
-
Set the Mode to Developer.
-
Run the app.
-
In your browser, open the page with the chart.
-
Click on the button Toggle Editor.
-
In the Layout section add the following Custom setting:
{ "font": { "family": "Open Sans", "size": 14, "color": "#555" } }
-
Change the font settings till the chart shows the required font. Copy the font settings.
Please note that changes made in the editor will not persist unless they are stored in the advanced settings of the widget or in the theme.After making some changes, the chart looks like this:
-
Paste the new font settings into the Layout options property in the Advanced tab.
-
Change the Mode back to Advanced in Studio Pro, this will remove the Toggle Editor button from the chart.
Changing the Chart Type
This is what the chart looks like before making any changes:
To create a custom configuration, follow these steps:
-
Repeat steps 1 to 8 from the layout instructions.
-
Select the name of the series you want to display differently from the drop-down menu: in this case Series 1.
-
Edit the Custom settings; change them to
{ "type": "line" }
. -
Copy the custom settings.
-
In Studio Pro, open the Series 1 configuration.
-
Paste the new configuration for the data into the (Layout) Options property in the Advanced tab.
After the changes, the chart looks like this:
Changing the Configuration
To create custom a configuration, follow these steps:
-
Repeat steps 1 to 8 from the layout instructions.
-
Select Configuration from the drop-down menu.
-
Edit the Custom settings, change them to
{ "displayModeBar": true }
. -
Add more Custom settings as desired. See here for more configuration settings.
-
The changes made in the editor are not persistable; copy the required settings.
-
Paste the new configuration into the Configuration options property in the Advanced tab.
-
Change Mode to Advanced, set Studio Pro to remove the Toggle Editor button.
Please note that the advanced settings only apply to the chart in Advanced or Developer mode
Read More
Reference for the advanced properties
Layout options: cheat sheet
Configuration options: cheat sheet
Data series options: cheat sheet
Full reference: https://plot.ly/javascript/