xxxxxxxxxx1
2
<!--Grid column-->3
<div class="col-lg-6 col-md-18 mb-6">4
<div class="card">5
<div class="card-header">Header</div>6
<div class="card-body">7
<canvas id="chart-async-data-example"></canvas>8
</div>9
</div>10
</div>11
<!--end Grid column 1-->1
1
xxxxxxxxxx1
const optionsChartDataLabelsExample = {2
dataLabelsPlugin: true,3
options: {4
plugins: {5
legend: {6
position: "bottom",7
},8
datalabels: {9
formatter: (value, ctx) => {10
let sum = 0;11
// Assign the data to the variable and format it according to your needs12
let dataArr = dataChartDataLabelsExample.data.datasets[0].data;13
dataArr.map((data) => {14
sum += data;15
});16
let percentage = ((value * 100) / sum).toFixed(2) + '%';17
return percentage;18
},19
//color: 'white',20
labels: {21
title: {22
font: {23
size: '12',24
},25
},26
},27
},28
},29
},30
};31
//end options32
const chart = document.getElementById('chart-async-data-example');33
const chartInstance = new mdb.Chart(chart, { type: 'doughnut' });34
35
fetch('https://api.covid19api.com/total/country/poland/status/confirmed?from=2020-11-01T00:00:00Z&to=2020-12-01T00:00:00Z')36
.then((data) => data.json())37
.then((data) => {38
const dataset = data.map((obj) => obj['Cases']);39
const labels = data.map((obj) => obj['Date'].substr(0, 10));40
chartInstance.update({41
labels,42
datasets: [43
{44
color: '#FFCDD2',45
data: dataset,46
label: 'Number of cases',47
pointRadius: 0,48
borderColor: dataset.color,49
},50
],51
});52
});53
Console errors: 0