<canvas id="birdsChart" width="1000" height="400"></canvas>
body {
height: 500px;
}
canvas {
max-height: 100%;
}
xxxxxxxxxx
var birdsCanvas = document.getElementById("birdsChart");
Chart.defaults.font.family = "Lato";
Chart.defaults.font.size = 22;
Chart.defaults.color = "black";
var birdsData = {
labels: ["Spring","Summer","Fall","Winter"],
datasets: [{
data: [1200, 1700, 800, 200],
backgroundColor: [
"rgba(255, 0, 0, 0.5)",
"rgba(100, 255, 0, 0.5)",
"rgba(200, 50, 255, 0.5)",
"rgba(0, 100, 255, 0.5)"
]
}]
};
var chartOptions = {
plugins: {
title: {
display: true,
align: "start",
text: "Migratory Birds in Different Seasons"
},
legend: {
align: "start"
}
}
};
var polarAreaChart = new Chart(birdsCanvas, {
type: 'polarArea',
data: birdsData,
options: chartOptions
});