Chart.js w aplikacji angularowej
Chart.js jest prostym w użyciu frameworkiem do rysowania wykresów. Użycie go w aplikacji angularowej jest również proste. Najpierw dodajemy chart.js do package.json:
npm i chart.js
Następnie dodajemy canvas do pliku HTML w komponencie:
<canvas id="myChart"></canvas>
Teraz wystarczy dodać nowy obiekt w komponencie i ustawić parametry wykresu:
const myChart = new Chart("myChart", {
type: 'bar',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
datasets: [
{
label: 'Random Data',
data: [1, 3, 3, 2, 5],
backgroundColor: '#4CA34A',
hoverBackgroundColor: '#4CA34A99',
borderColor : "#000",
borderWidth : 1,
borderRadius: 10,
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
Ostatnim krokiem będzie ostylowanie wykresu:
canvas#myChart {
background-color: #CBD1D7;
border-radius: 25px;
padding: 15px;
}
Ta-da!
