score:3

Accepted answer

You can add the icons inside the labels of your dataset. Something like <i class='fa fa-times'></i>. By default any HTML is stripped from your labels, but you can enable it by setting dataLabels.useHTML to true.

In short, you would have to change this:

        series: [{
            type: 'pie',
            name: 'PPM Resource Waste',
            data: [
                ['Blank', 60],
                ['Icon 1%', 5],
                ['Icon 15%', 15],
                ['Icon 1%', 5],
                ['Icon 5%', 5]
            ],
            animation: false
        }]

to something similar to this:

             series: [{
                type: 'pie',
                name: 'PPM Resource Waste',
                data: [
                    ['<i class="fa fa-dollar fa-2x"></i> Blank', 60],
                    ['<i class="fa fa-save"></i> Icon 1%', 5],
                    ['<i class="fa fa-cutlery"></i> Icon 15%', 15],
                    ['<i class="fa fa-ban"></i> Icon 1%', 5],
                    ['<i class="fa fa-spinner fa-spin"></i> Icon 5% ', 5],
                ],
                dataLabels: {
                    useHTML: true
                },
                animation: false
            }]

as you can see in your updated fiddle: http://jsfiddle.net/z98ofd63/1/


Related Query

More Query from same tag