emn178 / chartjs-plugin-labels

Plugin for Chart.js to display percentage, value or label in Pie or Doughnut.
MIT License
617 stars 217 forks source link

Render Images, the first one doesn't appeare. Why? #39

Closed Matteobikk90 closed 7 years ago

Matteobikk90 commented 7 years ago

` var ctx = document.getElementById('myChart4').getContext('2d'); new Chart(ctx, { type: 'pie', data: { datasets: [{ data: [10, 20, 30, 40, 50 ,60] }],

                // These labels appear in the legend and in the tooltips when hovering different arcs
                labels: [
                    'Firefox',
                    'Windows',
                    'Chrome',
                    'Phone Nokia',
                    'IE',
                    'Mac'
                ]
            },

            options: {
                plugins: {
                    datalabels: {
                        display : false
                        }
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                var dataset = data.datasets[tooltipItem.datasetIndex];
                                var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
                                    return previousValue + currentValue;
                                });
                                var currentValue = dataset.data[tooltipItem.index];
                                var precentage = Math.floor(((currentValue/total) * 100)+0.5);         
                                    return precentage + "%";
                            }
                        }
                    },
                    hover: {
                        mode: 'null'
                    },
                    pieceLabel: {
                        render: 'image',
                        images: [
                          { src: 'https://rocketdock.com/images/screenshots/1-9.png', width: 32, height: 22 },
                          { src: 'http://www.iconarchive.com/download/i45768/tatice/operating-systems/Windows.ico', width: 32, height: 22 },
                          { src: 'https://cdn1.iconfinder.com/data/icons/logotypes/32/chrome-512.png', width: 32, height: 22 },
                          { src: 'https://cdn2.iconfinder.com/data/icons/picons-essentials/71/mobile-512.png', width: 32, height: 22 },
                          { src: 'http://www.freeaudiosamples.com/wp-content/uploads/2016/06/Mac-Icon.png', width: 32, height: 22 },
                          { src: 'http://icons.iconseeker.com/ico/longhorn-r2/internet-explorer-6.ico', width: 32, height: 22 }
                        ]
                    }
                }
            });`

this is all my code ragarding the chart, looks really good but the first icon doesn't appear

Matteobikk90 commented 7 years ago

sorry for bad formatting

emn178 commented 7 years ago

try overlap: true

Matteobikk90 commented 7 years ago

yes it fixed the issue, thanks a lot :-)