Fine-Tune a Chart with Advanced Settings

Last update: Download PDF Edit

1 Introduction

The individual Charts widgets can be fine tuned with advanced settings. The setting can affect the layout, configuration and data.

This how-to will teach you how to do the following:

  • Change font style (layout)
  • Change chart type (Data)
  • Enable toolbar (configuration)

2 Prerequisites

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

3 Changing Layout

Before: chart

To create a custom layout, follow these steps:

  1. Open a project with 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 project
  7. In your browser, open the page with the chart
  8. Click on the button Toggle Editor
  9. In the Layout section add the Custom setting
{
  "font": {
    "family": "Open Sans",
    "size": 14,
    "color": "#555"
  }
}
  1. Change the font settings, till the chart shows the required font. Copy the font settings.

After: chart editor 11. Paste the new font settings into the Layout options property in the tab Advanced chart editor 12. Change the Mode back to Advanced in the modeler, this will remove the Toggle Editor button from the chart.

4 Changing Data

Before: chart editor

To create a custom configuration, follow these steps:

  1. Repeat steps 1 to 8 from the layout instructions
  2. Select the from the drop down menu the name of the series, in this case Series 1
  3. Edit the Custom settings, change it to { “type”: “line” } chart editor
  4. Copy the the custom settings
  5. In the modeler, open the Series 1 configuration
  6. Paste the new configuration for the data into the Configuration options options property in the tab Advanced chart editor

After: chart editor

5 Changing Configuration

To create custom a configuration, follow these steps:

  1. Repeat steps 1 to 8 from the layout instructions
  2. Select the from the drop down menu Configuration
  3. Edit the Custom settings, change it to { “displayModeBar”: true }
  4. Add more Custom settings as desired. See here for more configuration settings
  5. The changes in the editor are not persistent, copy the required settings
  6. Paste the new configuration into the Configuration options options property in the tab Advanced chart editor
  7. Change Mode to Advanced set modeler, to remove the Toggle Editor button.

chart editor

6 References

Reference guide for the advanced properties

Layout options cheat sheet
Configuration options cheat sheet
Data options cheat sheet

Full reference https://plot.ly/javascript/