JS Realizing to Change The Color Of The Specified Category Name

1. Problem description

When displaying charts, sometimes in order to highlight the impact of certain categories on the value, a special display of the category name is required.

For example, in the sales volume of one month, marking the category names of two weekends in red, the effect is shown in the following figure:

2. Implementation ideas

Use JS to customize the label format of the category axis.

1. Report design

1) Create a New General Report, and create a new built-in datasetEmbedded1, as shown in the figure below:

2) Insert a line chart into the cell, and bind the chart data as shown below:

3) Select the line chart, customize the axis label format in Style>Axis>X Axis, and Use HTML parsing text content, as shown in the following figure:

The JS code is as follows:

function(){ 
    var date = new Date(this);
    if(date.getDay()==0||date.getDay()==6){
        return "<font color='red'>"+date.getDate()+"</font>"
    }else{
        return date.getDate();
    }
}

2. Effect preview

1) PC 

Save the report, click the Pagination Preview, the effect is as shown in the figure below:

2) Mobile

The completed template can be found in:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\Chart JS Example\JS Realizing to Change The Color Of The Specified Category Name.cpt

Click to download the template: 

JS Realizing to Change The Color Of The Specified Category Name.cpt