Skip to content

Stacked Area Chart

ts
Frame([
    StackX(
      {
        spacing: 0,
        sharedScale: true,
      },
      For(_(streamgraphData).groupBy("x"), (items, xCoord) =>
        StackY(
          { spacing: 0, x: v(xCoord) },
          For(items, (d) =>
            Rect({
              name: `${xCoord}-${d.c}`,
              h: v(d.y),
              w: 0,
              fill: v(d.c),
            })
          )
        )
      )
    ),
    ...For(_(streamgraphData).groupBy("c"), (items, c) =>
        ConnectX(
          {
            mixBlendMode: "normal",
            strokeWidth: 1,
          },
          For(items, (d) => Ref(`${d.x}-${d.c}`))
        )
      ),
  ]).render(root, { w: 500, h: 300, axes: true });