Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 64 commits ahead of michaelknoch:master.


Failed to load latest commit information.
Latest commit message
Commit time


NGX-Cytoscape is an Angular 5+ wrapper around the CytoscapeJS 3 module based on original work from Michael Knoch.

This library enables you to add Cytoscape-based graph visualizations into your Angular application, with values supplied by instance variables.

This fork adds support for the Angular 5 library formats using RollupJS, supporting UMD and CommonJS formats.

Originally forked from Michael Knoch's repo for Angular 2:

Updates also provided to this repo from Nick Bradford - if this fork is out of date check out his:


Assuming you have a package.json defining your project (possibly generated from @angular/cli's "ng new" or "npm init"), you can use the regular "npm install" approach to get the current version. For now, you'll also have to manually add CytoscapeJS to your project as well:

$ npm install --save ngx-cytoscape cytoscape

Tracking changes

If you want to track the most recent updates then specifiy the "latest" version

$ npm install --save ngx-cytoscape@latest cytoscape

The project may be mildly fluid, so use extensive Unit/E2E tests if you do and be prepared to rollback with "git" or your version control software if tests fail).

The workflow outline of tracking changes might look something like this:

$ git add . ; git commit -m "Pre-update check-in"
$ ng test   # Store test results for future comparison
$ npm update ngx-cytoscape cytoscape
$ ng test   # Now compare these tests results to the previous
$ git add . ; git commit -m "Passed tests after update" # If the tests looked good
$ git revert # If the tests were worse off and you don't want to update your code at this point

Of course, CI systems like Jenkins or Travis can automate this for you.

Regardless of whether you're tracking changes or locking in a particular version, verify in your package.json that you have lines that look like this in your "dependencies" section (either "latest" or something like "^0.5.20" for ngx-cytoscape depending on which you chose):

"ngx-cytoscape": "latest",
    "cytoscape": "^3.2.8",

For now, you'll also have to add the underlying CytoscapeJS library to your .angular-cli.json. Note we've also assumed that you have the full version of jQuery already installed (Bootstrap, Cytoscape, and other modules need the full version - Angular only supplies the "lite" version as the fallback if you don't supply your own full jQuery).

(Stop and restart any "ng serve" or "ng build --watch" when you make changes to the .angular-cli.json file):

      "scripts": [

and then in your Angular AppModule, import for both TypeScript and Angular:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { CytoscapeModule } from 'ngx-cytoscape'; // <= Add this TS import

  declarations: [
  imports: [
    CytoscapeModule // <= Add this NG import
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

From there, you can invoke

Example Usage

In the component you want to use Cytoscape in, provide an instance property with nodes and edges, then pass that to the [elements] @Input of the tag in your HTML. Here's a condensed version.

import {Component} from '@angular/core';

    selector: 'graph',
    template: '<ngx-cytoscape [elements]="graphData"></ngx-cytoscape>',
    styles: [`
        ngx-cytoscape {
          height: 50vh;
          float: left;
          position: relative;
          border: solid #21c0c0;
          width: 50em;
export class Graph {

    graphData = {
        nodes: [
            {data: {id: 'j', name: 'Jerry', faveColor: '#6FB1FC', faveShape: 'triangle'}},
            {data: {id: 'e', name: 'Elaine', faveColor: '#EDA1ED', faveShape: 'ellipse'}},
            {data: {id: 'k', name: 'Kramer', faveColor: '#86B342', faveShape: 'octagon'}},
            {data: {id: 'g', name: 'George', faveColor: '#F5A45D', faveShape: 'rectangle'}}
        edges: [
            {data: {source: 'j', target: 'e', faveColor: '#6FB1FC'}},
            {data: {source: 'j', target: 'k', faveColor: '#6FB1FC'}},
            {data: {source: 'j', target: 'g', faveColor: '#6FB1FC'}},

            {data: {source: 'e', target: 'j', faveColor: '#EDA1ED'}},
            {data: {source: 'e', target: 'k', faveColor: '#EDA1ED'}},

            {data: {source: 'k', target: 'j', faveColor: '#86B342'}},
            {data: {source: 'k', target: 'e', faveColor: '#86B342'}},
            {data: {source: 'k', target: 'g', faveColor: '#86B342'}},

            {data: {source: 'g', target: 'j', faveColor: '#F5A45D'}}

    constructor() {


There's a fuller version in the "cytodemo" folder of the GitHub repo.

Future work will include more support for 3rd party Cytoscape plugins. Currently, to use a plugin like canvas, you'll have to get access to the module's exposed "cy" object:

import { Component, OnInit, ViewChild } from '@angular/core';

// ...

export class MyComponent implements OnInit, ngAfterViewInit {

  // Get reference to the native element cytoscape instance 
  @ViewChild('cytoscape') cytoscape: any;

  // ...

  ngAfterViewInit() {
      if ( {
        const cyLayer =;
        const cnv: HTMLCanvasElement = cyLayer.getCanvas();
        const ctx: CanvasRenderingContext2D = cnv.getContext("2d");
        // ...
"render cyCanvas.resize", function(evt, src) {
              // "this" is now "cy" inside this callback function
              ctx.fillStyle = "#ff00ff";
              //ctx.fillRect(0, 0, 100, 100); // Top left corner

              const width = cnv.width;
              const height = cnv.height;
              const data = Array(width * height);

              // Draw model elements
              this.nodes().forEach(function(node) {
                  const pos = node.position();
                  // Do something with canvas at or around the node's position
                  ctx.fillRect(pos.x - 25, pos.y - 25, 50, 50); // At node position (bisection point of 50x50 rectangle)
      // ...

Of course, you'll also have to have added it to the package.json:

$ npm install cytoscape-

Your package.json should have at least these entries in this case:

    "ngx-cytoscape": "latest",
    "cytoscape": "^3.2.8",
    "cytoscape-canvas": "^3.0.1",

As well as to the .angular-cli.json (stop and restart any "ng serve" or "ng build --watch" when you make changes):

      "scripts": [


You'll probably want to start by cloning the repository:

$ git clone

CD into the ngx-cytoscape directory.

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

The actual module distribution is in the "dist/" folder. If you want to develop locally, CD into that folder and do an "npm link"

$ cd dist
$ npm link

This uses either a symbolic link (Unix) or Junction (Windows) to point to the dist folder in your local npm module cache. Any changes you make in the project and rebuild locally will be immediately available in local npm cache. (Just don't forget to re-run the "npm run build" command after making local changes.)

Then in the project you want to use the module in (another project created with @angular/cli's "ng new" or "npm init"), invoke link again with the module name (another symlink/junction to the local npm cache, but this time as a read-only reference):

$ cd ~/workspace/my-angular-project
$ npm link ngx-cytoscape

If you have anything you'd like to contribute or improve, please feel free to make a "pull request".


MIT ©2018 [Calvin Vette]


A modern Angular 5+ and CytoscapeJS 3 wrapper that supports 3rd-party plugins like cytoscape-canvas.






No releases published


No packages published


  • JavaScript 63.2%
  • TypeScript 30.1%
  • HTML 3.3%
  • Makefile 2.9%
  • CSS 0.5%