Skip to content

Horizontal Bar Chart

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

gf.stackY(
    { spacing: 4, alignment: "start", sharedScale: true },
    gf.map(data, (d) => gf.rect({ w: gf.value(d.b, "value"), h: 30 }))
  ).render(root, { w: 500, h: 300 });

Live Editor

import "./styles.css";

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