All chart examples are taken from the official Vega website (https://vega.github.io/vega/examples/). Inspired by this Plunker https://embed.plnkr.co/5i5dIK/ and trying to implement different charts with Angular 5/2+ and Vega.
Install Vega and typings for the library.
npm install vega
npm install @types/vega`
Add Path to Vega library to the .angular-cli.json file:
...
"scripts": ["../node_modules/vega/build/vega.min.js"],
...
Import the library where you want to use it.
declare var vega: any;
Using the library in your Angular Component:
@Component({
selector: 'vega-chart',
templateUrl: './vega-chart.component.html',
styleUrls: ['./vega-chart.component.css']
})
export class VegaChartComponent implements OnInit {
id: number;
view: View;
constructor() { }
public vegaInit(spec: Spec) {
this.view = new vega.View(vega.parse(spec))
.renderer('svg') // set renderer (canvas or svg)
.initialize('#' + this.id)// initialize view within parent DOM container
.width(500) // set chart width
.height(500) // set chart height
.hover() // enable hover encode set processing
.run();
}
ngOnInit() {
vega.loader().load('/path/to/data.json')
.then((data) => { this.vegaInit(JSON.parse(data)); });
}
}
This project was generated with Angular CLI version 1.6.4.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.