<div id="chart"></div>
<script type="module">
  import { reactive, html } from "https://esm.sh/@arrow-js/core";

  const data = reactive({ values: [10, 20, 30] });

  const svg = html`<svg width="100" height="100" viewBox="0 0 100 100">
    ${data.values.map(
      (v, i) =>
        html`<rect
          x="${i * 10}"
          y="${100 - v}"
          width="9"
          height="${v}"
          fill="red"
        ></rect>`,
    )}
  </svg>`;

  svg(document.getElementById("chart"));
</script>