Custom Label or Tooltip in Rich Text

1. Version

Note: If the chart template made in JAR package 2020-11-02 is previewing in the report server of an earlier JAR package version, the label may have compatibility problems, such as changing the label format to percentage or changing the label character style. You are advised to keep the local JAR package and remote JAR package consistent.

2. Application Scenarios

In the past, when users want to customize label or customize tooltip, they can only achieve it through JavaScript code, which not only increases the difficulty of report development, but also has high requirements on code ability.

We launched "Rich Text" custom label or tooltip function, through the rich text editor can choose "Label" or "Tooltip" needs to display the parameters, and set the display format, font style, etc., and can be used to input text and parameter combination, in order to meet the most personalized custom "Label" or "Tooltip" requirements.

3. Function introduction

All charts support rich text custom tooltip, and dashboard, gantt chart, frame chart does not support rich text custom label.

Take label as an example. The function entry of the rich text editor is Style > Label > Rich Text > Rich Text Edit. There are three settings, which are "Add field", "Field Setting" and "Font style". As shown below:

1. Add field

Rich Text supports the following two fields as parameters:

General field: Category Name, Series, Value, Percentage

Dataset field: All the fields in the selected dataset when data source is dataset

Note: In the 2021-03-17 JAR package version, only pie chart (excluding classification label), column chart, bar chart, line chart, area chart, radar chart, and combination chart can be added with "Dataset field".

In the upper left of the rich text editor interface, click the "+" after the field to add the parameter to the lower editing panel.

If you want to delete a parameter, enter the cursor in the edit panel below to delete it.

2. Field Setting

You can set the field format in "Field Setting" at the upper right of the rich text editor interface.

1) General field: After selecting a field, you can set its format as: General, Number, Percentage, Currency, Scientific Notation, Date, Time, and Text. The default value is "General". As shown below:

2) Dataset field: the setting of "Format" is consistent with that of "General field". In addition, you can also set the "Summary Mode" of dataset field, which can be set as: First, The last one, Sum, Average, Maximum, Minimum, and Count. The default value is "First". As shown below:

Note: There is no sequence between "Add field" and "Format Setting". If multiple fields are the same, use the last field.

3. Font style

Rich text editor interface can choose two ways to set the font style, as follows:

1) Auto: Only need to edit the text content, font style using the system default logic.

2) Custom: There are font style setting options on the right side, users can customize the font, size, text color, alignment, etc.

Note: To modify the text style, you must first select the corresponding text in the edit panel.

Note: the font size is px, not pt.

The following uses the rich text custom tooltip as an example to explain how to use the function.

1. Prepare a template

You can make a stacked column chart for this example to use. Please refer to column chart for details.

2. Custom tooltip

1) Select the stacked column chart, choose "Style > Tooltip > Rich Text" in the chart attributes panel, click "Rich Text Edit", and the rich text editor dialog box pops up.

2) Delete the original parameters in the editing panel, select the parameter "Percentage" in the upper left, change the percentage format to "#0%" in the upper right, and then click "+" to add "Percentage" to the editing panel.

3) Select the font style of the editing panel as "auto", type the cursor before "Percentage", enter the description "Proportion:", and click "OK".

As shown below:

3. Preview effect

Save the report, click "Pagination Preview", move the mouse pointer to the column chart, and the tooltip effect is as shown below:

Note: Both App side and HTML5 side are supported.

Please refer to the completed template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Advanced\Chart\ColumnChart\Rich_Text_Custom_Tooltip.cpt

Click to download: Rich_Text_Custom_Tooltip.cpt