I've noticed in my last project, that the scale label (not scale title) renders everything in plain text (except unicode symbols). Instead of 1,2,3... I would like to show Icons. Is it possible to use html or add fontawesome icons in there?

"options"=>array(
            "scales" => array(                    
                "xAxes" =>  array(
                    array(
                        "id"=>'x-axis-0',
                        "ticks" => array(
                            "min"=>0,
                            "max"=> 4,
                            "stepSize"=> 0.5,
                            "suggestedMin"=> 0.5,
                            "suggestedMax"=> 5.5,
                            "fontFamily"=> "FontAwesome",
                            "callback" => "function(label, index, labels) {
                                switch (label) {
                                case 0:
                                    return '<i class=\"fa fa-times\" aria-hidden=\"true" style=\"color: red;\"></i>';
                                case 1:
                                    return '<i class=\"fa fa-calendar-minus-o\" aria-hidden=\"true\" style=\"color: purple;\"></i>';
                                case 2:
                                    return '<i class=\"fa fa-dot-circle-o\" aria-hidden=\"true\" style=\"color: orange;\"></i>';
                                case 3:
                                    return '<i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: black;\"></i>';
                                case 4:
                                    return '<i class=\"fa fa-recycle\" aria-hidden=\"true\" style=\"color: green;\"></i>';
                                }
                            }"

                        ),                           
                    )
                ),

I meant the axis label not the scale label. (Maybe you could change the title).

I found a solution for my problem and maybe this could help someone.

You have to set the font family -> "fontFamily"=> "FontAwesome" But apparently the font wasn't loaded into the chart, so you have to load it separately:

<script src="https://use.fontawesome.com/xxx.js"></script>

The following is working for me, although I can't figure out how to change the color for the icons. If someone has a tip for that, it would be great to hear

"scales" => array(                    
                "yAxes" =>  array(
                    array(
                        "id"=>'y-axis-0',
                        "ticks" => array(
                            "min"=>0,
                            "max"=> 4,
                            "stepSize"=> 1,
                            "suggestedMin"=> 0.5,
                            "suggestedMax"=> 5.5,
                            "fontFamily"=> "FontAwesome",
                            "fontSize"=> 16,
                            "callback" => "function(label, index, labels) {
                                switch (label) {
                                case 0:
                                    return '\uf068 \uf068 ';
                                case 1:
                                    return '\uf068   ';
                                case 2:
                                    return '\uf067 \uf068 ';
                                case 3:
                                    return '\uf067   ';
                                case 4:
                                    return '\uf067 \uf067 ';
                                }
                            }"
                            
                        ),                            
                    )
                ),
                "xAxes" =>  array(
                    array(
                        "id"=>'x-axis-0',
                        "ticks" => array(
                            "min"=>0,
                            "max"=> 4,
                            "stepSize"=> 0.5,
                            "suggestedMin"=> 0.5,
                            "suggestedMax"=> 5.5,
                            "fontFamily"=> "FontAwesome",
                            "fontSize"=> 18,
                            "callback" => "function(label, index, labels) {
                                switch (label) {
                                case 0:
                                    return '\uf00d';
                                case 1:
                                    return '\uf073';
                                case 2:
                                    return '\uf192';
                                case 3:
                                    return '\uf00c';
                                case 4:
                                    return '\uf1b8';
                                }
                            }"

                        ),                           
                    )
                ),

            ),