Fine-Tune a Chart with Advanced Settings

Last modified: October 12, 2023

1 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)

2 Prerequisites

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

3 Changing the Layout

This is what the original chart looks like:

chart

To create a custom layout, follow these steps:

  1. Open an app containing a chart.

  2. Open the page with the charts widget.

  3. Open the charts widget settings.

  4. Go to the tab Advanced.

  5. Set the Mode to Developer.

    chart widget properties

  6. Run the app.

  7. In your browser, open the page with the chart.

  8. Click on the button Toggle Editor.

  9. In the Layout section add the following Custom setting:

    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. Copy the font settings.

    After making some changes, the chart looks like this:

    chart editor
  11. Paste the new font settings into the Layout options property in the Advanced tab.

    chart editor
  12. Change the Mode back to Advanced in Studio Pro, this will remove the Toggle Editor button from the chart.

4 Changing the Chart Type

This is what the chart looks like before making any changes:

chart editor

To create a custom configuration, follow these steps:

  1. Repeat steps 1 to 8 from the layout instructions.

  2. Select the name of the series you want to display differently from the drop-down menu: in this case Series 1.

  3. Edit the Custom settings; change them to { "type": "line" }.

    chart editor

  4. Copy the custom settings.

  5. In Studio Pro, open the Series 1 configuration.

  6. Paste the new configuration for the data into the (Layout) Options property in the Advanced tab.

    chart editor

After the changes, the chart looks like this:

chart editor

5 Changing the Configuration

To create custom a configuration, follow these steps:

  1. Repeat steps 1 to 8 from the layout instructions.

  2. Select Configuration from the drop-down menu.

  3. Edit the Custom settings, change them to { "displayModeBar": true }.

  4. Add more Custom settings as desired. See here for more configuration settings.

  5. The changes made in the editor are not persistable; copy the required settings.

  6. Paste the new configuration into the Configuration options property in the Advanced tab.

    chart editor

  7. Change Mode to Advanced, set Studio Pro to remove the Toggle Editor button.

    chart editor

6 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/