Use font-awesome icon in data label in Pie Chart - Javascript highcharts

Javascript examples for highcharts:Pie Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Pie Chart

Description

Use font-awesome icon in data label in Pie Chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from   ww w  .  j  a v a  2s  . c o  m
    var chart;
    $(document).ready(function () {
        Highcharts.setOptions({
            colors: ['#f1f1f1', '#A24130', '#A24130', '#A24130', '#A24130']
        });
        var chart;
        // Build the chart
        piechart = new Highcharts.Chart({
            chart: {
                renderTo: 'piecontainer',
                plotBackgroundColor: null,
                plotBorderWidth: 0
            },
            title: {
                text: null
            },
            credits: {
              enabled: false
            },
            tooltip: {
                pointFormat: false
            },
            plotOptions: {
                pie: {
                    startAngle: -270,
                    allowPointSelect: false,
                    dataLabels: {
                        softConnector: false,
                        //if data.point.name == empty string return enabled: false, else return enabled: true... This will be the slice called slice
                        enabled: true,
                        connectorWidth: 1,
                        distance: 15,
                        style: {
                            fontFamily: 'roboto',
                            fontSize: '8pt',
                            width: 80
                        }
                    },
                    showInLegend: false
                }
            },
            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
            }]
        });
    });
});

      </script> 
   </head> 
   <body> 
      <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="piecontainer"></div>  
   </body>
</html>

Related Tutorials