<div>
<canvas id="myChart"></canvas>
</div>
const ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || "";
if (label) {
label += ": ";
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
}).format(context.parsed.y);
}
return label;
}
}
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
This Pen doesn't use any external CSS resources.