Using AplineJS with Chart JS to create Chart

Create Alpine reusable data


window.Alpine.data('pieChart', (element, data) => ({
element: element,
init() {
const ctx = this.element.getContext('2d');
const chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: this.labels,
datasets: this.datasets
}
});
},
labels: Object.keys(data),
datasets: [{
data: Object.values(data),
backgroundColor: Object.keys(data).map((key, index) => {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}),
borderColor: '#fff'
}],
}))


Add this to your canva element

`<canvas class="mb-8 h-48 w-48"
x-data="pieChart( $refs.chart,{
'balance': '100000',
'withdrawn': '10000',
'saved': '1000000',
})"
x-ref="chart"

`