chartjs-plugin-doughnutlabel
chartjs-plugin-doughnutlabel copied to clipboard
Plugin called 60 times
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:
See the code below:
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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?
any improvement so far?
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?
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