Pie highcharts legends with font awesome icons and values inside plot area.
After a log google search and and reviewing a lod lot of code snippets i have created a Code Pan Solution for how you can use Font Awesome Icons inside highcharts pie chart legends and how to show highcharts pie chart value inside plot area.
HTML
|
1 2 3 4 5 6 7 8 9 |
<!-- Font Awesome CDN CSS--> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Highcharts JS --> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="pieChart" class="pieChart"></div> |
CSS
|
1 2 3 4 5 |
.pieChart{ rect{ display: none; } } |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
// Build the chart Highcharts.setOptions({ colors: ['#ff1d8e', '#efad4f', '#5ab95d', '#dc5351'] }); Highcharts.chart('pieChart', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: "" }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { startAngle: 0, allowPointSelect: false, dataLabels: { softConnector: false, enabled: true, connectorWidth: 0, formatter: function () { return Math.round(this.percentage * 100) / 100 + ' %'; }, distance: -30, color: 'white' }, showInLegend: true } }, legend: { align: 'left', verticalAlign: 'top', layout: 'vertical', x: 40, y: 50, useHTML: true, itemMarginTop: 7, itemMarginBottom: 7, }, series: [{ type: 'pie', name: '', data: [ ['<i class="fa fa-edit"></i> Saved ', 40], ['<i class="fa fa-hourglass-o"></i> Pending ', 60,], ['<i class="fa fa-check-circle"></i> Approved ', 20], ['<i class="fa fa-times-circle"></i> Rejected ', 20], ], dataLabels: { useHTML: true }, animation: true }], }); |
Working Demo of Highcharts Legend with Font Awesome Icon and values inside plot area
[paypal-donation]
