Chart Advanced Cheat Sheet

Last modified: July 4, 2023

1 Introduction

This reference describes advanced configuration settings for the chart widget.

Standard charts provide the most common settings through the widget configuration. Additional settings can be set via the Advanced settings.

This cheat sheet with JSON snippets will provide some samples of advance configuration.

The full reference can be found at https://plot.ly/javascript/. Charts support plotly.js version 1.47.4.

When the advanced configuration does not suffice have a look at the Any Chart widget in the Marketplace.

2 Layout (All Charts)

Layout controls the general appearance of the chart. The chart is customized by adding JSON properties to the layout.

Below is a basic configuration.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{
  "font": {
    // font properties
  },
  "title": "CHART TITLE",
  "titlefont": {
    // title font properties
  },
  "hovermode": "closest",
  "showlegend": true,
  "legend": {
    // legend properties
  },
  "hoverlabel": {
    // hover label properties
  },
  "margin": {
    // margin properties
  }
}

To use the layout snippet above, replace all lines labeled // {some text} properties with actual properties specific to the element.

2.1 Legend

The legend properties below are added to the layout configuration to apply custom style to it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{
  "legend": {
    "showlegend": true,
    "legend": {
      "bgcolor": "#fff",
      "bordercolor": "#444",
      "borderwidth": 0,
      "font":{
        "family": "Open Sans, verdana, arial, sans-serif",
        "size": 12,
        "color": "black"
      },
      "orientation": "v",
      "traceorder": "normal",
      "tracegroupgap": 10,
      "x": -0.1,
      "xanchor": "right"
    }
  }
}

You can change the position of the legend by modifying the properties as shown below.

Right:

1
2
3
{
  "showlegend": true,
}

Left:

Adjust x for long series names or Y-axis ticks.

1
2
3
4
5
6
7
{
  "showlegend": true,
  "legend": {
    "xanchor": "right",
    "x": -0.1
  }
}

Top:

1
2
3
4
5
6
7
{
  "showlegend": true,
  "legend": {
    "orientation": "h",
    "y": 1.1
  }
}

Bottom:

Adjust y to -0.2 for long X-axis ticks.

1
2
3
4
5
6
7
{
  "showlegend": true,
  "legend": {
    "orientation": "h",
    "y": "auto"
  }
}

Inside:

1
2
3
4
5
6
{
  "showlegend": true,
  "legend": {
    "x": 0
  }
}

None:

1
2
3
{
  "showlegend": false
}
Legend configurations

More options can be found here: Legend configurations.

2.2 Axes

The axes properties apply to charts with x and y axes. They can be configured as:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "xaxis": {
    "gridcolor": "#eaeaea",
    "title": "X-axis",
    "color": "#0000FF",
    "showgrid": false,
    "fixedrange": true,
    "showline": true,
    "side": "bottom"
  },
  "yaxis": {
    "rangemode": "tozero",
    "zeroline": true,
    "zerolinecolor": "#eaeaea",
    "gridcolor": "#eaeaea",
    "color": "#0000FF",
    "title": "Y-axis",
    "showgrid": true,
    "showline": true,
    "fixedrange": true
  }
}
Axes configurations

More options can be found here: Axes configurations.

2.3 Multiple Y Axes

These properties apply to charts with more than one Y axis. They can be configured as:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
  "yaxis": {
    "title": "Y-axis 1",
    "zeroline": true,
    "color": "#4682B4",
    "showgrid": true,
    "showline": true
  },
  "yaxis2": {
    "title": "Y-axis 2",
    "color": "#FF8C00",
    "showgrid": true,
    "showline": true,
    "zeroline": true,
    "overlaying": "y",
    "side": "right"
  }
}

The layout properties above should be used with the corresponding data properties.

Multiple Y axes configurations

More options can be found here: Multiple Y axes configurations.

2.4 Multiple X Axes

These properties apply to charts with more than one X axis. They can be configured as:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "xaxis": {
    "title": "X-axis 1",
    "color": "#4682B4",
    "showgrid": true,
    "showline": true,
    "zeroline": true
  },
  "xaxis2": {
    "title": "X-axis 2",
    "titlefont": {
      "color": "#FF8C00"
    },
    "tickfont": {
      "color": "#FF8C00"
    },
    "zeroline": true,
    "color": "#FF8C00",
    "showgrid": true,
    "showline": true,
    "overlaying": "x",
    "side": "top"
  }
}

The layout properties above should be used with the corresponding data properties.

Multiple X axes configurations

More options can be found here: Multiple X axes configurations.

2.5 Math LaTeX Formulas

Titles, axes and series can contain complex mathematical expressions.

Math formula
$\sqrt{(n_\text{c}(t|{T_\text{early}}))}$

Add the following to the index.html of the theme:

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_SVG"></script>

More information on LaTex Syntax is available here: https://en.wikibooks.org/wiki/LaTeX/Mathematics.

2.6 Title

The title appears above the chart. It can be configured as:

1
2
3
4
5
6
7
8
{
  "title": "CHART TITLE",
  "titlefont": {
    "family": "Droid Sans, Droid Serif, sans-serif",
    "size": 20,
    "color": "black"
  }
}
Title configurations

More options can be found here: Title configurations.

2.7 Color

Sets the background color of a graph.

1
2
3
{
  "paper_bgcolor": "#FFF"
}

2.8 Margin

Creates space around the chart.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "margin": {
    "l": 70,
    "r": 60,
    "b": 60,
    "t": 60,
    "pad": 10,
    "autoexpand": true
  }
}
 Margin configurations

More options can be found here: Margin configurations.

2.9 Tooltip

A small pop-up box that appears when the user moves the mouse pointer over a chart data point.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "hovermode": "text",
  "hovertext": "text",
  "hoverinfo": "all",
  "textposition": "inside",
  "hoverlabel": {
    "bgcolor": "#888",
    "bordercolor": "#888",
    "font": {
      "color": "white"
    }
  }
}

Tooltip configurations
.

More options can be found here: Tooltip configurations.

2.10 Fonts

Sets a global font at the root level which will be applied to all chart elements. Or set a font for specific elements.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "font": {
    "family": "Open Sans,verdana, arial, sans-serif",
    "size": 12,
    "color": "black"
  },
  "legend": {
    "font": {}
  },
  "titlefont": {},
  "hoverlabel": {
    "font": {}
  },
  "xaxis": {
    "titlefont": {},
    "tickfont": {}
  },
  "yaxis": {
    "titlefont": {},
    "tickfont": {}
  }
}

2.11 Range Mode

Sets how the range of a given axis should be displayed.

normal:

Sets the range based on the plotted values, adjusting to fit them.

1
2
3
4
5
{
  "yaxis": {
    "rangemode": "normal"
  }
}
Range mode

nonnegative:

Shows only positive values, the range is based on the plotted positive values.

1
2
3
4
5
{
  "yaxis": {
    "rangemode": "nonnegative"
  }
}
Range mode

tozero:

This is the default range mode in charts. Both positive and negative ranges for the axes will start from the zero mark.

1
2
3
4
5
{
  "yaxis": {
    "rangemode": "tozero"
  }
}
Range mode
Range mode

More options can be found here: range mode configurations.

3 Data/Series Properties

These properties are applied to specific types of chart only. For each chart, data properties are distinct. They make the chart appear as its supposed to be.

3.1 Lines

A mode and line configuration can be added in the Advanced configuration of the series.

Line styles
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
[
  {
    "mode": "markers"
  },
  {
    "mode": "lines+markers"
  },
  {
    "mode": "lines"
  },
  {
    "mode": "lines",
    "line": {
      "dash": "dashdot"
    }
  },
  {
    "mode": "lines",
    "line": {
      "dash": "dot"
    }
  },
  {
    "mode": "lines",
    "line": {
      "dash": "longdash"
    }
  },
  {
    "mode": "lines",
    "line": {
      "width": 5
    }
  }
]

3.2 Combine Chart Types

The type of a series can be changed. For example, you can make a bar series into a line series:

Column chart data properties

3.3 Pie Chart

Displays a circular graph divided into slices to illustrate numerical proportion.

1
2
3
{
  "hole": 0.9
}
Pie chart data properties

More options can be found here: Pie chart data properties.

3.4 Fill

Displays a line chart with the areas below the lines filled with colors.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "line": {
    "color": "#17202A",
    "shape": "linear",
    "dash": "dot"
  },
  "type": "scatter",
  "fill": "tonexty",
  "fillcolor": "#B2BABB"
}
Area chart data properties

More options can be found here: Area chart data properties.

3.5 Time Series

The example below shows how you can set up filter buttons to filter a chart by time.

Line chart data properties
.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
  "xaxis": {
    "rangeslider": {
      "visible": true
    },
    "rangeselector": {
      "buttons": [
        {
          "step": "all",
          "label": "reset"
        },
        {
          "step": "year",
          "stepmode": "backward",
          "count": 1,
          "label": "1 YEAR"
        },
        {
          "step": "year",
          "stepmode": "backward",
          "count": 5,
          "label": "5 YEARS"
        },
        {
          "step": "year",
          "stepmode": "backward",
          "count": 10,
          "label": "10 YEARS"
        },
        {
          "step": "year",
          "stepmode": "todate",
          "count": 1,
          "label": "YTD"
        }
      ]
    }
  }
}

See more properties here: Range Selector.

3.6 Multiple Y Axes Data Properties

Displays two different Y axes with different scales, according to the ranges of the datasets.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
[
  {
    "name": "yaxis2 data",
    "yaxis": "y2",
    "type": "scatter"
  },
  {
    "name": "yaxis data",
    "type": "scatter"
  }
]
Multiple Y axes properties

3.7 Multiple X Axes Data Properties

Displays two different X axes with different scales.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
[
  {
    "name": "xaxis data",
    "xaxis": "x",
    "type": "scatter"
  },
  {
    "name": "xaxis2 data",
    "xaxis": "x2",
    "type": "scatter"
  }
]

Multiple X axes properties
.

4 Configurations Options (All Charts)

The following configuration options are available in all charts (presented here as an example with formatting for the nl locale):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
{
  "displayModeBar": true,
  "displaylogo": false,
  "modeBarButtonsToRemove": [ "sendDataToCloud", "lasso2d", "select2d", "hoverClosestCartesian", "hoverCompareCartesian", "toggleSpikelines" ],
  "locale": "nl",
  "locales": {
		"nl": {
			"dictionary": {
				"Download plot as a png": "Opslaan als PNG"
			},
			"format": {
				"days": ["zondag",
				"maandag",
				"dinsdag",
				"woensdag",
				"donderdag",
				"vrijdag",
				"zaterdag"],
				"shortDays": ["zon",
				"maa",
				"din",
				"woe",
				"don",
				"vri",
				"zat"],
				"months": ["januari",
				"februari",
				"maart",
				"april",
				"mei",
				"juni",
				"juli",
				"augustus",
				"september",
				"oktober",
				"november",
				"december"],
				"shortMonths": ["jan",
				"feb",
				"maa",
				"apr",
				"mei",
				"jun",
				"jul",
				"aug",
				"sep",
				"okt",
				"nov",
				"dec"],
				"date": "%d-%m-%Y",
				"datetime": "%d-%m-%Y %H:%M",
				"year": "%Y",
				"month": "%b %Y",
				"dayMonth": "%d %b",
				"dayMonthYear": "%d %b %Y"
			}
		}
	}
}