Changing the Color of the Specified Category Name in the Chart by JS

Problem

Sometimes, during chart display, you need to highlight the impacts of certain categories on values by displaying the category names in a special way.

For example, when displaying the monthly sales data, you can highlight the category names for weekends in red. The following figure shows the effect.

Implementation Method

You can customize the format of category axis labels by JS.

Report Design

1. Create a general report and create a built-in dataset named Embedded1, as shown in the following figure.

2. Insert a line chart into a cell and bind the chart data, as shown in the following figure.

3. Select the line chart, customize the format of axis labels under Style > Axis > X Axis, and select Use HTML to Parse 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();
    }
}

Note:

If NaN is displayed when you preview the report on an iOS mobile device, the problem may be caused by the format of the time. You can replace var date = new Date(this); in the code with var date= new Date(Date.parse(this.replace(/-/g,  "/")));.  

Effect Display

PC

Save the report and click Pagination Preview. The following figure shows the preview 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 download the template Changing the Color of the Specified Category Name in the Chart by JS.cpt.