Chart Legend

1) The Chart Legend is a setting under the Chart Style attribute, which is used to modify the content, layout, and style of legends, as shown in the following diagram:

2) This document describes common legend settings. For charts with special legend settings, please refer to their own documentation for specific descriptions.

3) Legends are not available on Structure Chart and Gauge.

4) Suggested Reading: Chart Data, Chart Types.

Please refer to Section II Insert a Simple Chart of Chart Series. Those already familiar with inserting charts may skip this section.

Take the Floating Chart-Column Chart as an example.

Double-click the chart and select [Style]>[Legend] on the right to perform legend style adjustment. You can see that there are 5 general settings, namely: Layout, Style, Border, BG, and Display Strategy. Adjustments made to the style can be seen in real time in the floating chart effect on the left as shown in the following diagram:

1. Layout

This section sets where to display the legends. There are six options, namely: Top, Bottom, Left, Right, Top Right and Custom Floating Position. The default setting is Right.

•  Top, Bottom: When displayed on the Top or Bottom, there will be two optional arrangements: Flow and Aligned and the default setting is Aligned.

•  Flow: Arrange the legends from left to right, and wrap the line if they exceed the width of the chart, without regard to typesetting

•  Aligned: From left to right, keep the legends aligned up and down.

•  Left, Right, Top Right: When Left, Right and Top Right are selected, there will be no arrangement options.

•  Custom Floating Position: With the upper left corner of the chart as the origin, the position of the legend is determined by customizing the percentages in the x direction (horizontal direction) and y direction (vertical direction) from the origin.

Note: The Custom Legend Position function is not available on mobile terminals when dragging the chart to the body of the Dashboard directly. However, the Custom Legend Position function is available on mobile terminals for charts in the Report Block of the Dashboard.

2. Style

This section sets the font, color and font size of the legend text per specific needs.

• Character: Set the Font, Size, Color, Italic and Bold of the characters. For example, [Font] is set to Times New Roman, [Font Size] is 15, [Color]is #cf5002, and the characters are italicized and bold.

Note: If a minimum font size is set by the browser, such minimum font size shall prevail. For example, if the minimum font size of the Chrome browser is 12, and the font size of the chart is set to 10, when viewing reports in Chrome, the chart font size will be displayed as 12, instead of 10. To display the font size 10, you need to modify the browser font size.

3. Border

This section sets the border of the legend. Available settings include Line Style, Color, and Rounded Corner. The default setting is No Border.

• Line Style: It sets which line style is used for the border. Three solid lines of different thickness are available.

• Color: It sets the color used for the border.

• Rounded Corners: It sets the degrees of the four corners.

4. BG

This section sets the legend background. Available settings include:

• Fill: Click on the drop-down menu to select from No BG, Color and Gradient Color. The default setting is No BG. Take [Gradient Color] as an example. Set the direction as [Horizontal], the color on the left #ffffff and the color on the right #fce6e6 and the effect is shown in the diagram.

• Opacity: Set the transparency effect of the background. The range is 0~100.

• Shadow: Set whether or not to enable the shadow effect on the legend background and it is Off by default. When enabled, it is shown in the diagram:

5. Display Strategy

This section controls the size of the legend display area and specifies the interaction effects. Available settings include:

• Area Size: The size of the legend display area can be controlled with the two options: [Auto] and [Custom]. The default setting is [Auto].

• Maximum Proportion: The proportion of the legend area can be customized from 0 to 100, if the Area Size is set as [Custom].

• Highlight: When enabled, move the mouse to the legend and the corresponding series will be selected as a whole. The default setting is On. The highlight effects is shown in V. Legend Interaction:

Note:

• When the Layout is set as Custom Floating Position, the Area Size and Maximum Proportion cannot be set.

• The Opacity of the Highlight effect is independent of the Opacity of the Legend. The Opacity of the graphs of the series represented by the legend hovered by the mouse (the Area Chart includes the filled area color) is fixed at 100%, and the Opacity of the remaining unselected series is 30%.

• Legend Highlight does not support Multi-layer Pie Charts, Heat Maps and charts with gradient color format (see IV. Other Legend Styles ).

6. Do Not Display Legend

To cancel legend settings, uncheck [Legend is Visible].

Three different types of legend format can be set, namely: Ordinary, Gradient Color and Section Configuration. The default setting is Ordinary.

Legend formats are applicable only to Drill Down Maps, Heat Maps, Bubble Charts, Scatter Plots, Maps and Word Cloud Charts. But the Heat Map does not support [Ordinary] style.

Take the Floating Chart-Scatter Plot as an example.

1. Ordinary

The legend is displayed with the default common color style.

2. Gradient Color

The legend is displayed in gradient color. You can set the legends by setting the Section Configuration (Gradient setting) and Format (Label format).

1) Section Configuration

• Custom Maximum Value and Custom Minimum Value: Set the section of the gradient color, which are unchecked by default.

• Theme Color: Set the theme color of the gradient color.

• Partitioning Phases: Divide the gradual change of the legend into multiple phases.

• Color Setting of Gradient Phases: Set the colors of different phases in the palette.

2) Format

• Label Format: The content of the label can be displayed in [Common] or [Custom] style. When Customize is selected, the text can be parsed with HTML.

• Format: Set the display format of the corresponding label (such as General, Number, Currency, Percentage, etc.)

Note: The Highlight settings are not included in the Display Strategy of a gradient legend.

3. Section

The legend is divided into several sections, which are then assigned with various colors by section.

1) Section Configuration

• Theme Color: Set the theme color of the gradient color.

• Partitioning Phases: Divide the legend into multiple phases.

• Section Value: Set the value of color for each phase with [Auto] and [Custom] options.

• Auto: The default color value setting is used and color of each phase is assigned in accordance with the theme color.

• Custom: Manually set the color value of each section, as shown in the diagram below:

2) Format

• Label Format: The content of the label can be displayed in [Common] or [Custom] style. When Customize is selected, the text can be parsed with HTML.

• Format: Set the display format of the corresponding label (such as General, Number, Currency, Percentage, etc.)

1. Highlight

When the mouse is hovering over a legend, other series will become transparent and the series corresponding to the legend will be highlighted, as shown in the following diagram:

2. Click to Hide

After clicking on a legend, the series corresponding to the legend will be hidden, and after clicking on the legend again, the series will become visible again, as shown in the following diagram: