1

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!

S. C.
  • 110
  • 1
  • 13
Denys
  • 283
  • 2
  • 11

1 Answers1

2

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>
  }
}
Thomas
  • 8,426
  • 1
  • 25
  • 49
  • Thank you, Thomas! It's working. I also found another way with using import embed from 'vega-embed' componentDidLoad() { embed('#viz', this.spec, {actions:false}) } And now trying to figure out which way is more common – Denys Jan 06 '23 at 13:45