Custom Tooltip Style

Version

Expected Effect

The following figure shows the expected effect, where the category, series, and series values are displayed in a table. Such a format is suitable for displaying the tooltip for a single series.

Implementation Method

Select Custom for the prompt content, enter HTML codes, and select Use HTML to Parse Text Content, as shown in the following figure.

Data Preparation

Choose File > New General Report in the upper left corner of the designer, and select Refresh Technology as the template theme.

Create a database query ds1 with the SQL query statement SELECT * FROM Sales_Volume, as shown in the following figure.

Report Design

Chart Insertion

Merge required cells, click the Insert Chart icon, and select Column Chart, as shown in the following figure.

Data Binding

Select the chart, choose Cell Element > Data on the right property panel, and bind the dataset data to the chart. Select Region from the drop-down list of Category, Field Value for Series Name, Product from the drop-down list of Series, and Sales_Volume from the drop-down list of Value, as shown in the following figure.

Chart Style Setting

1. Title Setting

Select the chart, choose Cell Element > Style > Title, and enter Product Sales Per Region, as shown in the following figure.

2. Prompt Setting

Select the chart, choose Cell Element > Style > Prompt, select Custom for Content, and enter the following code:

function() {
return '<h3>'
+this.category +
'</h3><table border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF"><tr><td style="color:white;"> Product </td><td style="color:white;">'
+ this.seriesName +
'</td></tr><tr><td style="color:white;"> Sales </td><td style="color:white;">'
+ this.value +
'</td></tr></table>';
}

After entering the code, you need to select Use HTML to Parse Text Content, as shown in the following figure.

Effect Display

Save the template and click Pagination Preview. The following figure shows the effect.

Note:

The effect cannot be previewed on mobile terminals.

For details, you can download the template: Custom Tooltips for Column Charts.cpt.