D3.js
<!DOCTYPE html>
<html>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const data = [10, 20, 30, 40, 50, 60, 70, 80];
const svg = d3.create("svg").attr("width", 400).attr("height", 200);
svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 50)
.attr("y", d => 100 - d)
.attr("width", 40)
.attr("height", d => d)
.attr("fill", "pink");
document.body.append(svg.node());
</script>
</body>
</html>
Chart.js
<!DOCTYPE html>
<html>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: "bar",
data: {
labels: ["A", "B", "C", "D", "E", "F", "G"],
datasets: [
{
label: "Values",
data: [10, 20, 30, 40, 50, 60, 70, 80],
backgroundColor: "pink",
},
],
}, options: {
scales: {
x: {
display: false // Hide x-axis
},
y: {
display: false // Hide x-axis
}
},
plugins: {
legend: {
display: false
}
}
}
});
</script>
</body>
</html>
Leave a Reply