Whenever there is a data change, ChartJS just doesn't re render the Chart.
Here's the flow.
Whenever I press a button, it fires an event and refreshes the entire chart component. I can see data is being updated({{$countPublished}}) but the chart doesn't
Anybody can help? Thanks
<canvas id="pieChart"></canvas>
<div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
<!-- Chart legend -->
<div class="flex items-center">
<span class="inline-block w-3 h-3 mr-1 bg-red-200 rounded-full"></span>
<span>Pending</span>
</div>
<div class="flex items-center">
<span class="inline-block w-3 h-3 mr-1 bg-purple-700 rounded-full"></span>
<span>Published {{$countPublished}} </span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"> </script>
<script>
/** Doughnut Chart */
var ctx = document.getElementById('pieChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [{{$countPublished}}, {{$countunPublished}}],
backgroundColor: ['#7e22ce', '#fecaca'],
label: 'Post',
}, ],
labels: ['Published', 'Reviewing'],
},
options: {
responsive: true,
cutoutPercentage: 60,
legend: {
display: false,
},
},
});
function updateConfigByMutating(Chart) {
myChart.data.datasets.data = [{{$countPublished}}, {{$countunPublished}}],
myChart.update();
}
found the fix.
had to fire an emit event when the button is pressed along with it's values contained under $data.
Then added this in my blade file
window.onload = function() {
Livewire.on('refreshCharts', ($data) => {
var ctx = document.getElementById('pieChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: $data,
backgroundColor: ['#7e22ce', '#fecaca'],
label: 'Post',
}, ],
labels: ['Published', 'Reviewing'],
},
options: {
responsive: true,
cutoutPercentage: 50,
legend: {
display: false,
},
},
});
})
}