Web > Charts

Legends and Annotations

Known issues

Some chart features have known issues in the current release. See Known issues.

A legend lists what each color in a chart stands for, and an annotation marks the chart with a line, band, box, text, or image at a chosen position; both are added as layers.

Adding a legend

A legend is a layer that lists the series of the chart's other layers.

1. In Editor mode, select the chart's edit button, then Plot -> Edit Layers.
2. Select "+ Add Layer", then "Legend". A layer named "Legend" is added and selected.

3. Fill in the fields:

   Field	Default	What it sets
   "Legend Title:"	Legend	The heading above the entries
   "Swatch HTML:"	Empty	A custom swatch, as HTML
   "AVAILABLE SERIES"	Every layer selected	Which layers' series are listed

4. Select "OK".

5. Check that a box titled with the "Legend Title:" is drawn over the plot, listing one entry per series.

A legend added over MCP with only an id and a type starts with every layer cleared under "AVAILABLE SERIES", so it draws an empty box titled with its id until they are selected here. One added with zpositions, such as [0] for the chart's first layer, starts with those layers selected; see Adding a layer.

The legend's "STYLE OPTIONS" set its look and place:

Group	Settings
"TITLE"	"Position:", "Font:"
"POSITION"	"Align:", "Width:", "Height:", "Horizontal Padding:", "Vertical Padding:", "Max Columns:", "Max Rows:", "Alignment:"
"GENERAL"	"Group By Layer:", "Font:", "Border Color:", "Background Color:", "Checkboxes:" ("Inherit", "Show", "Hide"), "Checkbox Color:", "Check Color:", "Checkbox Border:"

What a legend lists

A legend lists one entry per series, per layer selected under "AVAILABLE SERIES". A bar chart colored by series, which is the gallery's default, makes each category its own series, so a bar chart of 6 symbols has a legend of 6 entries, and 12 if a second bar layer is selected.

With checkboxes shown, selecting one entry shows only the selected series and hides the rest; clearing every entry shows them all again. See Using charts.

Keeping a legend short

A long legend is usually a sign that each category is its own series. These settings shorten or organize it:

• Clear duplicate layers: under "AVAILABLE SERIES", clear every layer whose entries repeat another's. This is the setting that removes duplicates.
• Group the entries by layer: "Group By Layer:" "On" adds a heading per layer above its entries. It keeps every entry.
• Leave the legend out: a legend on a single-series bar chart repeats what the category axis already shows. Add one where color carries meaning that the axes do not, such as several layers or a "Color by:" field.

"Max Rows:" lays the entries out in columns so that the legend takes fewer rows, and keeps its title: a legend of 7 entries with "Max Rows:" 3 showed all 7, in 2 rows. A long legend has also been seen to drop entries past the limit with no sign that any are hidden, so check the legend after setting it. A chart's PNG export draws the legend in one column, whatever "Max Rows:" is.

Adding a reference line

A reference line marks a value across the plot, such as a threshold or a target.

1. In Editor mode, select the chart's edit button, then Plot -> Edit Layers.
2. Select "+ Add Layer", then Annotation -> Axis Line. A layer named "Annotation" is added, showing "AXIS LINE (FULL SPAN)".

3. Fill in the fields:

   Field	Value
   "Y:"	The value to mark, such as 4
   "Color:"	"Color", then a color, such as #888888
   "Line/Border Size (px):"	The line's width, such as 3

4. Select "OK".

5. Check that a line is drawn across the plot at the value.

An annotation outside the axis's range is not drawn, and the axis does not widen to include it. To show a target above the data, set the axis's maximum above the target first; see Setting an axis range.

Annotation kinds

Each annotation kind is a tile in the annotation layer's "CHART TYPE". Every kind except "Advanced" is also an item under + Add Layer -> Annotation:

Kind	Draws
"Axis Line"	A line across the whole plot at an x or y value ("AXIS LINE (FULL SPAN)")
"Mark Line"	A line between points in the data ("MARK LINE (BOUNDED TO DATA)")
"Shaded Band"	A filled rectangle from "X:" to "X2:" and "Y:" to "Y2:"
"Box"	A rectangle with a border, from "X:" to "X2:" and "Y:" to "Y2:"
"Segment"	A line from ("X:", "Y:") to ("X2:", "Y2:")
"Text"	Its "Label:" at ("X:", "Y:")
"Image"	An image
"Advanced"	Every annotation field

"Axis Line" and "Mark Line" have "X:", "Y:", "Color:", "Line/Border Size (px):", "Line Dash:", "Start Shape:", "End Shape:", and a "LABEL" section. "Mark Line" also has a "DATA" section ("Where:", "Group By:", "Order By:"). "Shaded Band" adds "Color:"; "Box" adds "Color:", "Border Color:", and "Line/Border Size (px):"; "Segment" adds "Color:", "Line/Border Size (px):", "Line Dash:", "Start Shape:", and "End Shape:"; and "Text" adds "Start Shape:", "End Shape:", and "Color:". Each has a "LABEL" section, whose "Label Color:" starts at "No Color", so a label shows only once it is given a color. "Image" has "X:", "Y:", "X2:", "Y2:", and "Image Source:". An "Image" whose source cannot be loaded draws nothing, and nothing reports it.

Positioning an annotation

An annotation layer's "X Anchor:" and "Y Anchor:" set what its x and y values mean:

Anchor	A value means
"Data (axis value)"	A value on the axis, the default
"Fraction (0-1 of plot)"	A fraction of the plot's width or height, from its left or bottom edge, such as 0.1
"Pixel (offset)"	A distance in pixels from the plot's left or bottom edge
"Category (ordinal)"	Listed for category axes

Each anchor applies to its own axis: with "X Anchor:" set to "Pixel (offset)" and "Y Anchor:" left at "Data (axis value)", "X:" is in pixels and "Y:" is still an axis value, and a "Y:" outside the axis range is not drawn.