<canvas id="popChart" width="600" height="600"></canvas>
body {
height: 600px;
}
canvas {
max-height: 100%;
}
xxxxxxxxxx
var popCanvas = document.getElementById("popChart");
Chart.defaults.font.family = "Lato";
Chart.defaults.font.size = 18;
Chart.defaults.color = "black";
var popData = {
datasets: [
{
label: ["Deer Population"],
data: [
{ x: 100, y: 0, r: 10 },
{ x: 60, y: 30, r: 20 },
{ x: 40, y: 60, r: 25 }
],
backgroundColor: "#9966FF",
hoverBackgroundColor: "#FFFFFF",
hoverBorderColor: "#9966FF",
hoverBorderWidth: 5,
hoverRadius: 5
},
{
label: ["Giraffe Population"],
data: [
{ x: 80, y: 80, r: 30 },
{ x: 20, y: 30, r: 25 },
{ x: 0, y: 100, r: 5 }
],
backgroundColor: "#FF6600",
hoverBackgroundColor: "#FFFFFF",
hoverBorderColor: "#FF6600",
hoverBorderWidth: 5,
hoverRadius: 5
}
]
};
var chartOptions = {
plugins: {
title: {
display: true,
position: "bottom",
text: "Animal Population at Different Hotspots",
font: {
size: 20
}
},
legend: {
position: "bottom",
align: "center"
}
},
layout: {
padding: 20
}
};
var bubbleChart = new Chart(popCanvas, {
type: "bubble",
data: popData,
options: chartOptions
});