How to integrate vega chart to stencil js component?

Question

I am trying to create a stencil js component using vega chart, according to vega manual i installed 3 packages:

npm install vega
npm install vega-lite
npm install vega-embed

and trying to import

import { Vega } from 'vega'

and get this.

Module '"vega"' has no exported member 'Vega'

Did anyone manage to integrate vega chart into stencil js?

Thank you in advance!

Answer 1

According to the usage docs:

Using Vega with a bundler. If you use Vega with a bundler like rollup.js, you can import Vega as a module.

import * as vega from "vega";

Note that if you're using it in a component with Shadow DOM enabled you will probably need to pass Vega, in the container configuration, a DOM node instead of a CSS selector:

class MyComponent {
  container: HTMLDivElement;

  componentDidLoad() {
    new vega.View(vega.parse(spec), {
      renderer:  'canvas',  // renderer (canvas or svg)
      container: this.container,   // parent DOM container
    });

    // ...
  }

  render() {
    return <div ref={el => this.container = el}></div>
  }
}