Search code examples
angularjsd3.jsnvd3.jsangular-nvd3angularjs-nvd3-directives

Unicode label is not displayed as a Fontawesome icon


I am creating a chart using angular-nvd3 I got a problem when I try to display an icon where it's a label.

$scope.data = [
            {
                "key": "Series2",
                "values": [
                    {
                        "label" : '',
                        "value" : 0.56
                    } ,
                    {
                        "label" : "" ,
                        "value" : 0.20
                    } ,
                    {
                        "label" : "" ,
                        "value" : 0.10
                    } 
                ]
            }
        ]

But when it displayed on the chart it got an unicode label:

<text dy=".32em" x="-5" y="0" style="text-anchor: end;">&amp;#xf015;</text>

&amp;#xf015; this is what it's actually show on HTML but it should display &#xf015;

Anyone have experience with this ? Or any ideas for me ? Thank you Here is plnkr URL: http://plnkr.co/edit/PygsTn?p=preview


Solution

  • replace this: &#xf015; by \uf015

    use \u instead of \\

    It's from @Gerardo Furtado answer: untrusted HTML in d3.js v4 and AngularJS