ciprianciurea / chartjs-plugin-doughnutlabel

Chart.js plugin for doughnut chart to display text in the center
https://ciprianciurea.github.io/chartjs-plugin-doughnutlabel/samples/index.html
MIT License
65 stars 24 forks source link

Plugin called 60 times #14

Open vasyl-shumskyi opened 4 years ago

vasyl-shumskyi commented 4 years ago

Thanks for an awesome plugin!

I have a strange issue on very basic setup. Plugin called 60 times for some reason.

It happens with every interaction with chart including hover. This slows down chart rendering.

Check out the attached screenshot with word HELLO appeared in debug console 60 times:

Screen Shot 2020-04-30 at 08 44 10

See the code below:

 <canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>

<script src="https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel/releases/download/2.0.3/chartjs-plugin-doughnutlabel.js"></script>

<script>
var ctx = document.getElementById('myChart').getContext('2d');

var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
  options: {
    plugins: {
      doughnutlabel: {
        labels: [

          {
            text: total,
            font: { size: '50' },
            color: 'gray'
          }

        ]
      }
    }       
  }
});

function total() {
  console.log('HELLO')
  return 'HELLO'
}
</script>

Can you verify if it happens on your side as well?

bes1002t commented 4 years ago

any improvement so far?

alexkuc commented 3 years ago

This is caused by the use of hook:

https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel/blob/f46069cb774da5de6b4bc8c168b7b44020df8d7f/src/plugin.js#L74

So the improvement would be to use a different hook, possibly afterDraw?

alexkuc commented 3 years ago

I have created a PR of this plugin (https://github.com/alexkuc/chartjs-plugin-doughnutlabel-rebourne) which allows you to override core plugin api so you can use something alternative instead of relying on a hardcoded value.

Ps. I assume that original maintainers of this repo are busy with something else; if they will become available, I am more than happy to merge my fork into this one