Skip to content

Instantly share code, notes, and snippets.

@rutgerhofste
Created September 5, 2023 14:50
Show Gist options
  • Save rutgerhofste/73478117fd8a2e78f56e81d12f505f0d to your computer and use it in GitHub Desktop.
Save rutgerhofste/73478117fd8a2e78f56e81d12f505f0d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
margin-top: 30px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Static data for the chart
const names = ['January', 'February', 'March', 'April', 'May'];
const scores = [12, 19, 3, 5, 2];
renderChart(names, scores);
});
function renderChart(labels, data) {
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Sales',
data: data,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment