Great write-up; might be worth mentioning how to handle additional client-side things.. tooltips for instance..

[megalithic]

Having just gone through this with a project at work, here's some additional items that could be added for charting interactions with vega-embed:

this.viewPromise = vegaEmbed(container, spec, {
  renderer: "svg",
  actions: false,
  tooltip: {
    theme: "custom_theme",
    formatTooltip: (datum, sanitize) => `
      <span class="tooltip-inner another-class">
        <span class="primary">${sanitize(datum.date)}</span>
        <strong class="secondary">${sanitize(datum.count)}</strong>
      </span>`,
  },
})

You'd need the additional VegaLite code in your LiveView code to handle tooltip data things.

In addition, you might want to add a destroyed event to handle cleanup..

destroyed() {
  if (this.viewPromise) {
    this.viewPromise.then((view) => view.finalize());
  }
},

Hope that helps!

[filipecabaco]

Wanted to keep it as a really simple example but can add it later 👍