Custom Label Displayed in Series Color

Version

Report Server Version

Functional Changes

11.0.2

When Custom is selected for Character under Label, the color of the label character will be set to Auto by default. In some cases, the color of character follows the color of series, and you don't need to customize it with JS code. Note: If the color of the label character is set to Automatic, the color will be automatically adjusted according to chart types and the position of the label. For example, if the label is on the outside of a column chart, the character color is consistent with the series color, and if the label is on the inside, the character color defaults to white.

Problem Description

When you select Common or Custom for the chart label, you can set the font, size, and color of the label character below. 

In designer of version 11.0.2 and later versions, when Custom is selected for Character, the color of the label character will be set to Auto. If the label is on the outside, it will be displayed in the chart series color by default, and if the label is on the inside, it will be displayed in white by default, as shown in the following figure. 

However, in versions prior to 11.0.2, only one color can be displayed when Custom is selected for Character, then all labels are displayed in the same color, as shown in the following figure. 

How to set the character colors follow the series colors in versions prior to 11.0.2? 

Implementation Method

Select Custom for Value Label, and set the color of the label as the color of the series by inserting code. Choose Character > Custom to set other settings of the character, as shown in the following figure.  

Note:

It can also be applied to Prompt.

Data Preparation

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

Create a database query named ds1, and enter the SQL statement SELECT * FROM Sales_Volume WHERE  Region='California' to extract the data in California from the Sales_Volume, as shown in the following figure. 

Report Design

Chart Insertion

Select required cells, click the Merge Cells icon to merge the cells, click the Insert Chart icon, and select Pie Chart, as shown in the following figure. 

Data Binding

Select the chart, Choose Cell Element > Data, and bind the data from the dataset ds1, as shown in the following figure.

Chart Style Setting

1. Show Title Deselecting

Select the chart, choose Cell Element > Style > Title, and deselect Show Title, as shown in the following figure. 

2. Label Setting 

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

function(){return '<span style="color:'+this.color+';">'+this.value+'</span>';}

Note: this.color refers to the color of the current series.

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

3. Prompt Setting

 The code refereed above is also suitable for Prompt. Select the chart, choose Cell Element > Style > Prompt, select Custom for Content, and enter the code, as shown in the following figure.

Effect Display

PC

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

Mobile Terminal

The report can be previewed on both the DataAnalyst app and the HTML5 terminal. The following figure shows the effect.

For details, you can click to download the template Custom Label Displayed in Series Color.cpt.cpt.