Skip to content

Bar Chart

ts
const alphabet = [
  { letter: "A", frequency: 28 },
  { letter: "B", frequency: 55 },
  { letter: "C", frequency: 43 },
  { letter: "D", frequency: 95 },
  { letter: "E", frequency: 81 },
  { letter: "F", frequency: 53 },
  { letter: "G", frequency: 19 },
  { letter: "H", frequency: 87 },
  { letter: "I", frequency: 52 },
];

StackX(
  { spacing: 4, alignment: "end", sharedScale: true },
  For(alphabet, (d) => Rect({ w: 30, h: v(d.frequency) }))
).render(root, { w: 500, h: 300, axes: true });

Live Editor

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;